Attach a click() event to the FaceBook 'Like' button?

I'd like to do something on the page when a user clicks 'Like'.

I thought something simple like the following would work:

<script type="text/javascript">
    $(document).ready(function () {

        $('.connect_widget_like_button clearfix like_button_no_like').live('click', function () {
            alert('clicked');
        });
    });
</script>

This is the iFrame that FaceBook supplies to add the Like button to the page:

<iframe 
    id="FBLike"
    src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.MySite.Com... blahblahblah" 
    scrolling="no" 
    frameborder="0" 
    style="border:none; overflow:hidden; width:450px; height:80px;" 
    allowTransparency="true">
</iframe>

My script attempts to bind a click event to an anchor tag that is loaded into the iFrame when the page loads. It doesn't work though. Is there any way for me to get jQuery to recognise when this is clicked? Thanks

Answers


Facebook API doesn't allows you to subscribe to the like clicking event, but it allows you to subscribe to the like happening event (fired when the like action is completed):

FB.Event.subscribe('edge.create', function(response) {
  // like clicked
});

see here.


Make a PHP (or whatever language you use) script to CURL the source from http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.MySite.Com... blahblahblah

Put the source from facebook into your html page, you can then you can do whatever you like in JavaScript/jQuery with the code from Facebook.

Some examples for CURL within PHP - http://www.php.net/manual/en/curl.examples.php


You cannot use JavaScript to access elements within an iframe that does not belong to the current URL, as I guess the domain you're using is not facebook.com you won't be able to attach an event to the like button in this way.


One can detect 'like' and 'unlike' event of facebook like button using edge.create and edge.remove respectively.


<script type="text/javascript">
    $(document).ready(function () {

        $('.connect_widget_like_button clearfix like_button_no_like').live('click', function () {
            alert('clicked');
        });
    });
</script>

Need Your Help

android alarmmanager multiple alarms, one overwrites the other?

java android

I've searched posts for answers to my question but haven't found anything that solves my problem. I'm trying to set 3 different alarms using one AlarmSettings class. When I set two alarms, the sec...

Add shadow (recessed text effect) to Cocoa label without degrading text rendering quality

cocoa antialiasing shadow nstextfield

I'd like to create statusbar with text effect like in Safari or iTunes, i.e. recessed text.