Twitter 关注按钮无法在 Google Chrome 中呈现

Question

我使用twitter button resources 为关注按钮生成代码，我将其添加到我正在处理的网站的所需页面中。代码是：

<a href="https://twitter.com/daniduffymakeup" class="twitter-follow-button" data-show-count="false" data-size="large">@daniduffymakeup</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

在 Safari 中查看页面时，设置按钮样式的 JavaScript 似乎可以正常执行，因为按钮的样式符合预期，但是在 Chrome 中，链接文本每次都会显示，并且只有在页面重新加载时才会将样式设置为按钮通过访问另一个链接并向后导航。刷新页面会再次清除按钮样式，有时甚至无法呈现纯链接文本。

什么可能导致这种行为？我曾尝试将 JavaScript 函数移动到页面的 head 元素中，但无济于事。

Answer 1

您似乎已经删除了脚本标签，将那些添加回来它工作得很好。

如果您在本地测试它，但图像没有出现（这可能是问题所在） - 它只会在代码托管在实时服务器上时显示。

如果您愿意，可以将脚本标签分隔到头部，如果您有多种不同类型的 twitter 按钮，则只需要一次脚本。

<a href="https://twitter.com/daniduffymakeup" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @daniduffymakeup</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

同时禁用所有插件，尤其是 Disconnect，因为这些插件通常会阻止包含跟踪功能的动态社交网络插件。

Answer 2

如果您使用 AVG，您还需要取消选中屏蔽广告和跟踪器扩展

Answer 3

我遇到了类似的问题。我的问题原来是，Follow 按钮仅以 chrome 显示在其容器 div 下方。解决方案是添加

position: relative;

到关注按钮的 iframe。