Hi Guys,
Let me show you how to detect the Facebook Unlike. Without wasting much time lets jump straight to the point.
First up is to get our markup set up
The Markup
|
1 2 |
<div id="fb-root"></div> <div data-href="http://jaspreetchahal.org" data-send="true" data-layout="button_count" data-show-faces="false" data-font="lucida grande"></div> |
Above is just basic markup that is required for your Like button as picked from the Facebook docs.
Next up will be converting our above container to a Facebook like button, here is how its done
The JavaScript
FB.init is the main thing that we should be concentrating on and for us the most important properties will be appId, xfbml
This code should be placed directly after the opening tag.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> window.fbAsyncInit = function() { FB.init({ appId:"YOUR_FB_APP_ID" cookie: true, xfbml: true }); FB.Event.subscribe('edge.remove', function (response) { alert('You unliked the URL: ' + response); // do other stuff like entering stuff to your database, IP etc // hide contents on page // send user to some other URL // and other stuff like that }); }; (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.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> |
FB.event.subscribe(“edge.remove”,function) is the magic bit. What we are telling FB API is to tell us if user have removed his/her Like for the current URL in href attribute
The Demo
Demo uses my jQuery plugin to generate Facebook Like buttons
Most notable part as stated above is to use fbxml so that we can make use of event subscription. Normal iFrame code doesn’t seem to work with events and stuff.
Important: We can only detect user action on you FB Like button if that happens on your website. If user use their Facebook page to administer their likes and unlikes, there is no way we can tell then.
Resources
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
I hope that this post was useful.
As always if you have anything to add, comments are open and stage is all yours
Cheers
Leave a Reply