Despite the controversy surrounding Instant Personalization, the social plugins offered by Facebook seem to do rather well on the Internet, at least according to the data published on their blog. It’s fairly easy to add social data and interaction on a blog, but, as I discovered, some of the options have interesting side effects. Let’s see what are the main steps to transform a blog into a ‘social object’:
Add Open Graph protocol markup to the blog
Probably the most open part of the new Facebook initiative, the Open Graph protocol enables any web page to become a rich object in a social graph
. It’s always good to have a little more structure and this metadata could potentially be used by search engines as well. To add the properties defined in the Open Graph protocol to a Blogger blog, there are a few lines of code you should add to the HTML template:
- Before the <head> tag a line to specify you are using the Open Graph protocol on the site:
xmlns:og='http://opengraphprotocol.org/schema/'
- After the <head> tag the metadata defining the blog and each page or article:
<meta property='og:title' expr:content='data:blog.pageTitle' />
<meta property='og:site_name' expr:content='data:blog.title' />
<meta property='og:url' expr:content='data:blog.url' />
<meta content='URL for image file, e.g. site logo' property='og:image' />
<meta content='blog' property='og:type' />
<meta content='Free text' property='og:description' />
This is probably the simplest way to dynamically specify page titles and URLs, by referencing the corresponding Blogger variables. There are other properties related to location and contact information for example, but they can be added as simple text, since they will be the same for all the pages on a site.
After making these changes to my own blog, I noticed that posting a link to my blog on a Facebook wall behaves differently. Normally, it detects images on the page and a small text snippet like an excerpt of the page content. Now, instead of that, it offers only the image and description specified by the Open Graph metadata. That can be useful when every page has it’s own Open Graph image and description, because the users will see the same information on every link shared on Facebook, leading to a more consistent image for the site. But for a blog it’s difficult, if not impossible, to maintain a description and specify an image on a per-post basis, because it would involve a lot of manual work in the template code. Personally, I removed the ‘description’ property, because it’s optional anyway. The automatic snippet is more informative to someone discovering the link on Facebook than the title with a standard description. 
A few days ago, I read an article on ReadWriteWeb about the Open Graph Protocol and how even the launch partners didn’t implement the markup correctly. It’s probably not that surprising considering it doesn’t offer an immediate benefit for the the required effort.
Add a ‘Like’ button
This topic has been already covered by other blogs, including how to customize the original code from Facebook to point the ‘like’ at individual articles instead of a fixed URL:
- for the iframe variant, this code generates a button with a like count similar to the TweetMeme button for Twitter retweets:
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=50&action=like&font=trebuchet&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:50px; height:40px;'/>
- and the more flexible, XFBML version:
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='trebuchet ms' layout='button_count' show_faces='false' width='50'/>
The second choice can generate more audience for the ‘liked’ link, because the user gets the option to post it to his wall for all his friends (or ‘Everyone’) to see, while the first only shows up on the profile as an ‘one line story’. On the other hand, using XFBML requires another script on your blog that can slow it down. I tested this version for a while, but I switched to iframe now, because it loads much faster. According to the recommendations in the documentation, the Facebook should be loaded after all other elements on the page, making the ‘Like’ button the last to appear.
Measure the interaction on Facebook
After implementing social plugins on a site, it’s only natural to want a way to track how users are interacting with your content. Facebook offers Insights for this purpose. It’s similarly easy to setup, by adding another meta tag to the site to verify you are the owner, like you do with other webmaster suites. The “Insights” page will even generate the code when you click on the green button labeled “Insights for your Domain”.
But there’s a catch! After you link your Facebook profile with a site with this method, the next time you ‘like’ one of your own articles Facebook will set up a page for your blog! It gets even more interesting if the ‘like’ buttons are customized for each separate article, with the code presented above, because liking several articles will generate another Facebook page for each of them. This is meant as a security feature to prevent people from claiming sites they do not own, but it doesn’t work well together with the new ‘like’ button.
I didn’t really intend to create a Facebook page for my blog, but now I have one, after testing these social plugins, not to mention the couple I accidentally created and deleted later. I was a little disappointed to see it doesn’t pick up new articles from the blog, that must me configured separately. Facebook doesn’t have very good tools to import a blog feed, there is only the Notes feature. I currently use RSS Graffiti to update the page instantly when I publish something new, but there are other third-party options available, like TwitterFeed or NetworkedBlogs.
Update: As mentioned in the comments, you should have different markup for blog posts and generic pages and I wrote a new article to explain how to do that in Blogger.
2 comments:
For the og:type, you should be using "article", not "blog".
More info on the types here: http://developers.facebook.com/docs/opengraph#types
Hi, Otto!
I saw this new option, but I'm not sure how easy it would be to implement this in the Blogger template. Normally only blog posts should have type 'article', and the home page 'blog'.
I will look into in though.
Post a Comment