使用带有查询字符串的 facebook like 按钮 - like 按钮不起作用答案

【问题标题】：Using the facebook like button with query strings - like button doesn't work使用带有查询字符串的 facebook like 按钮 - like 按钮不起作用
【发布时间】：2012-10-06 13:32:06
【问题描述】：

我正在将 facebook Like 按钮和 Comments API 合并到我的网站中（终于）。现在在我的网站上，我有一个页面使用查询字符串来确定正确的内容（我的网站有超过 4000 个条目，我们使用这个查询字符串）。因此对于用户来说，这一页看起来很多，这样想......

productPage.php?productID=1234

现在我可以毫无问题地添加 cmets API，它可以区分 URL/querystring 的差异，这很棒。然而，Like 按钮不起作用。您单击它，它会闪烁并返回到原来的样子（它不会注册赞）。我正在正确编码 URL（见下文）

<?php
   $fbUrl = urlencode("https://" . $_SERVER["HTTP_HOST"] . $_SERVER['REQUEST_URI']);
   // echo "this page is " .  $fbUrl;
?>

<script>

 window.fbAsyncInit = function() {
        FB.init({
          appId      : 'XXXXXXXXXXXXXXXXX', // App ID
          channelUrl : '//www.myURL.co.uk/channel.php', // 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
      };

</script>

Oh I love this content....
<br><br>

<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&appId=205472122918257";
    fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-like" data-href="<?php echo $fbUrl; ?>" data-send="true" data-width="450" data-show-faces="false"></div>
<br><br>
and add a comment...
<br><br>
<div class="fb-comments" data-href="<?php echo $fbUrl; ?>" data-num-posts="2" data-width="470" data-colorscheme="dark"></div>

我在这方面花了几个小时，并注意到其他人也遭受了这种痛苦，但似乎没有人有解决方案。当我在网上搜寻解决方案时，有没有人解决过这个问题或遇到过这个问题？

【问题讨论】：

您的页面中有吗？最有可能在标题中。

标签： php javascript facebook

【解决方案1】：

您是否使用开放图调试器检查过您的页面？

https://developers.facebook.com/tools/debug

【讨论】：

【解决方案2】：

参考：

https://developers.facebook.com/docs/reference/plugins/like/（点赞按钮）

和

https://developers.facebook.com/docs/reference/javascript/（在 FB JavascriptSDK 上）

这里的不同之处在于脚本的重新排序。此外，此示例中还包含 XFBML（作为您使用的 HTML5 方法的替代方法）。

<html xmlns:fb="http://ogp.me/ns/fb#">
<head>....</head>
<body>
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        // init the FB JS SDK
        FB.init({
          appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
          channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
          status     : true,                                 // Check Facebook Login status
          xfbml      : true                                  // Look for social plugins on the page
        });

        // Additional initialization code such as adding Event Listeners goes here
      };

      // Load the SDK asynchronously
      (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&appId='YOUR APP ID'";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>

    <fb:like href="<?php echo $fbUrl; ?>" send="true" width="450" show_faces="true"></fb:like>
</body>
</html>

【讨论】：