添加 javascript 对 Facebook 点赞按钮的函数调用

Question

当用户点击我网站上的赞按钮时，我想调用一个 Javascript 函数。

按钮的源代码是：

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

在浏览器中，呈现为：

<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>

我试过：

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

但是没用。我想知道 Facebook 是否有一些我不知道的特殊保护，用于编辑他们的按钮？

Answer 1

这不是它的工作原理，您需要订阅 edge.create 事件：

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

来源：https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

您可以将这些订阅放在 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);
};

更多信息：http://www.devils-heaven.com/facebook-javascript-sdk-login/

Answer 2

没有特殊保护，这只是通常的框架行为 same-origin policy。

如果您检查生成的 DOM 元素，您会看到它创建了一个 iframe，我将其缩写为以下内容：

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

当用户在 iframe 内部单击时，事件在框架内消耗，并且您的事件侦听器不会触发。由于同源策略，您不能在框架内绑定事件，因为它来自不同的源。

您必须使用 JavaScript API Facebook 提供的功能来收听它提供的任何活动。

添加 javascript 对 Facebook 点赞按钮的函数调用

Add javascript function call to Facebook like button

javascript

facebook

facebook-javascript-sdk