Knowing when a facebook buttons is clicked, in jQuery

Question

So on my page I am embedding Facebook like so:

Here is the code that it outputs,

<div class="facebook">          
 <div id="fb-root" class=" fb_reset">
  <div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div>

  <iframe scrolling="no" frameborder="0" name="fb_xdm_frame_http" allowtransparency="true" id="fb_xdm_frame_http" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tab-index="-1" style="border: medium none;" src="http://static.ak.facebook.com/connect/xd_arbiter.php?version=24#channel=f194f0214c1b73&amp;origin=http%3A%2F%2Fqantascu.dev.com&amp;channel_path=%2Fabout.html%3Ffb_xd_fragment%23xd_sig%3Df1bc3676c1f570e%26"></iframe>    

  <iframe scrolling="no" frameborder="0" name="fb_xdm_frame_https" allowtransparency="true" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tab-index="-1" style="border: medium none;" src="https://s-static.ak.facebook.com/connect/xd_arbiter.php?version=24#channel=f194f0214c1b73&amp;origin=http%3A%2F%2Fqantascu.dev.com&amp;channel_path=%2Fabout.html%3Ffb_xd_fragment%23xd_sig%3Df1bc3676c1f570e%26"></iframe>

  </div>
 </div>
<div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div></div></div></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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
    <fb:like colorscheme="light" action="recommend" show_faces="false" width="200" layout="button_count" send="true" href="http://qantascu.dev.com/about.html" fb-xfbml-state="rendered" class="fb_edge_widget_with_comment fb_iframe_widget"><span style="height: 20px; width: 166px;">
<iframe scrolling="no" id="f21dc10b55b8de4" name="f14dd27ab0fc5" style="border: medium none; overflow: hidden; height: 20px; width: 166px;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=&amp;locale=en_US&amp;sdk=joey&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D24%23cb%3Df314d5a8f7b12c6%26origin%3Dhttp%253A%252F%252Fqantascu.dev.com%252Ff194f0214c1b73%26domain%3Dqantascu.dev.com%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fqantascu.dev.com%2Fabout.html&amp;node_type=link&amp;width=200&amp;layout=button_count&amp;colorscheme=light&amp;action=recommend&amp;show_faces=false&amp;send=true&amp;extended_social_context=false"></iframe></span></fb:like></div>

I want to be able to know when someone has clicked on a button, this was the code I tried

jQuery(".facebook iframe").on("click", function(e){
  alert("clicked");        
});

This doesn't work.

Please see this: http://stackoverflow.com/questions/2381336/detect-click-into-iframe-using-javascript — Chubby Boy, Jun 06 '13 at 04:55

score 2 · Accepted Answer · answered Jun 06 '13 at 05:32

There is a very easy way to achieve what you want. Facebook JavaScript SDK offers FB.Event.subscribe which you can use to Attach an handler to an event and invoke your callback when the event fires. Quoting example from documentation that would callback when user likes something

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

Quoting from the documentation information about edge.create used here

edge.create - fired when the user likes something (fb:like). The response parameter to the callback function contains the URL that was liked: "http://www.example.com/article1.php"

Knowing when a facebook buttons is clicked, in jQuery

1 Answers1