How to execute JavaScript when the Facebook Like button is clicked

How to execute JavaScript when the Facebook Like button is clicked

The following guide describes the steps that need to be followed in order to trigger javascript code successfully when the Facebook like button is clicked. To accomplish this, you must use the Facebook JavaScript SDK and XFBML to deploy the Like button on your site.
There are two options for the Like button plugin code: iframe and XFBML, both available on the Developer Site on Facebook. Although the iframe code may be faster to implement, it is best to choose the XFBML code. The XFBML code generates an iframe, but the benefit of using XFBML is that it exposes event triggers that allow you to track clicks using measurement and analysis solutions.

Using the following implementation you can also track all the clicks on the like button of your site by triggering the Google analytics tracking code.

UPDATE : An updated and faster implementation has been added here

Implementation steps

1) Reference the Facebook SDK
The Facebook JavaScript SDK provides a rich set of client-side functionality for accessing Facebook’s server-side API calls. It is also required in order to parse XFBML on your website. You will need an “app id” to initialize the SDK, which you can obtain from http://developers.facebook.com/apps .
You load the SDK using the standard <script> element by calling FB.init. You must specify a <div> element named fb-rootwithin the document as well. Below is an example of initializing the SDK with all the common options turned on:

<div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId  : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true, // parse XFBML
channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth  : true // enable OAuth 2.0
});
</script>
</div>

2) Create the “channel.html” file
You will have to create a new file named “chanel.html”. This path of this file will have to be setup in the source code of step 1, instead of “‘http://WWW.MYDOMAIN.COM/channel.html”.
The contents of the channel.html file should be this single line:

<script src="http://connect.facebook.net/en_US/all.js"></script>

3) Create the source snippet that is triggered when the like button is clicked
Using the Facebook SDK, the main function you will need to integrate with Adobe SiteCatalyst is FB.Event.subscribe(). This function allows you to subscribe to Facebook’s global events. This is a callback function that tells Facebook when X occurs, do Y. The callback function should be placed just before the XFBML source code of the Like button.
Below is a sample of a Like event callback function for the German ODW product page:

<script>
   FB.Event.subscribe('edge.create', function(href, widget) {
alert("Like button clicked");
   });
</script>

4) Like button source code
To get started, you can use the FB like button configurator (http://developers.facebook.com/docs/reference/plugins/like/) to get the source code.
A sample Facebook like source code, for http://www.techjam.gr  is the following:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID&amp;xfbml=1"></script><fb:like href="http://www.techjam.gr" send="false" width="450" show_faces="true" action="like" font=""></fb:like>

Below is a list of all the available attributes and the values they can be populated with:

  • href - the URL to like. The XFBML version defaults to the current page.
  • send - specifies whether to include a Send button with the Like button. This only works with the XFBML version.
  • layout - there are three options.
    • standard - displays social text to the right of the button and friends’ profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
    • button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
    • box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
  • show_faces - specifies whether to display profile photos below the button (standard layout only)
  • width - the width of the Like button.
  • action - the verb to display on the button. Options: ‘like’, ‘recommend’
  • font - the font to display in the button. Options: ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, ‘verdana’
  • colorscheme - the color scheme for the like button. Options: ‘light’, ‘dark’
  • ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
    • fb_ref – the ref parameter
    • fb_source - the stream type (‘home’, ‘profile’, ‘search’, ‘other’) in which the click occurred and the story type (‘oneline’ or ‘multiline’), concatenated with an underscore.

Panagiotis Tzamtzis is the founder of TechJam. You can reach him on Twitter, LinkedIn, Facebook, Google+

11 Comments

  • Luke - 06/12/2011

    Thanks a lot! Works awesome here!

    Reply
  • danny - 24/04/2012

    How would you modify this in order to reveal some hidden html such as a promotional code, etc. ? I’d like to put a facebook like button in my checkout page that when clicked will reveal a promotional code. :) thanks

    Reply
  • TechJam - 25/04/2012

    Hi Danny,
    It should be fairly easy to achieve the result you are looking for with a little bit of JQuery. You can put you promotional code inside a div and set the div’s default css visibility value to hidden.
    Then execute the following JQuery command when the Facebook button is clicked, to change the css visibility value of the promotional code div:
    $(“.promotionalCodeDiv”).css(“visibility”, “visible”);
    where “promotionalCodeDiv” is the class name of your promotional code div

    I did not try to implement the steps above, but I really think it will work. Let me know if you encounter any difficulties.

    Reply
  • staib - 26/09/2012

    very helpful. thank you!

    Reply
  • MuragHamis - 08/05/2013

    Hi Admin,

    I’d try your code but it won’t work. I tried it in my localhost. this is my code

    FB.Event.subscribe(‘edge.create’, function(href, widget) {
    alert(“Like button clicked”);
    });

    FB.init({
    appId : ‘YOUR APP ID’,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true, // parse XFBML
    channelUrl : ‘http://WWW.MYDOMAIN.COM/channel.html’, // channel.html file
    oauth : true // enable OAuth 2.0
    });

    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=431663766924629″;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    <fb:like href="” send=”false” layout=”button_count” width=”450″ show_faces=”false”>

    And create channel.html file. this is its content:

    I am using wordpress, did I miss something?

    Thanks for the help.

    Reply
    • TechJam - 09/05/2013

      Please follow the steps again and replace the points in the code (like the APPID) with your own values

      Reply
  • Amalgovinus - 23/09/2013

    I wish you bolded and underlined the updated implementation link line. I spent half an hour trying to get this one to work without much luck. :/

    Reply
  • shashank - 16/04/2014

    Did Not worked for me

    Reply
  • Suraj Rathod - 24/05/2014

    Thanks for the post it’s so help full for mine

    Can you please let me know how can i alert on Facebook share button i tried lot’s of thing but it’s not working

    please help me

    Advance thanks

    Reply
  • James Lightfoot - 29/08/2014

    Hi, is it possible to amend this to have a normal button that automatically send the website creator an email with a specific subject line when the button is clicked?

    Thanks,

    James

    Reply

Leave a Reply