Add javascript function call to Facebook like button

Question

When users click the like button on my site, I want to call a Javascript function.

The source code for the button is:

<div class="fb-like" 
    data-href="http://www.example.com"
    data-layout="button" 
    data-action="like" 
    data-size="large">
</div>

In the browser, that renders to:

<div class="fb-like fb_iframe_widget" data-href="http://www.example.com" data-layout="button" data-action="like" data-size="large" fb-xfbml-state="rendered" fb-iframe-plugin-query="action=like&amp;app_id=&amp;container_width=892&amp;href=http%3A%2F%2Fwww.example.com%2Fm%2F174&amp;layout=button&amp;locale=en_US&amp;sdk=joey&amp;size=large"><span style="vertical-align: bottom; width: 63px; height: 28px;"><iframe name="fb56152a7ff1cc" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like Facebook Social Plugin" src="https://www.facebook.com/v2.5/plugins/like.php?action=like&amp;app_id=&amp;channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FfTmIQU3LxvB.js%3Fversion%3D42%23cb%3Dfe277476c6182%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ff14aab39703836c%26relation%3Dparent.parent&amp;container_width=892&amp;href=http%3A%2F%2Fwww.example.com%2Fm%2F174&amp;layout=button&amp;locale=en_US&amp;sdk=joey&amp;size=large" style="border: none; visibility: visible; width: 63px; height: 28px;" class=""></iframe></span></div>

I've tried:

$('.fb-like').click(function() {
    alert( "Handler for .click() called." );
});

But it doesn't work. I'm wondering if Facebook has some special protection that I don't know about, for editing their buttons?

Have you tried onclick function? Kind of silly but I always remember using onClick instead of click. — Konstantino Sparakis
– Konstantino Sparakis, Commented Nov 22, 2016 at 18:31
@KonstantinoSparakis Uncaught TypeError: $(...).onClick is not a function(…) — User
– User, Commented Nov 22, 2016 at 18:35

andyrandy · Accepted Answer · 2016-11-22 18:39:01Z

1

That is not how it works, you need to subscribe to the edge.create event:

FB.Event.subscribe('edge.create', page_like_or_unlike_callback);
FB.Event.subscribe('edge.remove', page_like_or_unlike_callback);

Source: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

You can put those subscriptions right after FB.init:

window.fbAsyncInit = function() {
    //SDK loaded, initialize it
    FB.init({
        appId      : 'your-app-id',
        xfbml      : true,
        version    : 'v2.8'
    });

    FB.Event.subscribe('edge.create', page_like_or_unlike_callback);
};

More information: http://www.devils-heaven.com/facebook-javascript-sdk-login/

edited Nov 22, 2016 at 18:39

answered Nov 22, 2016 at 18:33

andyrandy

74.1k9 gold badges115 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

User Over a year ago

What exactly is the definition of edge.create and edge.remove? I can't find the definitions.

andyrandy Over a year ago

what do you mean? take a look at the first link in my answer, edge.create will get fired when the user likes something, that´s all there is to know.

User Over a year ago

Another question. I want to pass parameters because there's many like buttons. Is this possible?

C3roe Over a year ago

@User no, that is not possible. But you can get the info which URL was liked from the data that is passed to the callback function.

Alexander O'Mara · Accepted Answer · 2016-11-22 18:34:10Z

0

There's no special protection, this is just the usual frame behavior and same-origin policy.

If you check the resulting DOM elements, you will see that it creates a iframe, which I have abbreviated to the following:

<iframe ... src="https://www.facebook.com/v2.5/plugins/like.php?..." ...></iframe>

When a user clicks inside that iframe, the event is consumed inside the frame, and your event listener does not fire. Because of same-origin policy, you cannot bind an event inside the frame because it is from a different origin.

You will have to use the JavaScript API Facebook offers to listen to any events it makes available.

answered Nov 22, 2016 at 18:34

Alexander O'Mara

60.9k19 gold badges176 silver badges184 bronze badges

Collectives™ on Stack Overflow

Add javascript function call to Facebook like button

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related