Facebook Like Subscribe Event Not Working

StackOverflow https://stackoverflow.com/questions/22979135

Question

I wish to trigger a script once user click like at our page, but there's no error in my script and no result at all. Not sure which thing I write wrongly.

<body><div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
FB.init({
    appId  : '213893228799718',
    status : true,
    xfbml  : true
});
FB.Event.subscribe('edge.create', function(response) {
    alert('You liked the URL: ' + 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.net/en_GB/all.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<?php
$a = '<iframe src="http://www.facebook.com/plugins/like.php?href='.urlencode('https://www.facebook.com/MyFanPage').'&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=213893228799718" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>';
echo $a;
?>
</body>
Was it helpful?

Solution

If you read the documentation carefully, it says-

The XFBML and HTML5 versions of the button allow you to subscribe to the 'edge.create' event in the Facebook SDK for JavaScript through FB.Event.subscribe. This JavaScript event will fire any time a button is clicked.

And you are using the IFrame version, that's why it isnt working.

Also, it wont work with any version in the localhost, may be due to some security reasons.

You can use the HTML5 version-

Replace your js.src=... line with:

js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=213893228799718";

and

$a = '<iframe sr....
echo $a;

with

<div class="fb-like" data-href="https://www.facebook.com/MyFanPage" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>

OTHER TIPS

I guess the reason is that you're using the Like Plugin the "iFrame way". The Event Listener is not able to listen to Events which happen in another document context..

Try it like this:

<html>
<body>
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function(){
        FB.init({
            appId  : '213893228799718',
            status : true,
            xfbml  : true
        });
        FB.Event.subscribe('edge.create', function(response) {
            alert('You liked the URL: ' + 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.net/en_GB/all.js#xfbml=1&appId=213893228799718";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

</script>
<div class="fb-like" data-href="https://www.facebook.com/MyFanPage" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
</body>
</html>

As Sahil wrote, you need to use XFBML tags

HTML:

<fb:like href="{Herf}" width="450"></fb:like>

JS:

window.fbAsyncInit = function() {
    FB.init({
        appId: '{appID}',
        status: true,
        xfbml: true
    });

    // FB event listener 
    FB.Event.subscribe('edge.create', function (url) {
     console.log('You liked the URL: ' + url);
    });
};

And here's a demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top