使用jQuery捕获Facebook“赞”按钮的点击

Question

我正在查看Facebook开发者文档，寻找一些示例代码，以便我能够捕获“赞”按钮上的点击事件。文档中说明：

如果您使用的是XFBML版本的按钮，您可以通过FB.Event.subscribe订阅 'edge.create' 事件。

然而，我没有使用XFBML，这是我的代码：

<div class="social_net_button facebook_button">
      <div id="fb-root"></div>
      <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_US/all.js#xfbml=1";
              fjs.parentNode.insertBefore(js, fjs);

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

            }(document, 'script', 'facebook-jssdk'));</script>
      <div class="fb-like" data-href="http://www.facebook.com/pages/Ayrshire-Minis/160330240663397" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="recommend"></div>
    </div>

可以通过jQuery捕获“喜欢”按钮的单击事件吗？

- crmpicco

---

那么，你为什么不使用XFBML呢？你可以在iframe上找到click事件（虽然我从未尝试过），但无法在iframe中的按钮上找到。因此，你要依赖Facebook提供的代码。 - René

“我没有使用XFBML” - 哦，但是是的，你正在使用 ;-) - <div class="fb-like"… 就是 FB 称之为 XFBML 的“符合 HTML5 标记”的版本。 - CBroe

很高兴知道CBroe，谢谢。我已经觉得很奇怪了，因为两种方法都包含相同的JS。 - René

@CBroe 不管用户是否增加了点赞计数器，我想要追踪用户是否点击了推荐/点赞按钮，但是Robin提供的下面的代码不起作用。我已经四处查找，你会认为这是一件相当简单的事情，更不用说很常见了，但我找不到解决方案。问题出在我的实现上吗？ - crmpicco

@ReneGeuze 我已经更新了代码，尝试捕获“like”，但由于某种原因它仍然无法访问FB。这是从哪里加载的，这段代码应该放在哪里？ - crmpicco

Answer 1

您可以尝试这个。 http://jsfiddle.net/qkyAe/ 文档：http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

FB.Event.subscribe('edge.create', function(response) {
    console.log('clicked');
});​

我认为只有当用户点击并且它增加了点赞数（仅限已登录用户）才会计算。因为我没有FB账户，所以无法尝试。

请告诉我，它是否有效 :)

更新:

FB对象来自您已嵌入的脚本。

- Robin Drexler

---

是的，我之前遇到过那段代码，但是有没有一种方法可以在不增加点赞计数的情况下跟踪点击？它似乎不喜欢对FB的引用。 - crmpicco

由于它在 iFrame 中，我认为你不能这样做。但也许其他人可以证明我错了。 - Robin Drexler

你的jsFiddle代码似乎无法运行。我不确定哪里出了问题，也许它无法识别“FB”？ - crmpicco

Answer 2

看起来解决方案是异步发送请求。下面的代码在我的 fb-like div 类之后放置时可以工作：

     <script>
           window.fbAsyncInit = function() {
                   FB.init({
                                           status: true, // check login status
                                           cookie: true, // enable cookies to allow the server to access the session
                                           xfbml: true  // parse XFBML
                                   });
           };
     </script>
     <script type="text/javascript">
           window.fbAsyncInit = function() {
             FB.Event.subscribe('edge.create',
                     function(response) {
                           _gaq.push(['_trackSocial', 'facebook', 'like', document.location.href]);
                     }
             );
           };
     </script>

- crmpicco

---

我将取消对我的答案的接受，因为这似乎工作不稳定。我非常惊讶Facebook没有适当地记录这个问题。 - crmpicco

Answer 3

这段代码真的可以正常工作 :)

<script type='text/javascript'>//<![CDATA[ 
window.addEvent('load', function() {
window.fbAsyncInit = function() {
    FB.init({
        appId: '42424242424242',
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true
    });
    FB.Event.subscribe('edge.create', function(response) {
        alert('You liked the URL: ' + response);
    });
};
(function(d) {
    var js, id = 'facebook-jssdk';
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));
});//]]>  

</script>


         <div id="fb-root"></div> 
         <div class="box">
             <p>First a Like Box of a facebook page</p>
             <p class="info">edge.create is not called</p>
             <div class="fb-like-box" data-href="http://www.facebook.com/jsfiddle" data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
         </div>
         <div class="box">
             <p>Like Button of a website</p>
             <p class="info">here you can see the edge.create fire</p>
             <div class="fb-like" data-href="http://jsfiddle.net" data-send="false" data-width="150" data-show-faces="true"></div>
         </div>
         <div class="box">
             <p>Like Button of a Facebook Page</p>
             <p class="info">here you can see the edge.create fire</p>
             <div class="fb-like" data-href="http://www.facebook.com/jsfiddle" data-send="false" data-width="150" data-show-faces="true"></div>
         </div>
         <div style="clear:both;"></div>

- David Augustus

Answer 4

请确保在初始化之后（在window.fbAsyncInit函数内而不是外部）立即调用FB.Event.subscribe('edge.create')

示例

window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    /* Additional initialization code here
    ******************************************************/
};

然后异步加载SDK！

- Tici