capture click of Facebook 'Like' button with jQuery
Solution 1
The solution, it would appear, is sending the request asynchronously. This code below works when placed after my fb-like
div class:
<script>
window.fbAsyncInit = function() {
FB.init({
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create',
function(response) {
_gaq.push(['_trackSocial', 'facebook', 'like', document.location.href]);
}
);
};
</script>
Solution 2
You could try this.
Docs: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
FB.Event.subscribe('edge.create', function(response) {
console.log('clicked');
});
I think this one only counts if user clicks AND it increaes the like count (logged in users only) Since I don't have an FB-Account I couldn't try it. Please tell me, if it works :)
Update:
The FB object comes from the script you're already embedding.
Solution 3
This code REALLY works :)
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
window.fbAsyncInit = function() {
FB.init({
appId: '42424242424242',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
};
(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>
<div id="fb-root"></div>
<div class="box">
<p>First a Like Box of a facebook page</p>
<p class="info">edge.create is not called</p>
<div class="fb-like-box" data-href="http://www.facebook.com/jsfiddle" data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>
<div class="box">
<p>Like Button of a website</p>
<p class="info">here you can see the edge.create fire</p>
<div class="fb-like" data-href="http://jsfiddle.net" data-send="false" data-width="150" data-show-faces="true"></div>
</div>
<div class="box">
<p>Like Button of a Facebook Page</p>
<p class="info">here you can see the edge.create fire</p>
<div class="fb-like" data-href="http://www.facebook.com/jsfiddle" data-send="false" data-width="150" data-show-faces="true"></div>
</div>
<div style="clear:both;"></div>
crmpicco
Senior Analyst Developer (MoodleCloud) at Moodle, AWS Solutions Architect (Associate), Zend Certified Engineer and Google Analytics Qualified Individual
Updated on June 17, 2022Comments
-
crmpicco almost 2 years
I am looking on the Facebook Developers Documentation to locate some sample code that would allow me to capture a click event on the "Like" button. It states:
If you are using the XFBML version of the button, you can subscribe to the 'edge.create' event through FB.Event.subscribe.
I am not using XFBML however, this is my code:
<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.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); FB.Event.subscribe('edge.create', function(response) { alert('You liked the URL: ' + response); } ); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="http://www.facebook.com/pages/Ayrshire-Minis/160330240663397" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="recommend"></div> </div>
Can a click of the 'Like' button be captured by jQuery?