How to add the Facebook 'like' button
Entry updated Aug. 11, 2010 at 12:57 p.m.
UPDATE: This entry left out a critical piece of markup to get the Like button working in Internet Explorer. Just change your HTML tag the following:
<html lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
The Facebook "Like" is fast becoming a generic term though not quite to the extent of Google.
And despite the naysayers -- what does it really mean to "like" something -- adding the ability to like things to your site will help get your content into the Stream.
The launch of social plugins at this year's f8 event made it easy to add this button. But like most things, there's the easy way and the right way.
The Facebook "Like" button on one of my blog entries.
Why you should add the like button
Before you add the Facebook like button to your site you should first consider why you need it. There's nothing worse than reading a pitch from a company to "like/fan/recommend" us without a compelling reason. Will your audience want to share your content?
The like button works great for news stories, product pages and blog entries. Hopefully, the visitor to that content will enjoy the message and want to share it with their Stream so that others will enjoy it as well.
I don't believe the like button works as well for an entire site. Here it begins to get too pitch-like; I don't want to be a spokesperson for your brand unless I'm being paid. (Though I might if you make a bad-ass product like craft-beer.)
Options for the like button
Facebook provides two primary options for the like button: an iFrame and XFBML tag. You should opt for the latter to get the most out of the button.
The iFrame is a simple cut-and-paste job using code generated from Facebook's widget. Just fill out the fields for the URL, layout, width, verb (like/recommend), font and color scheme and you're on your way. You can't have the iFrame option match the URL of the page you're on, such as for a news story, unless you hack the frame URL.
Adding the XFBML like button
As I mentioned, the better option here is the XFBML tag, which is also generated via the Facebook widget. Here's the XFBML tag I'm using on this website:
<fb:like show_faces="false" width="553" font="lucida grande" autologoutlink="true"></fb:like>
You'll also need to add the Facebook JavaScript SDK to use this option. Just copy and paste the following into your object template, such as a blog entry, just before the closing BODY HTML tag:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID GOES HERE', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Note that you'll need to create a Facebook app and add it's ID where mentioned.
Next, you'll need to add the Facebook Open Graph meta tags to your site. This will provide extra data to Facebook about your content when a user aggregates it via the like button. For example, the meta tag for an image used on a news story will display a thumbnail on the like object in the Facebook Stream.
I used the following meta tags for individual blog entries on this website (taken from a recent review of some new panniers I purchased):
<meta property="og:title" content="Review: Ortlieb Back-Roller Classic panniers"/>
<meta property="og:site_name" content="patrickbeeson.com"/>
<meta property="og:image" content="http://media.patrickbeeson.com/images/photos/ortlieb_panniers.jpg"/>
<meta property="og:type" content="article" />
<meta property="og:url" content="http://patrickbeeson.com/blog/2010/apr/25/review-ortlieb-back-roller-classic-panniers/"/>
<meta property="og:description" content="My review of the Ortlieb Back Roller Classic panniers."/>
<meta property="fb:admins" content="YOUR FACEBOOK USER ID"/>
<meta property="fb:app_id" content="YOUR APP ID" />
Note: As mentioned, you'll need to add both your Facebook user ID and app ID where applicable. You can find your Facebook user ID by viewing the Open Graph. For example, my Open Graph entry is http://graph.facebook.com/patrickbeeson.
The fb:admins tag will allow you to administer pages users have liked. You can also publish stream updates to these users.
The fb:app_id tag goes a step further and allows you to publish stream updates to users that have liked your content programmatically.
These meta tags will go before your closing HEADER HTML tag with other meta tags you might be using.
There are many more meta tag options that what I'm using. Many of these are valuable for product pages for example.
Where to put the like button
Now that you've put into place all of the pieces needed for the Facebook like button, you'll need to make a decision where the button should go. I recommend adding the button at the end of whatever content is contained on the page in question.
This is because the user will likely make a decision about whether or not to like the content after they've read or viewed it. As such, I've added the like button at the end of each blog entry on this website.
Users that like your content will also be able to post a comment about that content that will show up with the stream object on Facebook. While this is a conflict if your website accepts comments, such as on this blog, it encourages users to further market your content to their friends beyond a simple link share.
Once you've added the like button to your site, make sure you setup your domain in the Facebook Insights tool. This will provide analytical information about users engaging with your content.
Have you added the Facebook like button to your website? Was it an easy experience? Are your visitors using it? Post your thoughts in the comments.
One comment
Thanks for the detailed instructions. While this button is added to our corporate sites, I haven't added this to my personal blog as yet so this guide will come in handy!
Comments no longer accepted for this entry.
To prevent spam, comments are no longer allowed after 60 days.