The Facebook “Like” button is being added to more and more websites. If you also want to add the “Like” button to your website there are two possible options available. You can either use an iframe directly and generate the code on the Facebook website or use Facebook’s own XFBML extensions to HTML.
Because integration of the iframe solution is really straightforward – you can create your iframe code on the Facebook website – this article will only focus on integrating the XFBML solution which although being a bit more complex has the following advantages:
- allows the user to add a comment as well
- allows you to track the click on the like button
Obtaining A Facebook Application Id
First of all have done this you have to obtain an application id (“app id”) from Facebook just as if you were to create a full Facebook app. Go to this site, enter a name for your “application”, e.g. your website domain name, agree to the terms and click on the “Create” button.
On the following page just enter the URL for your website pointing to your homepage, e.g. “http://www.saschakimmel.com/” in the field “COnnect URL”. Just make sure that the URL contains a slash at the end.
After you’ve clicked on the “Save Changes” button Facebook will show you an application id, your secret key and some more information. For the purpose of this article you only need the application id.
Adding The Core Code With Standard JavaScript
After you have obtained the application id you first of all have to add Facebook’s namespace to your html element on the website you wish to add the “Like” button to:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
After this you have to add this code to the page on your website where you wish to add the “Like” button to. Add this add the very end of your HTML code right before the closing “</body>” tag:
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_FACEBOOK_APP_ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
// Do something, e.g. track the click on the "Like" button here
alert('You just liked '+href);
});
};
(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>
As you can see I have highlighted three parts in red. The first one, “YOUR_FACEBOOK_APP_ID” has to be replaced with the Facebook Application Id you have generated before.
The line beginning with “alert” is where you can add your custom tracking code or whatever action you wish to happen when a user likes your website.
The text “en_US” means “English/US” and defines the locale setting. If you’ve got a German website you would use “de_DE” here etc.
So that’s basically all you have to do to support the button element with standard JavaScript.
Adding The Core Code With Prototype.Js
As you might know I’m using the Prototype.js JavaScript Framework whenever possible so I’ve created a small JavaScript class you can use if you’re using prototype.js on your website.
Just download this file and save it as facebook.js. You can then use this code on your website – just add it to the bottom of your page as well:
<script type="text/javascript" src="facebook.js"></script>
<script type="text/javascript">
<!--
Event.observe(window, 'load', function() {
new facebookLikeButtonClass('YOUR_FACEBOOK_APP_ID', 'en_US', function(href, widgetObject) {
// Do something, e.g. track the click on the "Like" button here
alert('You just liked '+href);
});
});
//-->
</script>
Adding The Button
Now that you’ve setup the core code you can just add the “Like” button wherever you want on your page by adding this code to the page where you want the button to appear:
<fb:like></fb:like>
Now that’s all!
You can set all of the attributes for the “Like” button on the tag as well just like you would set them on the Facebook page for the iframe code.
<fb:like href="URL" layout="standard|button_count" show-faces="true|false" width="450" action="like|recommend" colorscheme="light|dark" font="arial|lucida grande|segoe ui|tahoma|trebuchet ms|verdana"></fb:like>
You can just set the values accordingly. Just make sure you’re really closing the tag with the “</fb:like>”, this separate closing tag must be used and you cannot shorten the tag as you would usually do with the “/>” at the end.
Capturing “Dislikes”
You can’t capture if the user unlikes the site by clicking on the “Like” button again. The Facebook JavaScript API just doesn’t provide any event for this.
Click here for a working example
Tags: Facebook, fbml, javascript, Prototype.js, social, xfbml
Thanks for a great article! The iframe version allows me to specify the page I want Liked, as opposed to the current page the visitor user is on. (e.g iframe src=”http://www. facebook . com/plugins/like.php?href=www. facebook . com/MYPAGE)
Is there any way to specify the page to like using your approach and still track Likes?
This technique works also inside a Tab (facebook app). However facebook is on the process of deprecating FBML. In this tutorial you show how to capture the “likes” from a fb:like button (FBML). I tried to use the recommended (by facebook) way tro create the like button (iframe) as you see here: http://developers.facebook.com/docs/reference/plugins/like/
By using the facebook way + edge.create as explained in this tutorial, the like click is not captured. Do you know why or what to do to make it work? Thanks.
Hi there ,
This is a great article, but the link to facebook.js seems to be dead. Please repost.
hi i want to like facebook but not on click when a user comes to my website it automatically likes. sir can you help me regarding this?
please send me mail
advance thanx
@shani: Because this is not a very ethical (and probably not even legal) method I’m not going to help you with that, sorry. Anyway, thanks for taking the time to read this post and add your comment.
Hi is there a way to make this work true e-mail? to capture the likes?
Mail chimp works that way but i cant find anywhere info how to make this work true e-mail
http://mashable.com/2010/07/09/mailchimp-facebook-like/
http://emailexpert.org/adding-a-facebook-like-button-to-your-email-template/
hi great tuto, and works great,
would like ask you if is a possibility to check wen a user have click on like btn, and went he come back on the web site , to memorize this for the next visit on the site, because i have a text who said “thank you” went it click, and went the user comme back he the text is like before the click.
see on http://www.socialike.eu
sorry my english is very bad.
tanks
@pierre: You just have to set a cookie which you can either do on the server – if you send an AJAX request when the user clicks on the “Like” button – or via JavaScript. Then you can read that cookie – either via JavaScript or again on the server.
Hello Kimmel,
I did use the your code before it worked for me, but now, it is not okie.
Look likes FB.Event.subscribe(“edge.create”) method doesn’t work anymore.
this is my full code:
window.fbAsyncInit = function () {
FB.init({ appId: ’188319724546440′, status: true, cookie: true, xfbml: true });
FB.Event.subscribe(“edge.create”, function (targetUrl) {
alert(‘liked’);
});
FB.Event.subscribe(“edge.remove”, function (targetUrl) {
alert(‘unliked’);
});
};
(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);
} ());
I see I liked this page on my profile Facebook, but I didn’t see alert(‘liked’);
I don’t know what things wrong. I wish it could as well as I did before. Could you please help me?
Your code is working.
and i was add some additional code like this:
FB.Event.subscribe(”edge.remove”, function (targetUrl) {
alert(‘You just UNliked ‘+href);
});
this code is capture ullike event.
note: im try on my page and not on iframe apps or page tab.
Mckinley…
How To Capture And Track Clicks On The Facebook Like Button « Sascha Kimmel – Living The Web Experience Since 1996…