Monday, July 12, 2010

Teach your Blogger Blog to speak Facebook's open graph protocol

In your blog's control panel goto the Design tab and select Edit HTML. Find a tag called "<head>" (ctrl+f if you can't find it quickly) and add this code right after it:
<!-- Facebook open graph --> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='&quot;the post: &quot; + data:blog.pageName' property='og:title'/> 
    <meta content='article' property='og:type'/> 
</b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <meta expr:content='data:blog.pageName + &quot; posts&quot;' property='og:title'/> 
    <meta content='article' property='og:type'/> 
    <meta expr:content='data:blog.pageTitle' property='og:description'/> 
</b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta content='the blog' property='og:title'/> 
    <meta content='blog' property='og:type'/> 
    <meta content='Put your helmet on!' property='og:description'/> 
</b:if>

<meta expr:content='data:blog.url' property='og:url'/> 
<!-- REPLACE THIS WITH YOUR OWN IMAGE -->
<meta content='http://3.bp.blogspot.com/_XnhytjnfyaU/TBI7ItnIPII/AAAAAAAABJY/SJRWM5RHDgI/S1600-R/header.png' property='og:image'/> 
<meta content='625752324' property='fb:admins'/> 
<meta expr:content='data:blog.title' property='og:site_name'/> 

<!-- Facebook open graph --> 
Here is a break down of whats going on here:
This code is specific for item (post) pages, it tells facebook that the title for this page should be The post: <post name here> and the graph object type is article (this tells facebook that the content is transient, see link to reference at the end of this post).
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='&quot;the post: &quot; + data:blog.pageName' property='og:title'/> 
    <meta content='article' property='og:type'/> 
</b:if>
The result on the user's wall will look like this:

Next:
This code handles archive pages (like this one) and will tell facebook that the title should be <month year> posts e.g. December 2008 posts.
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <meta expr:content='data:blog.pageName + &quot; posts&quot;' property='og:title'/> 
    <meta content='article' property='og:type'/> 
    <meta expr:content='data:blog.pageTitle' property='og:description'/> 
</b:if>
The result on the user's wall will look like this:

Next:
Code to handle data in our blog's index (homepage), this will tell facebook that the title is the blog and the type of the graph object is blog. I also specified a static description text: put your helmet!
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta content='the blog' property='og:title'/> 
    <meta content='blog' property='og:type'/> 
    <meta content='Put your helmet on!' property='og:description'/> 
</b:if>
The result on the user's wall will look like this:

Finally, we're telling facebook about some general stuff:
Here we wire the current page's url to the open graph protocol's url property:
<meta expr:content='data:blog.url' property='og:url'/> 
The image facebook uses all around when displaying our graph object on facebook (If you don't replace this with your own image, you'll get my blog header image):
<meta content='http://3.bp.blogspot.com/_XnhytjnfyaU/TBI7ItnIPII/AAAAAAAABJY/SJRWM5RHDgI/S1600-R/header.png' property='og:image'/>
The user id (or ids) of the facebook profiles that administer this page (see how to find your user id here):
<meta content='625752324' property='fb:admins'/> 
A title for the site:
<meta expr:content='data:blog.title' 
property='og:site_name'/> 
Basically in places where we want a dynamic blogger property we use expr:<attribute>='<blogger data expression>' instead of simple html attributes like context="My title".

If you want to see how Facebook reads your open graph protocol metadata you can use Facebook's URL Linter.

Here you'll find the Open Graph Protocol's reference.

For more information, please see my post on how to use Facebook Javascript SDK from your blog and properly add a "like" button to your posts.

Also, check out some cool blogger books on amazon: Search Amazon.com for blogger