Blog

Blog Interact® Apps using HTML5 Microdata & The Open Graph Protocol

12/15/2012
Author: Bryan P. Hollis
Posted in: Code & Programming,Web Design
No comments yet

Share Translate this post...

The Open Graph Protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Blog Interact® Network Page, makes your page equivalent to a Facebook Page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the “Likes and Interests” section of the user’s profile, and you have the ability to publish updates to the user. Your page will show up in the same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. The structured data you provide via the Open Graph Protocol defines how your page will be represented on Facebook.

Blog Interact® Network Pages are using 3 simple, yet powerful APIs to run a series of Applications with Facebook, Twitter and Google+ to give you the best experience in social networking and bookmarking efficiency while maintaining the sincerity it takes to have a quality social network.

Getting Started

To turn your web pages into graph objects, you’ll need to add Open Graph Protocol <meta> tags and the Like button to your webpages.

The tags allow you to specify structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future. Here’s an example for a movie page:

The Open Graph Protocol is very similar to what Google is leaning towards more, which is the HTML5 Microdata for a more defined website to the web crawlers, search engines, etc. You can see the similarity below between Open Graph’s code structure and HTML5′s Microdata.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons."/>
    ...
  </head>
  ...
</html>

The Open Graph Protocol defines four required properties:

og:title - The title of your object as it should appear within the graph, e.g., “The Rock”.
og:type - The type of your object, e.g., “movie”. See the complete list of supported types.
og:image - An image URL which should represent your object within the graph. The image must be at least 50px by 50px (though minimum 200px by 200px is preferred) and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g.,http://www.imdb.com/title/tt0117500/.

If you’re not interested in getting bogged down with multiple apps and API calls, sign-up for your free Blog Interact® Network Page and the tools necessary to build a unique and powerful social media page.

Ronan_Lee: RT @mikeblack: Michael and David Black Chiropractic Group are conducting free spinal health assessments during Spinal Health Week... http://t.co/K2s70AxKaD
in 5 hours from web

drandysmyth: Many people who are in MVAs never full recover and have long term pain. My #chiropractic methods really help. http://t.co/AJVTT2HAH4
in 5 hours from web

jaxmedical: Chiropractic Care Can Help Doctors of chiropractic are trained and licensed to treat the entire neuromusculoskeletal system and can...
in 5 hours from HootSuite

DistrictFindsSF: $29 for Chiropractic Consult, Exam, Spinal Decompression Session & 1 Hour Massage ($350 Value) @crowdsavings http://t.co/YlgToc4USf
in 5 hours from DistrictFinds

More Story Tag Tweets... »

About The Author

I am a writer, editor, and publisher (just barely). I started Blog Interact® to allow for an "all-inclusive" site for bloggers and other journalists to come together and view each other's work. Additionally, Blog Interact® allows viewers and subscribers to find the highest quality and helpful content available on the web. Connect with me through Blog Interact®, LinkedIn, or Twitter!

Website: http://sandlapperwebdesign.com/