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
[...] Sascha Kimmel has written a very easy to follow step-by-step guide on how to do [...]
Hi,
This is really very nice article but why i don’t get like clicked on Internet Explorer? It work on firefox only for me
please help
Hi Admin,
please tell me why my like button is not working with internet explorer with your code, it works with firefox
Hi, thanks for the article!
Is it possible to start the download of a picture just when the user clicks the “like”-button? -maybe that is just a matter of inserting a download-request below the “Do something” comment?
And is it possible to insert a default comment associated with the “like” so that it will be posted on the users wall (if she doesn’t erase it) – e.g. “I just downloaded a beautiful picture of a beautiful sunset”?
Is there any way to *not* show the comment box when a user hovers after clicking “like”? My like button is in a small iframe (300×250), and when a user hovers the comment box is pretty much obscured because it cant break out of the iframe.
@tiv: It’s impossible because the content of the iFrame gets rendered by Facebook so you cannot influence the layout. You can only make the iFrame larger.
hi,
We have done adding the button and capture total no. of likes but is there any way you can capture who all liked it, with their ID
hi, i need to do that same thing but for the like button in a fan page; That is i want to trigger when someone clicks the already existing like button so that i can move him to a next step where he has to suggest the page to his friends before being able to see my content.
.
Any idea how can i do this?
I found lots of code pieces but in javascript and i dont know if i can use this java script within the fanpage fbml.. i actually tried them but didnt work, dont know if it didnt work coz its not doable or coz m doing smthg wrong
Thank you for the lovely code. I am running into a problem that I cannot seem to fix. In the do something part of this code I call another function that tracks the like. All fine and dandy, but every time I click like it does the action multiple times
I have multiple like buttons on the same page and each url that I am sending is unique…. thoughts?
Thanks a lot! I was wondering is there is a way to send the alert to Google Analytics. Do you have any code snippet to suggest?
I don’t understand where can I see the tracking of the clicks, and how to set it up?
Thanks
Hi Sascha,
Now that Facebook has removed apps (or from what I can gather, they have), how do we go about getting an app id? As much as I’d like to be familiar with the Javascript SDK and how it works, I’ve always just used iframes. Any help would be appreciated! (I tried the link in the documentation, but it appears to be broken)
- Heath
Hey Sascha,
Would you by any chance know of a way to get their facebook uid upon clicking the Like button? Basically, once a FB user clicks on a Like button, i’d like to know what their uid is.
If you visit my site. You can see the basic LIKE button under each post. But how do I add the XFBML version in blogger???
Unlike event has now been added, see edge.remove
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe
So the new facebook page update does not show who “likes” my page only a number of likes…when I click on it they pull up, but I like the old page where it showed their profile pics…can I change this?
Sasha,correct me if i’m wrong. It’s not possible to track wether a person allready likes your page/app. So if this person allready likes your page, he first has to dislike, then immediatly (re)like in order to execute the like-javascript?
Great code!! I was getting so frustrated!
Do you have that prototype class written in jQuery?
i added the code..but when some one like my blog..i didn’t get notification.
can you help me with the code?
thank you..
“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”.”
There is no such field (Connect URL) on the “next page”
when you say:
add Facebook’s namespace to your html element
does that mean to stick it inside the head???
Hi, thanks for the great article this info allows me to trigger some tracking code when a user clicks like on a button of mine.
The thing I don’t understand is what role the APP ID has, since in the end the user doesn’t “Like” that but the page where the like is OR the link I put in “<fb:like href=”URL”…”; so what role does it have ? Only to have access to some facebook tools ? I noticed you underlined that “Just make sure that the URL contains a slash at the end.”, what’s the importance ? I’m trying to understand what role the APP actually plays in this since I haven’t been able to grasp that yet.
Thanks a lot for this great work Tim. I still feel uncertain about the outcome of how I implemented your suggestions. When I click the like button on my wordpress site it seems to work allright, a picture gets added and if I leave a comment it will be added on my own wall.
What will happen to those that are not my friend, will I also see their picture on my WP site, will some sort of sign show up on my face book page? I realy would like to know the names of the persons using my like button
Thanks Robert Glotzbach
[...] This example is for Facebook “likes” but I think you can do the same for comments: http://www.saschakimmel.com/2010/05/how-to-capture-clicks-on-the-facebook-like-button/ [...]
[...] This example is for Facebook “likes” but I think you can do the same for comments:http://www.saschakimmel.com/2010/05/how-to-capture-clicks-on-the-facebook-like-button/ [...]
Hello! Am I correct in saying that you no longer need a Facebook app id to use the XFBML version of the like button? The Facebook website widget now creates your choice of either XFBML or iframe code, and nowhere does it ask for an app id. I have added a like button to my page using the XFBML code, and it seems to be working OK (unfortunately I haven’t been able to test it with a proper Facebook account yet). However, do I need an app id to use the FB.Event.subscribe function?
Hi, thanks a lot for your article !
I wonder if i could change the textarea content of the status before fire the submit button. But what is the first event ? the submit button’s onClick event or the form’s onSubmit event ?
Thank you
This worked perfectly! I sincerely appreciate it. I do have one quesiton: if you’re using an iframe (and referneceing the likebox.php code), how do you register the click event for the Like button within that page since it’s referencing a different domain?
Thanks again.
thanks for sharing! Excellent guide!
I have a problem, i want to send the url to a new file ajax.php, that will do a query. I found this code, but the ajax.php doesn’t receive anything (or like it seems)
FB.Event.subscribe(‘edge.create’, function(href, widget) {
$.ajax({
type: “POST”,
url: “ajax.php”,
data: {‘url’ : href},
});
});
Do you know another method?
Thanks
@Roberto $.ajax is a function provided by jQuery so to use it you have to include jQuery on your site. As I’m a prototype.js guy I’m afraif I can’t help you with jQuery though.
See here: http://api.jquery.com/jQuery.ajax
@Jeret I don’t understand your setup, sorry. You can only catch the Facebook event if the Facebook button and the code are embedded on the same page.
@tirabc You can’t. The browser security model won’t allow you to do this. And you cannot change the status message posted to Facebook via a script because of that. I guess they’d call it SPAMbook if this were possible
You don’t catch the submit button’s onClick or onSubmit event. You’re just listening to a custom event fired by Facebook – andthis gets fired when the user clicks on the like button.
@christian Yes, because it’s a required parameter in the call to “FB.init({appId:”
@Robert That’s what we all would like to know
The only way to get this information to create a Facebook app or have the users connect their Facebook account with your website. You know that “Facebook Connect” button thingy. 
@Knight Sorry, I’m not working at Facebook – I don’t know that
Hello Admin, it’s really nice tutorial, but is it working for “like” button in fan page, not application page? since the script requires Appid on the first place, and I can’t find out what’s my fan page app id
If I implement this code on my site, what would I put in the “alert” so that when a user clicks a Like button on my Blog, it fires an email to adam@example.com to notify me?
FB.Event.subscribe(‘edge.create’ no longer works as of today…
Just take a look inside the supposedly innocent facebook.js.
This guy is a scammer, he’s trying to link build for his SEO.
This technique doesn’t work in any case.
Move on, nothing to see here.
@yann, @ Some Guy: It works perfectly, just see here for a working example: http://www.saschakimmel.com/fblike.html
@adam: You need to send an AJAX request to the server and send an email from the server, e.g. with PHP. You can’t send e-mail from the client side.
@rystian: This tutorial is about adding a Like button to a normal website only. Sorry for the confusion.
hi, edge.create event doesn’t work since 10 may. and your example (http://www.saschakimmel.com/fblike.html) is not working either. do you have any idea or different way to fire edge.create event? Thanks for help.
@jack Sorry, looks like Facebook has once again a problem with the Like buttons, please see this post and the bugs:
http://forum.developers.facebook.net/viewtopic.php?pid=342899#p342899
Hi,
I can’t find the facebook.js file. Please reply.
Thanks,
Sandeep
good evening.
i want to ask if u know a way to do this:
when the user clicks on like button a hidden text/image/video/etc will will appear.
thank you very much
now it’s working
they should have fixed it. thanks again.
Hi,
I need some help on facebook iframe. I need to extract the like number from the facebook iframe.
Is there any way with which I could get this number?
I have 10 groups and need to see which group has the most friends and order them by the friends number.
Thank you.
Chris
Thanks for the great Tutorial.
I’m having problems downloading your JS file. I get file not found
http://www.saschakimmel.com/dl/facebook.js
The above code not working for a like button within an iframe, is there any way we can have a callback for like button within an iframe?