How To Capture And Track Clicks On The Facebook “Like” Button

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

Be Sociable, Share!
garv
November 27th, 2010 at 4:49 pm

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

Gaur
November 27th, 2010 at 8:16 pm

Hi Admin,
please tell me why my like button is not working with internet explorer with your code, it works with firefox :(

Therese
December 22nd, 2010 at 1:38 pm

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”?

tiv
December 28th, 2010 at 3:44 am

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.

admin
December 28th, 2010 at 9:42 am

@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.

December 28th, 2010 at 10:30 am

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

NOHA
December 29th, 2010 at 4:31 pm

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 :(.

msi
December 30th, 2010 at 5:40 am

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?

January 5th, 2011 at 5:41 pm

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?

Hila
January 15th, 2011 at 12:10 am

I don’t understand where can I see the tracking of the clicks, and how to set it up?
Thanks

Heath
January 20th, 2011 at 10:40 pm

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

January 27th, 2011 at 9:02 pm

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.

February 3rd, 2011 at 6:42 am

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???

Adaptoid
February 3rd, 2011 at 7:28 am

Unlike event has now been added, see edge.remove

http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe

Instructor
February 12th, 2011 at 3:17 pm

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?

Peter
February 16th, 2011 at 11:29 am

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?

Bridget
February 22nd, 2011 at 10:42 pm

Great code!! I was getting so frustrated!

Do you have that prototype class written in jQuery?

February 28th, 2011 at 4:37 am

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..

March 14th, 2011 at 2:36 am

“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”

March 14th, 2011 at 2:42 am

when you say:

add Facebook’s namespace to your html element

does that mean to stick it inside the head???

Knight
March 23rd, 2011 at 10:15 pm

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.

March 24th, 2011 at 6:35 pm

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

April 4th, 2011 at 2:29 am

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?

tirabc
April 5th, 2011 at 3:10 pm

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

Jeret
April 14th, 2011 at 5:05 pm

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.

April 22nd, 2011 at 1:15 am

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

admin
April 22nd, 2011 at 6:53 am

@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

admin
April 22nd, 2011 at 6:57 am

@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.

admin
April 22nd, 2011 at 6:59 am

@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.

admin
April 22nd, 2011 at 7:01 am

@christian Yes, because it’s a required parameter in the call to “FB.init({appId:”

admin
April 22nd, 2011 at 7:02 am

@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. :)

admin
April 22nd, 2011 at 7:03 am

@Knight Sorry, I’m not working at Facebook – I don’t know that ;)

May 5th, 2011 at 12:12 pm

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

May 10th, 2011 at 6:54 pm

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?

May 11th, 2011 at 7:16 pm

FB.Event.subscribe(‘edge.create’ no longer works as of today…

Some Guy
May 12th, 2011 at 5:26 pm

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.

admin
May 12th, 2011 at 7:48 pm

@yann, @ Some Guy: It works perfectly, just see here for a working example: http://www.saschakimmel.com/fblike.html

admin
May 12th, 2011 at 7:49 pm

@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.

admin
May 12th, 2011 at 7:51 pm

@rystian: This tutorial is about adding a Like button to a normal website only. Sorry for the confusion.

jack
May 13th, 2011 at 10:54 am

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.

admin
May 13th, 2011 at 1:22 pm

@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

Sandeep
May 13th, 2011 at 6:00 pm

Hi,

I can’t find the facebook.js file. Please reply.

Thanks,
Sandeep

giannis
May 14th, 2011 at 10:40 pm

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

jack
May 16th, 2011 at 9:43 am

now it’s working :) they should have fixed it. thanks again.

May 21st, 2011 at 7:58 am

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

Andy
May 25th, 2011 at 9:35 pm

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

vaishnavi
June 8th, 2011 at 10:29 am

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?

Comments are closed.

Sascha Kimmel - Living The Web Experience Since 1996 by tricosmedia