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.