Facebook Share Popup-Button 在第一次点击后停止工作答案

【问题标题】：Facebook Share Popup-Button Stops to Work after First ClickFacebook Share Popup-Button 在第一次点击后停止工作
【发布时间】：2015-09-28 14:51:20
【问题描述】：

我的页面上有一个 Facebook 按钮。它调用共享弹出窗口。

问题是该按钮仅在第一次单击时起作用。第二次，第三次点击什么也不做。我总是需要刷新页面。

我是新手。你能帮我看看这段代码吗？

谢谢。

    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'zzzzzzzzzz', 
          status     : true, 
          cookie     : true,
          xfbml      : true  
        });

        FB.ui(
          {
            method: 'feed',
            name: 'Bitcoin Catcher Faucet & Rotator', 
            link: 'http://bitcoin-catcher.com',
            picture: 'http://bitcoin-catcher.com/wp-content/uploads/2015/08/icon.png',
            caption: 'Only 1000+ Rewards Faucet & Rotator', 
            description: 'Earn FREE Bitcoins Easier & Faster! Only 1000+ Rewards per Claim!' 
          },  

          function(response) {
            if (response && response.post_id) {
    unhide('claim', '');
            } else {
            }
          }
        );

      };

     function fb_callout() {

      (function(d){
             var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
             if (d.getElementById(id)) {return;}
             js = d.createElement('script'); js.id = id; js.async = true;
             js.src = "//connect.facebook.net/en_US/all.js";
             ref.parentNode.insertBefore(js, ref);
             }(document));
         }
    </script> 

<img alt="Share on Facebook" src="http://bitcoin-catcher.com/wp-content/uploads/2015/09/facebook-share-button.png" width="180" onclick="fb_callout();" style="cursor: pointer;" />

【问题讨论】：

标签： javascript facebook popup share

【解决方案1】：

对FB.ui 的调用应该在fbAsyncInit 之外。将它放在 Share 按钮的 click 事件处理程序中。

在您的代码示例中，FB JS SDK 每次点击都会加载。 这不是你想要的。

即使它第一次工作，因为 SDK 在加载后调用 fbAsyncInit 反过来 - 在您的示例中，再次错误地 - 通过 FB.ui 调用显示提要对话框，重新加载 SDK 会中断后续调用的 API。 不应每次都加载 SDK。

您想要的是在页面加载时仅加载一次 SDK（它是异步的，因此不会阻塞浏览器），然后为调用 FB.ui 的按钮分配一个点击处理程序。

它看起来类似于下面的东西

<body>
<img alt="Share on Facebook" onclick="fb_callout();" />

<script>
  // Handler for click event
  function fb_callout() {
    FB.ui({...}, function(response) {});
  }

  // This is called when the SDK js file is loaded by the browser
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'zzzzzzzzzz', 
      status     : true, 
      cookie     : true,
      xfbml      : true  
    });
  }

  // This loads the FB SDK js
  (function(d){
  var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js";
  ref.parentNode.insertBefore(js, ref);
  }(document));
</script>
</body>

【讨论】：

Marekful。我确实以这种方式更改了代码，但它不起作用。这次第一次点击也停止工作了。你能举个代码例子吗？
按照我的回答去做。仔细看。您仍然将所有内容都放在 fb_callout 函数中；）
谢谢。现在，每次点击都会打开弹出窗口。但现在正在发生其他问题。我无法通过 Chrome 上的弹出窗口登录 Facebook。发送我的邮件和密码时，Chrome 弹出窗口仅显示一个白页。在 Firefox 中，问题类似，弹出窗口打开说“错误。稍后再试”。 :(
我确实解决了这个问题。我需要在fb_callout 函数中复制function(d)（在FB.ui 代码之后）。非常感谢。

【解决方案2】：

我这样做了，没有任何反应......

<img alt="Share on Facebook" src="http://bitcoin-catcher.com/wp-content/uploads/2015/09/facebook-share-button.png" width="180" onclick="fb_callout();" style="cursor: pointer;" />

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

function fb_callout() {

    FB.ui(
      {
        method: 'feed',
        name: 'Bitcoin Catcher Faucet & Rotator', 
        link: 'http://bitcoin-catcher.com',
        picture: 'http://bitcoin-catcher.com/wp-content/uploads/2015/08/icon.png',
        caption: 'Only 1000+ Rewards Faucet & Rotator', 
        description: 'Earn FREE Bitcoins Easier & Faster! Only 1000+ Rewards per Claim!' 
      },  

      function(response) {
        if (response && response.post_id) {
unhide('claim', '');
        } else {
        }
      }
    );

  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxx', 
      status     : true, 
      cookie     : true,
      xfbml      : true  
    });

  (function(d){
         var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement('script'); js.id = id; js.async = true;
         js.src = "//connect.facebook.net/en_US/all.js";
         ref.parentNode.insertBefore(js, ref);
         }(document));
     }

  };


</script>

【讨论】：