Facebook分享按钮直到刷新后才显示

Question

上周我在我的rails应用程序中添加了Facebook和Twitter共享按钮.我认为它们工作正常,但似乎它们没有可靠加载,需要刷新才能让它们显示出来.我认为这是一个涡轮机问题,因为这些事情经常是这样我安装了'jquery-turbolinks'gem.这不是一个涡轮问题.

环顾四周后,我发现喜欢回答这样一个并同时加入 twttr.widgets.load();到我的Twitter功能年底解决了这个问题,我已经没有运气获得 FB.XFBML.parse();,使Facebook的分享按钮无刷新加载.在这个 Facebook开发页面上,它没有列出共享按钮作为可以用该代码修复的事情之一.

我的代码部分如下:

<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/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk')); FB.XFBML.parse();</script>

<div class="share-buttons">
   <div id="fb-root"></div>
      <div class="fb-share-button" data-href="#{request.original_url}" data-width="110"></div>
</div>

Answer 1

这是因为有时你的FB对象甚至没有定义,你的FB.XFBML.parse()函数被调用.初始化时需要调用FB对象.所以你的代码改为:

<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/sdk.js#xfbml=1&version=v2.0";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

     window.fbAsyncInit = function(){  // this gets triggered when FB object gets initialized
            console.log("FB Object initiated");
            FB.XFBML.parse(); // now we can safely call parse method
       };

</script>