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.
Tere Hillar – thanks a lot – this is the best solution I’ve seen! Took a bit of fiddling to get the urls passed but overall, very smooth and clever.
Thanks and I’m glad to hear this was helpful =)
Thanks for the post! but what I don’t get is the Update – so we can totally scrap the iFrame method? any advantages to iFrame method?
I’d say the method provided in the update is definitely superior to the iframe method since it has faster loading times, uses less resources and is easier to deploy. So, yeah, scrapping that iframe method could be entirely justified.
This is great. One thing still not clear.
You indicated that “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”.
I looked at the product list page. In each fb:like tag, I see the individual Url is defined but I don’t see the opengraph meta tags included in the url. For example,
So how to integrate the meta tags in the Url above?
Thank you,
Songbird
i don’t quiet get it. i don’t know how to add meta tags to an url…
could you please show me an example of how you add the og:title and og:image tags to an url?
I am sorry but am too stupid to understand what u did…
could you explain me better by writing from top to bottom what i should put inside my web page??
I basically have a website which lists videos, and for each video I would like to have a like button… everytime i click on the like button, it goes to facebook but using the same phrase (does it get it from the title, or where from?) NAME Like BLOODY SAME TITLE on http://www.example.com …. HELP i am so frustrated
Great post!
Thanks for the info.
Using it on my wordpress blog.
Works like a charm!
What if I dont have a product page?
Does the Like button also work for, say an image?
Thanks for this. I shall be replacing my iframe script to the xfbml version. And the meta tags were good to know, will use it. Tks
Nevermind. I got it.
I am trying to add a fb:like button in a facebook tabbed application but it gives error unknown tag “fb:like”..any idea how to resolve it…also how to use the javascript sdk…
can anyone provide some sample code to include a simple fb:like button in a application..
Can you give an example of the url with the meta tags attached?
is it “&og:title=”title”" ?
that sort of idea?
Great solution! This’s exactly what I was seeking. The implementation of the new fb api and graph api isn’t so clear in fb’s documentation: so, again, thanks a lot!
Damn, I’ve been offline for a while, this post is quite popular. I set up a demo page, I hope there’s less irrelevant html in there and easier to understand the multiple like button setup.
http://hillarsaare.com/projects/facebook/multi-like/
Please view a clearer demo I just created: http://hillarsaare.com/projects/facebook/multi-like/
Sorry for being offline for months :) Anyway I created a clearer demo, if you still need to see how to do this: http://hillarsaare.com/projects/facebook/multi-like/
Hey, I’ve been offline for some time. It wouldn’t work for an image directly, because the opengraph protocol is set up in a way that requires html pages. If you set up a separate page for an image, then it would work.
Hey, I’ve been away for a while. :) Did you find a solution to your problem?
I don’t quire understand what you’re trying to do?
The meta tags are not meant to be added as url parameters, instead they need to be inside head section.
You’re very welcome :)
Btw I set up a cleaner demo page today http://hillarsaare.com/projects/facebook/multi-like/
Would you know how to place multiple likes on a Fan page?
What exactly do you mean? Adding like buttons inside Facebook to Facebook Pages?
It doesnt seem to work with url that have parameter in it, like http://something.com/post.php?postid=1 http://something.com/post.php?postid=2, not sure what I do wrong.
Thank you for an excellent description and method!
Here’s a challenge…
I have a site with approx 1000 products and have tried to implemented the updated non-iframe method on the site, for each product. Works perfectly, except…the images of the results that are displayed on facebook seem to be totally random. I think it must be something with the way facebook handles caching of files/images.
Here’s what I do:
I have one file.html that contains the metaproperties code and that receives the exact metaproperties for a specific product via URL parameters. Each product page has a code which sets the og:title property of the file.html to the productvariable $producttitle and similar for the other og:tags.
Works almost…,og:title, og:url, og:site_name work perfectly and are displayed on facebook according to each product, but the *image* that is displayed on facebook for each product is a random image from the site, even though the og:image tag is correct. It should be the exact product image according to the og:image tag set. Facebook even pick up and display images that have never been og:image tagged (eg. buy, proceed to checkout icons). Really strange.
Have you seen this before?
Any advice highly appreciated.
The product page code of the fb:like is url=http:/…file.htm?fbtitle=$producttitle&fbproducturl=$producturl&fbpicurl=$pictureurl ….etc
Thanks!! The update was great – and it’s just (at least in my case) an overlooked param for the
Hi i have a problem when i click on like button in my application.when i click on like button url that i like is shown in my profile. title that i were pass is not shown in profile.kindly help me.
The fb:like tag also sticks iframes on your page. It’s a tag that is parsed by the javascript you include, which then dynamically injects an iframe on to your page page on the parameters of the tag :) There appears to be no way to get around a bazillion iframes on your page if you have multiple things to like.
Hi there. Question here about the META tags aspect. I have this all working fine, but the issue is what if you NEED the meta tags on the page with all the “like” buttons? Those tags are an important aspect of how FB pulls content if someone shares the url where all the like buttons are. But, the meta tags are throwing off my counts in random ways. Thoughts? http://www.UpcomingEvents.com
Thanks in advance.
Dennis
i hit some issues with facebook when I had two different pages that had a Like button which had an href that pointed to the same page. the page that both like buttons pointed to had the proper og:tags, but facebook kept showing hte wrong link in the feed when two Like buttons have the same href.
Did you ever hit this issue? I’m going to try and make one of the hrefs for one of the like buttons be slightly different by adding a useless URL param, i hope that fixes my issue.
I generated code for an iframe like button. When I install it, in photoshop, it opens up many little face book windows right in very rapid succession.And it says that there have been 152k people liking. This cant be true…please HELP
Thanks, Vernon
Hi Hillar Saare,
First, thanks for your great solution. I’m not clearly about how to add meta tags? I have read source of page http://hillarsaare.com/projects/facebook/multi-like/ which you sent. But I don’t see where you set meta tags (example: “og:title”, “og:url”, …).
Please help me.
Thanks
Hi,
I managed to add one ‘I like’ button per item using the JS method but I dont know how you manage to send a different image per button with different description.
In the same page I have several buttons with the same meta for all of them..
http://v2.muertosdearte.com/categoryFull.php?id_category=10
and also in Facebook is always appearing the root page, I want to send them directly to a different url as I indicate in the href tag.
could you please tell me what I am doing wrong?
I tried the iframe method passing as parameter diferent tags per product
getImageLink($product.link_rewrite, $cover.id_image, ‘large’)}&description={$product.description_short}&site_name=Muertos de Arte&type=product”>
but it doesnt seem to work properly, the page stops loading with some products missing…
Thanks in advance.
Jose
it is me again.
I think i am understanding better how this button is working but still dont achieve my goal.
The fb:like parameter href is with parameters but doesnt seem to work. in facebook only appear the root address.
I guess that is why the notification in FB doesnt show the right name and picture as they are indicate in the meta tags on the page.
could someone take a look to the HTML code and give me some advise?
thanks a lot in advance.
Jose
Will the Div technique also work for share buttons rather then like buttons? Thanks.
Hi, is there any way this can be implemented in a WordPress post?
Damn man, I got the same issue almost everyone is asking you here. I just don’t get it. First you say yuo have to put the og metadata inside de url and then you answer is not meant to be there but in the head section.
I tested both urls you menntion and both workjust great, but I can’t see where the og metadata for each Like button is inserted.
That’s what almost everyone here wanna know, where to put them and in which way so We can understand how each url has its own og metadata referenced
Thanks.
Ohhhh, I think I get it . What you mean is that the metadata is not in the pge list whe’re seeing but in the detail page for that like.
So We just need to build the product list with the likes pointing to an specific url and is in that specific url where We should put the metadata cause facebook will pull the data from there once read the url from the like url.
Is it that right?
may i know the simple code for this ?
a shopping comparison site in Estonia that you created.
you can like multiple pictures one at a time .^^
How do they do this? It’s FB share not FB like but still interesting….
http://newspulse.cnn.com/?hpt=T2
I can’t thank you enough for this… You rock! This is great code / great idea…
hi Hillar, gr8 work !
works very easy and nice way.
Now i got share button and Like on same page. but only Like button works, share disappears. Any work arounds ?
Great post Hillar. We are doing multiple likes on a FB Tab. It works great, except for the Like button appears to ‘un-like’ by itself — [but it really has NOT un-liked at all -- on re-freshing the tab it is LIKED]. It’s really annoying. Hillar, would you take a look if I send you a link?
-Mark
I was searching for this multi like solution for sometime now, and your blog has given a good idea about it. But I have this question, how shall I use it for my website at http://www.whatannoyedmetoday.com? How this website works is that users submit entries for what annoyed them, and I want each entry to be facebook likeable. Do I have to create a separate html file for each entry a user submitted, with a meta tag with the content of the entry, and then refer the url in fb: to this html file?
this is something ive been wondering about myself for a while,should be very helpful…i was trying to use the iframe myself but think the other sounds much better and easier…thanks
There is an even simpler method: using HTML anchor links (#) in your url
url=”http://www.schwen.de/#chargetransfer”
url=”http://www.schwen.de/#randomwalk”
Facebook is smart enough to extract the Text contents of the anchor on the page (in my case the section headings) and posts those to your fb profile when you press like.
No need for dummy pages with metadata.
Hi, there.
Thanks for the great article. I have add the multiple like button on our client’s news section. But for some reason the facebook still not pick up the title and the images I put in the mega tag. Do you know why this happen ? thanks in advance
Trying something similar on my site, but when I like the articles on your demo page, they do not appear in my Facebook feed (even if I comment after liking the post). Am I doing something wrong?
Hi,
I tried to follow all of the guidelines here, and then brute force tested all combinations that came to my mind (adding meta tags everywhere or nowhere, trainling slash or no trailing slash etc). However I didn’t manage to make it work properly. What’s more – it’s behaving completely randomly now :) Could you please have a look and let me know if I missed something important?
Page is: html://moralniak.pl
likes with count >50 are basically refering to general website. Those with count around 1-2 seem to be correct – individual ones. They are generated in exact same way thought hence my great confusion.
Will be very grateful for help.
This is a great article. I got multiple “Like” buttons to work partially. I was wondering if you could help me debug this last piece.
I have used the exact same code base you describe in the article. Except, my url is unique based on numbers. Here is the background. We are displaying events of a calendar for a given month on a page. Each event displayed has a “Like” button. The URL we generate for tag is:
http://myurl.com/bell/store-calendar/19272 or
http://myurl.com/bell/store-calendar/19273 where the last is actually the event ID. When we click the Like button, for some reason the link that gets stored on the Facebook My Links page discards the numbers and only stores http://myurl.com/bell/store-calendar/
So I ran a simple test. I prepended the number with a character like “e”. So each URL for each event would look like
http://myurl.com/bell/store-calendar/e19273
Now facebook stores this URL correctly on My Links, but since this link is invalid it says page not found on My Link.
Any suggestions why Facebook does not recognize pure numbers? How should I tackle this problem. Any insights, thoughts, suggestions would be greatly appreciated.
Thanks
First, thanks for the great demo and the post! Nicely done! I can’t believe this isn’t documented more clearly on fb.
I’m still having issues getting it running on this blog:
http://www.christopherpouget.com/blog
I have everything setup exactly as described, but I’m still getting an error when the button is clicked saying no URL was specified (you can see the error in the Firebug console). Any suggestions? Did I miss something pretty obvious?
Thanks…
I have a website with commenting functionality. Each page has 50 comments. I’d like to have like buttons for each comment.
But this is 50 requests and even I use the XFBML way the script creates ifreames for every like button and therefore the browser says “loading” until each like button is loaded.
Is there any way to overcome this?
Thanks,
Peter
I presume that xmlns:og=”http://opengraphprotocol.org/schema/” which since the date of your article now appears to have been changed to xmlns:og=”http://ogp.me/ns#” is not actually required on the demo page
Came upon a similar problem today and thought I’d help clarify, since some of the comments here seem to have missed the point.
You’re not adding meta tags to the URL, the URL should point to a different page with meta tags already set. So if you have a page with multiple products listed, each with a like button, you point each of these buttons to the URL of the corresponding product’s details page, which should have all the required information in the section.
Can you show a screenshot of what happens when you press on the post on the wall in the facebook(the post that was sent from the website), where does it send you?
Maybe what I am asking is in order to put several like buttons on a pge do you need to make seperate pages in your website for each object that you made a like button for?
Nice article I must say…
But the problem with having multiple facebook like buttons on a page is that each button downloads the resources separately.
Hence the No. of requests made are very high and the resources downloaded are high making the size of the Page very high.
The size of your demo page is around 1 MB .
The same thing I m facing on my clients website..
The home page size is reaching 1.5 MB whereas the content is just text base n just few pics.
Its a quite big issue having the home page of 1.5 MB.
Can u please help me out with this if you have any idea.
Thanks in Advance
what about FB deprecating FBML? will this still work in this case?
Hi, do you have an example of using multiple Facebook Send buttons on the same page? I have similar situation where we will have like 75 items on a page and want to put the Facebook send button next to each one but don’t know now to do it effectively.
Thanks for the nice explanation. For some reason, facebook is grabbing a random image to display in the feed. Anyone else have this problem and know how to fix it?
Hi Hillar,
I came across you very informative post and the last person to comment asked my exact question. I was hoping you could answer it. I’m trying to find out if I can place multiple likes on a Fan page inside Facebook?
Thanks
[...] 02 2011 Adding many +1 buttons on one page is super-easy, compared to adding many Facebook Like buttons on one page. It’s a matter of inserting one script tag in head section and a little bit of special markup [...]
I have to agree that Google done a much better job than FB.
The load time is just unacceptable when you have 20 like buttons on one page.
Has anybody able to figure this out yet?
Loemind!
I am facing an issue while clicking on like button.
http://web2.anzleads.com/prestohats/devlive/search/index/texans%20blue
This is the page where like buttons are coming along with the url
http://web2.anzleads.com/prestohats/devlive/home/productdetails/1
The ID is changed for every like button. It is posting the content on the Facebook. But It is not counting the total like count for any like button. Please suggest me If I am doing a mistake. I have generated the meta tags on the details page as per the product ID. Please let me know about this.
Thanks
Rahul
I have been fiddling with this for several hours and couldn’t get it to work. After banging my head against various hard objects, I finally relaised what I was missing – the link to Facebook Connect script. I inserted
above <fb:like …..
If using a PHP loop, put the link before the loop and then initialize.