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

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

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.

83 thoughts on “Multiple Facebook Like buttons on one page

  1. I was using the iframe method on my picture site. It works ok as far as the link but the pictures posted on facebook are random even though I use the meta tags. I tried the XFBML method and that workd as far as one picture constant tied to the admin page I believe but I needed to pass the url like http://plankingaround.com?id=192 as an example. the XFBML method seems to ignore the ? and anything after… so any picture link is my main site ?

    Any Ideas ?

  2. Hey,

    do you need to be a facebook developer to obtain and place the code on your website?

  3. I try to add a tag on your example page with Firebug but the Facebook’ script does not parsed it as I expected.
    So, the only thing missing here in my opinion is that we can load more ‘s asynchronously by calling FB.XFBML.parse(); right after the update.
    Thanks for the post :)

  4. This was really helpful I’ve been looking for a way to add fb like buttons to my blog & this was the only website which was layed out clearly & was easy to follow!
    Thank you.

  5. I have a requirement where in there is a single like button on the page , but the page contents change based on the queryString paramater value.

    for example
    http://www.mysite.com?name=john
    http://www.mysite.com?name=smith

    So the og:image associated with each “like” for the same page is set different .

    The Problem:
    The Like post on the wall shows the same image for all the different likes. Until I go to FB Linter and refresh the page. Which I obvously cannot do once I deploy to production.

    Any Help?

  6. hi,
    when i click one like button, some of like buttons (the under like button) are disabled?
    please can you help me?

  7. Hii … I want to implement the same multi-like FB button feature as a recommendation buttons in MVC based application. I am using buttons in an user controls and then partial loading it. But I am facing a problem.

    My problem is that whenever i try to reload the control partially, the count is not incremented. Can you understand the reason behind this problem and how I can fix it

    I am using iframe method to create button because whenever I try to partially load the control again the buttons got disappeared .

    Please help me if you can :)

    thanks & Regards,
    Kaustubh

  8. I want to more like on one photo by using one facebook acount. Please give me suggestion.

  9. Hey, very nice tutorial.

    I Have maked some site with this FB Buttons, but some of products works right, but anothers, when i click on “Like Button” Dont apear the image of product when i Public on my Facebook.. The pages are same… only changing the image and reference of product..

    http://www.calcadosabruzzo.com.br/catalogo.html

    Can you help me?

  10. I’ve done smth for images, multiple like button for images. In PHP.
    First, look how it works: http://intribuna.ro/echipa.php

    The code is like this:
    retrieve the data from the database – name of the team, logo of the team
    $sql = “SELECT id,name, logo”; //your code
    $res = mysql_query($sql);
    while(list($teamid, $teamname, $teamlogo) = mysql_fetch_row($res)) {
    ?>
    <img src="url_to_picture/” class=”img-1″ width=”60″ alt=”">
    <div class="fb-like" layout="button_count" data-href="http://www.intribuna.ro/echipa.php?id=” data-send=”false” data-width=”150″ data-show-faces=”true”>

    <meta property="og:title" content="” />

    <meta property="og:image" content="http://intribuna.ro/images/” />
    <meta property="og:url" content="http://intribuna.ro/echipa.php?id=” />

    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP_ID”;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    FB.Event.subscribe(‘edge.create’,
    function(response) {

    }
    );

    You should put your USER_ID and APP_ID.
    In this way, you can have for each image a like button, and in facebook you’ll have the correct image related to the like action

Comments are closed.