I have a facebook application with two like buttons on it. The condition to continue to another page is to like both of them. What i want to do is to call a function after click action on any of these buttons. ( the function could for example reload the page ). Any help would be appreciated.

//edit

so far i've been trying to use jQuery but with no luck

HTML:

<div class="fb-like" data-href="/[some_id]" data-send="false" data-width="450" data-show-faces="false">  
<div class="fb-like" data-href="/[some_id]" data-send="false" data-width="450" data-show-faces="false">  

jQuery:

$(".fb-like").click(function() {
      alert('click');
});

I have a facebook application with two like buttons on it. The condition to continue to another page is to like both of them. What i want to do is to call a function after click action on any of these buttons. ( the function could for example reload the page ). Any help would be appreciated.

//edit

so far i've been trying to use jQuery but with no luck

HTML:

<div class="fb-like" data-href="https://www.facebook./[some_id]" data-send="false" data-width="450" data-show-faces="false">  
<div class="fb-like" data-href="https://www.facebook./[some_id]" data-send="false" data-width="450" data-show-faces="false">  

jQuery:

$(".fb-like").click(function() {
      alert('click');
});

• javascript
• jquery
• facebook-like

• 1 show us your code - what have you tried so far? – Nikola Commented Oct 25, 2012 at 6:11
• I think the javascript-sdk has some event binding for these cases. A quick look to the documentation would be enough, I think. – Saul Martínez Commented Oct 25, 2012 at 6:27

2 Answers 2

Here is a how you do it:

FB code of LIKE button

<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);
            }(document, 'script', 'facebook-jssdk'));</script>
      <div class="fb-like" data-href=http://www.facebook./thebeatles data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="remend"></div>
    </div>

And JavaScript code to catch an event

FB.Event.subscribe('edge.create', function(response) {
 alert('I CLICKED IT');
});

Your code should be like this, don't call FB.Init inside window.fbAsyncInit because it's already being called.

<div class="fb-like" data-href="https://www.facebook./YOUR_PAGE_NAME" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.Event.subscribe('edge.create', function(response) {
        alert('I just clicked like button');
    });
    // Code to detect clicking unlike
    FB.Event.subscribe('edge.remove', function(href) {
        alert('Unlike');
    });
};

(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&appId=YOUR_APP_ID";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>