社交图标 Twitter 和 Facebook 未完全加载答案

【问题标题】：Social icons Twitter and Facebook do not load completely社交图标 Twitter 和 Facebook 未完全加载
【发布时间】：2013-11-04 02:55:55
【问题描述】：

我的页面上的社交图标有一个奇怪的问题。 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”（作为链接）。不是真正的推特按钮。

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 显示内容，但这并没有解决问题。

【问题讨论】：

标签： javascript html twitter facebook-social-plugins

【解决方案1】：

turbolinks gem 导致了这个问题。

通过以下提示解决： http://reed.github.io/turbolinks-compatibility/twitter.html

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

【讨论】：

该解决方案在我的情况下不起作用 - 完全破坏了按钮。最好的解决方案是在所有指向带有 fb/twitter 按钮的页面的链接中添加“no-turbolinks”，或者从您的应用中完全删除 turbolinks。

【解决方案2】：

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

<div class="fb-post"
     data-href="https://www.facebook.com/photo.php?v=10153444775720220"
     data-width="550">
    <div class="fb-xfbml-parse-ignore">
        <a href="https://www.facebook.com/photo.php?v=10153444775720220">
        Publication</a> de
        <a href="https://www.facebook.com/tsahalfr">
        Tsahal-Armée de Défense d&#039;Israël</a>.
    </div>
</div>

【讨论】：