Facebook页面的Facebook“喜欢”按钮，但带有回调

Question

我想将 facebook like 按钮用于 facebook 粉丝页面，但带有回调函数。

到目前为止，我只设法让回调函数使用以下代码与 facebook 应用程序一起工作-

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({
        appId  : 'appID',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true, // parse XFBML
        channelUrl : 'http://www.my_url.com/channel.html', // channel.html file
        oauth  : true // enable OAuth 2.0
    });
</script>

<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'));
FB.Event.subscribe('edge.create', function(href, widget) {
    callbackFunction();
});
</script>

就像我说的，上面的代码适用于 facebook 应用程序。但我真正想做的是绑定与此类似的代码，但绑定到 facebook 页面的“喜欢”按钮，如下所示-

<div class="fb-like-box" data-href="https://www.facebook.com/{page-name}" data-width="292" data-height="250"  data-show-faces="true" data-stream="true" data-header="true"></div>

有谁知道实现这一目标的方法吗？

非常感谢。

Answer 1

我捕获了对<div class = "fb-like-box" ... html5 女主角的点击。 变体：

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

你只能在XFBML版本的like按钮中使用，

但我有一个非常，并最终决定了这个变种

<div id="fb-root"></div>

<script>
     window.fbAsyncInit = function() {
 FB.init({appId: 'YOUR_FACEBOOK_APP_ID', status: true, cookie: true, xfbml: true});
 FB.Event.subscribe('edge.create', function(response) {
 alert('You just liked '+response);
 });
};
(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/ru_RU/all.js#xfbml=1&appId=265929413447804";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

</script>

<div class="fbp-one" style="margin-top: 62px;
                                margin-left: 60px;
                                position: absolute;
                                z-index: 1000;
                                height: 27px;
                                background-color: white;">
            <div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-height="200" data-show-faces="false"></div>
</div>
<div class="fbp-two" style="position:relative;">
            <div class="fb-like-box" data-href="YOUR_ADRESS" data-width="190" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>

Div 'FBP-one' 在上面的 FBP-2 中的按钮上变得更好，看起来像一个单元和功能在所有浏览器中都可以工作，只需为自己绘制 CSS :)

Answer 2

事实上，Like Box 的行为与 Like Button 的行为相同，这意味着您的代码应该按预期工作。这是working sample on fbrell。

实际上您的代码存在问题可能导致意外行为，您在页面上包含两个版本的 JS-SDK，一个是常规的script标签（带有en_US 语言环境）和一个以异步方式包含的（带有en_GB 语言环境），您应该只使用一个！

请注意，如果您选择第二个（异步）版本，您需要定义 window.fbAsyncInit 函数并从那里调用您的 FB.init 和 FB.subscribe...