I want to use the facebook like button for a facebook fan page, but with a callback function.

So far I've only managed to get the callback function to work with a facebook app with the following code-

<script src=".js"></script>
<script>
    FB.init({
        appId  : 'appID',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true, // parse XFBML
        channelUrl : '.html', // channel.html file
        oauth  : true // enable OAuth 2.0
    });
</script>

<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_GB/all.js#xfbml=1";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.Event.subscribe('edge.create', function(href, widget) {
    callbackFunction();
});
</script>

Like I said, the above code works fine for a facebook app. But what I really want to do is bind code similar to this, but to a facebook page 'like' button such as the following-

<div class="fb-like-box" data-href="/{page-name}" data-width="292" data-height="250"  data-show-faces="true" data-stream="true" data-header="true"></div>

Does anyone know of a way to achieve this?

Many thanks in advance.

I want to use the facebook like button for a facebook fan page, but with a callback function.

So far I've only managed to get the callback function to work with a facebook app with the following code-

<script src="http://connect.facebook/en_US/all.js"></script>
<script>
    FB.init({
        appId  : 'appID',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true, // parse XFBML
        channelUrl : 'http://www.my_url./channel.html', // channel.html file
        oauth  : true // enable OAuth 2.0
    });
</script>

<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_GB/all.js#xfbml=1";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.Event.subscribe('edge.create', function(href, widget) {
    callbackFunction();
});
</script>

Like I said, the above code works fine for a facebook app. But what I really want to do is bind code similar to this, but to a facebook page 'like' button such as the following-

<div class="fb-like-box" data-href="https://www.facebook./{page-name}" data-width="292" data-height="250"  data-show-faces="true" data-stream="true" data-header="true"></div>

Does anyone know of a way to achieve this?

Many thanks in advance.

• javascript
• facebook
• facebook-like
• facebook-javascript-sdk
• facebook-social-plugins

• I don’t know if I remember that correctly, but I think I’ve read or heard somewhere that this only works if you’re using the XFBML version of the like button – so maybe give that a try. (That definitively works, I’ve just used it recently.) – C3roe Commented Jun 10, 2012 at 14:20
• Thanks for that. I was stuck on this for a while, but switching to the XFBML version of the like button allowed the callback to work. Cheers again - if you wanted to paste your ment into an answer, I'd happily accept it as the answer :-) – goose Commented Jun 10, 2012 at 14:52
• @user1104955, using the HTML5 version is the same as using XFBML, events will be triggered, only iframe version missing those events. – Juicy Scripter Commented Jun 10, 2012 at 14:56

2 Answers 2

I had capture a click on the laik of <div class = "fb-like-box" ... html5 diva. Variant:

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

You can only use in version XFBML of the like button,

but I had a very, and has decided in the end this variant

<div id="fb-root"></div>

<script>
     window.fbAsyncInit = function() {
 FB.init({appId: 'YOUR_FACEBOOK_APP_ID', status: true, cookie: true, xfbml: true});
 FB.Event.subscribe('edge.create', function(response) {
 alert('You just liked '+response);
 });
};
(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/ru_RU/all.js#xfbml=1&appId=265929413447804";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

</script>

<div class="fbp-one" style="margin-top: 62px;
                                margin-left: 60px;
                                position: absolute;
                                z-index: 1000;
                                height: 27px;
                                background-color: white;">
            <div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-height="200" data-show-faces="false"></div>
</div>
<div class="fbp-two" style="position:relative;">
            <div class="fb-like-box" data-href="YOUR_ADRESS" data-width="190" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>

Div 'FBP-one' getting better on the button in the FBP-two above and looks like one unit and functional works in all browsers, just paint CSS, each for himself :)

In fact Like Box behave the same as the Like Button as for events fired, meaning that your code should work as expected. Here is the working sample on fbrell.

Actually there is a problem with your code that may lead to unexpected behaviour, you have two versions of JS-SDK included on page, one as regular script tag (with en_US locale) and one included in asynchronous manner (with en_GB locale), you should use only one!

Beware that if you choose the second (async) version you need to define window.fbAsyncInit function and call your FB.init and FB.subscribe from there...