capture click of Facebook 'Like' button with jQuery

Question

I am looking on the Facebook Developers Documentation to locate some sample code that would allow me to capture a click event on the "Like" button. It states:

If you are using the XFBML version of the button, you can subscribe to the 'edge.create' event through FB.Event.subscribe.

I am not using XFBML however, this is my code:

<div class="social_net_button facebook_button">
      <div id="fb-root"></div>
      <script>(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";
              fjs.parentNode.insertBefore(js, fjs);

              FB.Event.subscribe('edge.create',
                     function(response) {
                          alert('You liked the URL: ' + response);
                     }
              );

            }(document, 'script', 'facebook-jssdk'));</script>
      <div class="fb-like" data-href="http://www.facebook.com/pages/Ayrshire-Minis/160330240663397" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="recommend"></div>
    </div>

Can a click of the 'Like' button be captured by jQuery?

Quiver

So, why are you not using XFBML? You can find the click event on the iframe(although, I never I tried this) but not on the button in the iframe. So you're dependent on the code Facebook provides. – Pantile

“I am not using XFBML however” – oh but yes, you are ;-) – <div class="fb-like"… is just what FB calls the “HTML5-compliant markup” version of XFBML. – Gastropod

Great to know that CBroe, thanks. I already thought it was odd since both methods include the same JS. – Pantile

@CBroe Regardless of whether the user increments the like counter I would like to track if a user has clicked the Recommend/Like button, but the code below provided by Robin does not work. I have had a look around and you would imagine it is a fairly simple thing to do, not to mention common, but I can't find a solution to this. Is the problem in my implementation? – Quiver

@ReneGeuze I have updated the code with an attempt to capture the like, but for some reason it still cannot access the FB. Where is this being loaded from and where should this code be placed? – Quiver

Answer 1

The solution, it would appear, is sending the request asynchronously. This code below works when placed after my fb-like div class:

     <script>
           window.fbAsyncInit = function() {
                   FB.init({
                                           status: true, // check login status
                                           cookie: true, // enable cookies to allow the server to access the session
                                           xfbml: true  // parse XFBML
                                   });
           };
     </script>
     <script type="text/javascript">
           window.fbAsyncInit = function() {
             FB.Event.subscribe('edge.create',
                     function(response) {
                           _gaq.push(['_trackSocial', 'facebook', 'like', document.location.href]);
                     }
             );
           };
     </script>

Quiver

I'll remove my acceptance of my answer here as this seems to be working intermittently. I am very surprised that Facebook don't document this properly. – Quiver

Answer 2

You could try this.

http://jsfiddle.net/qkyAe/

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

FB.Event.subscribe('edge.create', function(response) {
    console.log('clicked');
});​

I think this one only counts if user clicks AND it increaes the like count (logged in users only) Since I don't have an FB-Account I couldn't try it. Please tell me, if it works :)

Update:

The FB object comes from the script you're already embedding.

Foy

Yes, I had came across that code before, however is there a way to track the click without the like count being increased? It wasn't liking the reference to FB. – Quiver

Since it's in an iFrame, I think you can't. But maybe someone else can prove me wrong. – Foy

The code in your jsFiddle doesn't seem to work. I'm not certain what is wrong with it, n maybe it can't see the FB? – Quiver

Answer 3

This code REALLY works :)

<script type='text/javascript'>//<![CDATA[ 
window.addEvent('load', function() {
window.fbAsyncInit = function() {
    FB.init({
        appId: '42424242424242',
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true
    });
    FB.Event.subscribe('edge.create', function(response) {
        alert('You liked the URL: ' + response);
    });
};
(function(d) {
    var js, id = 'facebook-jssdk';
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));
});//]]>  

</script>


         <div id="fb-root"></div> 
         <div class="box">
             <p>First a Like Box of a facebook page</p>
             <p class="info">edge.create is not called</p>
             <div class="fb-like-box" data-href="http://www.facebook.com/jsfiddle" data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
         </div>
         <div class="box">
             <p>Like Button of a website</p>
             <p class="info">here you can see the edge.create fire</p>
             <div class="fb-like" data-href="http://jsfiddle.net" data-send="false" data-width="150" data-show-faces="true"></div>
         </div>
         <div class="box">
             <p>Like Button of a Facebook Page</p>
             <p class="info">here you can see the edge.create fire</p>
             <div class="fb-like" data-href="http://www.facebook.com/jsfiddle" data-send="false" data-width="150" data-show-faces="true"></div>
         </div>
         <div style="clear:both;"></div>

Very

Answer 4

Make sure the FB.Event.subscribe('edge.create') call is right after the init (within the window.fbAsyncInit function and not outside of it)

Example

window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    /* Additional initialization code here
    ******************************************************/
};

...then load the SDK Asynchronously!

Pesek