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

Question

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

score 37 · Accepted Answer · edited Feb 14 '13 at 08:41

37

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.

edited Feb 14 '13 at 08:41

Community

1
1

answered Sep 15 '10 at 15:29

serg

109,619
77
317
330

but this cannot be done in a tab, right? any other solutions like at http://www.facebook.com/901Tequila?v=ap4904458780 , where clicking on the like button redirects you to the pin wall? – SteMa Nov 19 '10 at 17:42
1

This answer is only good when using their bloated SDK, and most people just use the iframe solution. – vsync Apr 22 '13 at 21:20
can we get unlike event also .. I tried this and it gives response only when we like,, – Straw Hat Nov 11 '14 at 07:34
@StrawHat late answer but hope it will help others. Use edge.remove for unlike event. – Ionut Tatu Jun 24 '15 at 07:20
`edge.create` and `edge.remove` JS SDK Events are deprecated. Is there any alternative to that @serg? – Frostbourn Jul 04 '18 at 08:47

score 5 · Answer 2 · answered Sep 15 '10 at 15:08

5

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.

answered Sep 15 '10 at 15:08

Ben Everard

13,652
14
67
96

score 4 · Answer 3 · answered Sep 15 '10 at 15:15

4

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

answered Sep 15 '10 at 15:15

Damon Skelhorn

1,491
11
18

It's also most likely to be against their TOS/policy. – Peter Bailey Sep 15 '10 at 19:23
I have serious doubts what something like that would work. It would make like button spamable and Facebook can not allow that. – Denis Sep 15 '10 at 19:56
No idea what their TOS are, obviously you would need to check. @denis , curling the URL will produce the same result as viewing the page directly or as is displayed in an iframe. – Damon Skelhorn Sep 15 '10 at 21:00
This will never work. FB social plugins like the Like button must be used in an iframe. This is by design for security. The social plugins allow for actions that use facebook.com session cookies, and because they are cross-domain iframes, the container page can't interact (or interfere) with them via JavaScript. The exception to this is by using controls that have been exposed by cross-domain communication code on the document inside the iframe (the facebook.com page containing the Like button). You can use `FB.Event.subscribe('edge.create', ...)` in that way. – AndrewF Oct 03 '12 at 19:40

score 2 · Answer 4 · edited Oct 11 '11 at 18:54

2

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

edited Oct 11 '11 at 18:54

answered Jul 04 '11 at 04:56

Joby Joseph

2,177
3
15
19

I was not aware of the `edge.remove` event. Do you have a link? – Oct 11 '11 at 18:54

score 0 · Answer 5 · edited Feb 22 '19 at 08:40

0

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

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

edited Feb 22 '19 at 08:40

mooga

3,136
4
23
38

answered Feb 22 '19 at 08:12

Miga Siilegmaa

1

4

it would be nice if you add some explaination – mooga Feb 22 '19 at 08:15

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

5 Answers5

Linked