javascript - 社交图标 Twitter 和 Facebook 无法完全加载

Question

我的页面上的社交图标出现奇怪的问题。 G+ 工作正常，但当我的 html 页面加载完成时，Twitter 分享按钮 + FB Like 按钮不会加载。

推特:

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

当页面加载完成时，我只看到纯文本“Tweet”(作为链接)。不是实际的 Twitter 按钮。

Facebook(此处使用一些 Rails 代码来显示当前 URL)，这里我没有看到任何内容:

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

<div class="fb-like" data-href="<%= request.original_url %>" data-width="100" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>

有趣的是: 页面加载后，当我点击重新加载按钮(CMD+R)时，图标完美显示!

不知道如何解决这个问题。 我尝试仅在文档加载完成时才使用 JS 显示内容，但这并没有解决问题。

Answer 1

turbolinks gem 导致了这个问题。

按照此处的以下提示解决: http://reed.github.io/turbolinks-compatibility/twitter.html

http://reed.github.io/turbolinks-compatibility/facebook.html