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/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="" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="remend"></div>
    </div>

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

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/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./pages/Ayrshire-Minis/160330240663397" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="remend"></div>
    </div>

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

• javascript
• jquery
• facebook
• facebook-like

• 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. – René Commented Aug 1, 2012 at 11:30
• 1 “I am not using XFBML however” – oh but yes, you are ;-) – <div class="fb-like"… is just what FB calls the “HTML5-pliant markup” version of XFBML. – C3roe Commented Aug 1, 2012 at 11:32
• Great to know that CBroe, thanks. I already thought it was odd since both methods include the same JS. – René Commented Aug 1, 2012 at 11:34
• @CBroe Regardless of whether the user increments the like counter I would like to track if a user has clicked the Remend/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 mon, but I can't find a solution to this. Is the problem in my implementation? – crmpicco Commented Aug 21, 2012 at 15:44
• @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? – crmpicco Commented Aug 21, 2012 at 15:50

4 Answers 4

You could try this.

http://jsfiddle/qkyAe/

Docs: http://developers.facebook./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 es from the script you're already embedding.

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>

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/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./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" 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./jsfiddle" data-send="false" data-width="150" data-show-faces="true"></div>
         </div>
         <div style="clear:both;"></div>

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!