Question

我的页面上有一个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;" />

Answer 1

对FB.ui的通话应在fbAsyncInit之外。将其放在“共享”按钮的单击事件处理程序中。

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

即使它第一次运行，因为SDK一旦加载它就会调用fbAsyncInit - 在你的例子中，错误地再次 - 通过FB.ui调用显示feed对话框，重新加载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>

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

首次点击后，Facebook共享弹出按钮停止工作

2 个答案: