Facebook "Like" button callback

JavascriptFacebookButtonCallbackFacebook Like

Javascript Problem Overview


I am interested in implementing the facebook "Like" button, but I would like to know what user is clicking on this button so I can get some useful information from this. From what I have read, facebook is leaving us in the dark on who is clicking on what. ANyone have an idea on how I could track which user clicked on a like button for a particular product?

UPDATE: The like button is rendered by facebook either through an iFrame, or through xFBML. This is why it is difficult to track who clicks on what, or embed an onclick event, etc..

Javascript Solutions


Solution 1 - Javascript

<script>
  FB.Event.subscribe('edge.create', function(href, widget) {
    alert('You just liked the page!');
  });
</script>

Solution 2 - Javascript

> so I simply rendered a unique like button for each logged in user with a URL of > www.somewebsite.com/thisIsThePageIlike/facebookUID.

won't this defeat the purpose of having a like button and mess up your facebook search ranking? Every user will be liking a different url and so facebook will think you have a ton of pages each with a single like count.

I am also having an issue with XFBML like buttons where the edge.create event isn't firing

Solution 3 - Javascript

OK, so I can let you know how I implemented it. What I wanted to get was the UID of the facebook user clicking on the "Like" button inside my facebook connect app. I noticed when a user clicks on the "like" button, facebook fetches the URL passed to it from the button, so I simply rendered a unique like button for each logged in user with a URL of www.somewebsite.com/thisIsThePageIlike/facebookUID. When a request come to the web server with this url, it works like a callback and I process and record the UID if its the first time a user has clicked "like" (ie.. a record of this 'like' does not exist in the db). works for me.

Solution 4 - Javascript

It would be something like the one I have for my client's site such as

<iframe src="http://www.facebook.com/plugins/like.php?href=www.jesterkaraoke.com&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

Solution 5 - Javascript

window.fbAsyncInit = function () {

    FB.Event.subscribe('edge.create', function (response) {
        alert('Liked');
        });
    }
    );
    FB.Event.subscribe('edge.remove', function (response) {
        alert('DisLiked')
    });
};

(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/sdk.js#xfbml=1&version=v2.7";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

HTML:-

<div id="fb-root"></div><div class="fb-like" data-href="https://www.facebook.com/testpage" data-layout="standard" data-action="like" data-size="small" data-show-faces="true"></div>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMattView Question on Stackoverflow
Solution 1 - JavascriptTLKView Answer on Stackoverflow
Solution 2 - JavascriptJamesView Answer on Stackoverflow
Solution 3 - JavascriptMattView Answer on Stackoverflow
Solution 4 - JavascriptSimonView Answer on Stackoverflow
Solution 5 - JavascriptKamal KumarView Answer on Stackoverflow