Multiple Facebook Like buttons on one page
Today I played around with the new exiting Like button plugin. Got it working very easily by following a good tutorial on how to add XFBML Like button to a webpage.
Check out the demo! View a demo page in this blog with 20 posts and 20 like buttons
That’s great, but I needed to add multiple Like buttons to one page and every button had to be about a different object (product in my case). I had many ideas, ranging from dynamically changing the meta tags in DOM to using container iframes. Finally got it working with iframes. Meaning I used an iframe of my own, which encapsulated the XFBML code for a Like button. (Later I found even simpler method with no iframes, check the UPDATE)
Here’s the result on a shopping comparison site in Estonia. The feature is still experimental, hence the special ‘multilike’ parameter in the url. The iframes are added when page scrolling event occurs. Some sort of deferring is necessary, because loading of the buttons is very slow! Slowness is the main reason I haven’t published the feature yet.
UPDATE: (a faster non iframe method)
Update (26.09.2010) View a demo page in this blog with 20 posts and 20 like buttons
Update (19.05.2010): Russ asked in the comments, which method should be preferred? I’d recommend to use the method in this paragraph. The iframe method is slower, uses more resources and is a bit more complicated.
There’s a simpler way. Add the XFBML code to every object on the page with unique href parameter per one fb:like. That url must contain the opengraph meta tags. Scroll down to see what tags are necessary. Also add the javascript which initialized Like buttons. Look below next paragraph.
<div class="product"> <fb:like href="YOUR_URL_WHICH_HAS_META_TAGS" layout="button_count" show_faces="false" width="240" height="40" action="like" colorscheme="light"></fb:like> </div> <div class="product"> <fb:like href="ANOTHER_URL_WHICH_HAS_META_TAGS" layout="button_count" show_faces="false" width="240" height="40" action="like" colorscheme="light"></fb:like> </div>
The product list page itself does not have any opengraph meta tags. All the info is pulled from those url’s you provided in fb:like href parameter. This approach can be seen here. Which meta tags to add to the product page? Scroll down to see them.
The iframe method (slower, not recommended):
First create content of your iframe. For example:
<!DOCTYPE HTML>
<html xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta property="og:url" content="URL_OF_THE_RESOURCE_PEOPLE_LIKE_(PRODUCT_PAGE_ETC)"/>
</head>
<body>
<fb:like layout="button_count" show_faces="false" width="240" height="40"
action="like" colorscheme="light"></fb:like>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APP_ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
In the product list I added to every product the following html:
<iframe scrolling="no" frameborder="0" allowTransparency="true" src="URL_OF_THE_IFRAME_RESOURCE"></iframe>
What of the special meta tags?
These should be added to the Likeable resource. The same url that was added inside the iframe meta og:url property, must contain those meta tags. Facebook will download those meta tags when someone clicks Like.
For example on this product’s page I added the following:
<meta property="og:title" content="TITLE"/> <meta property="og:url" content="http://sopso.com/otsi/u-Z5Upj2sej"/> <meta property="og:image" content="ABSOLUTE_IMAGE_URL"/> <meta property="og:description" content="DESCRIPTION"/> <meta property="og:site_name" content="YOUR_SITE'S_NAME"/> <meta property="og:type" content="product"/> <meta property="fb:app_id" content="APP_ID"/>
You can also add fb:admins property, but remember you should only have either fb:app_id or fb:admins.
Here’s how the Like buttons looks like when I click on the Like button:
Multiple Like buttons and comment box on Sopso.com
And here’s how the result will look like on your Facebook Wall:
Like Button example post on Facebook Wall
Hopefully this will give you some ideas on how to utilize the Like button. Let me know what you think by leaving your thoughts in the comment box below. And of course you can click Like and share this post.