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!
June 15th, 2011 at 7:26 pm

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?

June 23rd, 2011 at 6:46 pm

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.

Dian
June 25th, 2011 at 12:27 pm

Hi there ,

This is a great article, but the link to facebook.js seems to be dead. Please repost.

shani
August 2nd, 2011 at 10:25 pm

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

admin
August 3rd, 2011 at 5:44 am

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

Ralf
August 3rd, 2011 at 2:19 pm

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/

August 25th, 2011 at 5:43 pm

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

admin
August 25th, 2011 at 5:57 pm

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

jason
August 27th, 2011 at 6:18 pm

hi sascha,

i have completed based on your steps and it is working fine now
Just wondering if i can make it different like ? hmmm something like i will put the like button in self created table with multiple rows columns… when i click like from row 1, i will put alert this is row 1.
but the like button from row 2 is still by default no like status.. so i will need to click one more time on like button on row 2.. and alert will prompt this is row 2….

so the like button will be for different on each row…. possible if we can do it that way ?

thank you….

Fabio
August 28th, 2011 at 5:37 am

hey, if I have already inserted the like button in the site, but have NOT created an application via fb, IF i do add the app, will it reset the likes? or will it just give me control of them to see who they are etc????

much appreciated

Michael D
October 9th, 2011 at 8:12 am

How about a way to pre subscribe to the like event, so in the case the user already like the object then redirect them to another page?

Smitha
October 13th, 2011 at 7:28 am

Hi, What is a Prototype.js JavaScript Framework. can the download the facebook.js anywhere or should it be in the app_code folder.
I am getting an error: Error 4 Variable ‘System’ has not been declared C:\Users\smitha\AppData\Local\Temp\Temporary ASP.NET Files\tasksmitha\cc27c396\3fdb075c\App_Code.v80jmzvb.1.js

Neha
November 12th, 2011 at 1:10 pm

Hi,
actually I tried implementing it.I am able to like the website when I am logged in from before in face book.But if I am not logged in then I am getting a pop up window for logging in but after entering the username and password I am getting an error “An error occurred with Facebook Platform Opt In. Please try again later.” & then I am not able to log in.Please tell me what I need to do in order to remove this error.

Thanks

josfreluvfm
January 27th, 2012 at 3:17 pm

hi

i need to create a like box for my page but i dont know how to go about it?

Marcos Senatori
March 1st, 2012 at 5:35 pm

Hi, thanks for u example!.. is excellent.

One thing, for dislikes exist edge.remove. it works!

Gracias por todo, perdon por mi ingles es muy malo!… Me sirvio mucho el tutorial saludos.

man
March 6th, 2012 at 2:55 pm

Thanks for this!! And btw it seems Facebook now allows tracking of “ulikes”. Use: edge.remove – fired when the user unlikes something (fb:like).

Pham Hoang
April 20th, 2012 at 8:28 am

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?

July 20th, 2012 at 6:20 am

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.

shafiq
September 27th, 2012 at 5:05 pm

I have multiple like button on same page.. i want to capture each event of like button.Is this possible. If so how?

Moses
December 1st, 2012 at 6:44 am

Hi,

Just like “Capture the like”, is it possible to capture the “Share” button..?

Regards
Moses

ansu
June 19th, 2013 at 3:45 pm

we can capture if the user unlikes the site by clicking on the “Like” button again.

FB.Event.subscribe(‘edge.remove’, function(href, widget) {
alert(‘You just unliked ‘+href);
});

Jagdish
January 7th, 2014 at 12:31 am

Your example page would not alert if User is not logged in to facebook. To test it out, logged out from facebook and then come back to following page and click on like button. The click should open login prompt as you logged out from facebook. Enter your username and password. You would see like button work but no alert. Any solution for that?

http://www.saschakimmel.com/fblike.html

Regards,
Jagdish

Comments are closed.

Sascha Kimmel - Living The Web Experience Since 1996 by tricosmedia