Facebook’s Open Graph Protocol (OGP) – why it matters

So Facebook’s Open Graph Protocol (OGP) was held at Facebook HQ (Headquarters) on the 23rd of August 2010. 164  people attended that afternoon event. A very healthy turnout with alot of interesting people from all sorts of industries working on many exciting projects thirsty to find out how to integrate with Facebook.

What is OGP and what does it do for you?

Open Graph Protocol (OGP) is a light-weight version of Semantic Web and it is implemented using RDFa. The OGP 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. Once your pages become objects in the graph, users can establish connections to your pages as they do with Facebook Pages. Based on the structured data you provide via the Open Graph protocol, your pages show up richly across Facebook: in user profiles, within search results and in News Feed.

Let’s OGP enable my website – step by step guide

To turn any web page into graph objects, we need to add basic metadata to a page.

Let’s take a look at my photography website (http://ernestsemerda.com/bands.foto) and how I implemented the Facebook Like button with Facebook’s Open Graph Protocol (OGP).

1. I added the following 7 “must have” metadata properties into my page (bands.foto). If you want to know the detail on each metadata the see this site http://opengraphprotocol.org/. There are only 4 required properties (the 1st four) but the others are a must in my opinion in order to provide more detail to Facebook about your page.

<!-- Facebook Open Graph -->
<meta property="og:title" content="Band Photography" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://ernestsemerda.com/bands.foto" />
<meta property="og:image" content="http://ernestsemerda.com/images/ernestsemerda_logo.png" />
<!-- recommended -->
<meta property="og:description" content="Band photographer based in San Francisco, Sydney & New York" />
<meta property="og:site_name" content="Ernest Semerda Photography" />
<!-- admin -->
<meta property="fb:admins" content="ernestsemerda" />

It’s important that fb:admin is added (last property) since without it you will not be able to administer your page’s Object Graph in Facebook.

2. Next generate the Facebook Like button using Facebook’s own tool located here: http://developers.facebook.com/docs/reference/plugins/like

3. Copy the iframe html code Facebook generates based on the properties you opted for and paste it into your web page where you want the Like button to appear.

General rules of the Like button:

• Make it easy for users to Like things on your site. Place the Like button close to the object they are liking.
• When publishing, use only the ‘voice’ of the object. For example, if users are liking an actor in a TV show, that actor should publish stories about themselves, not general information on the show, or the TV network.

4. Check your final work using Facebook’s URL Linter. Thanks Paul Tarjanto from Facebook for creating this cool tool. So enter the URL of the page you pasted the Like button and hit Lint (submit). Linter uses the same code that is used for the Like button and other Open Graph Protocol consumptions. Therefore, it gives you the closest possible match as to how your page will be treated when it’s crawled in production.
http://developers.facebook.com/tools/lint/

5. Congratulations, your done! Click on the Like button to test it out.

Why is this important?

Once your page is Liked, it will become an object in the Facebook graph where users can establish connections to the page as they do with Facebook Pages. Based on the structured data provided via the Open Graph protocol, the pages can show up richly across Facebook: in user profiles, within search results and in News Feed. For example, since I’m using og:type=website, clicking on Like will make my band photography page appear under your “Info” tab in the “Likes and interests” section. Give it a shot.

As the admin (me in this case) will have access to a Facebook Page like section for my web page hosting the Like button. As shown below. This provides insights (statistics) on Active Users, Likes, Views, Feedback and allows me to “market” my web page across Facebook. A double win!

Gold nugget from this meetup

Mike Messenger on meetup.com posted a true gold nugget:

“Facebook may begin pulling RSS data from pages with like buttons in order to deliver updates about these pages automatically to those who have liked then. This is HUGE! – Facebook now accepts Non-Official OG:types and will consider making official any og:type which reaches critical velocity.”

Totally agree with Mike. It’s better to be ready then come to the party late. Which is why this blog and my personal development blog already carry Facebook’s Open Graph Protocol Like buttons. Here’s to Semantic Web, better search engine results & web exposure for marketers.

Slides from the presentation

The slides from this Facebook presentation are now available for download here:
http://www.scribd.com/doc/36376091/Open-Graph-Protocol-at-the-Silicon-Valley-Semantic-Technology-Meetup

If you want more information about Facebook’s Open Graph Protocol (OGP) go here:
http://opengraphprotocol.org/

Are you OGP connected?

If you are already using (or just installed) Facebook’s Open Graph Protocol (OGP) please share it here with the rest of the online community. Would love to see the various ways this great feature is being used. Happy Facebooking and here’s to Semantic Web!

Ernest