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

时间:2012-01-29 19:13:21

标签: javascript twitter google-chrome

我已使用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元素中,但无济于事。

3 个答案:

答案 0 :(得分:4)

你似乎已经删除了脚本标签,添加回来后它运行得很好。

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

如果您愿意,可以将脚本标记分成头部,如果您有多种不同类型的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 ,因为这些插件通常会阻止包含跟踪功能的动态社交网络插件。

答案 1 :(得分:4)

如果您使用AVG,您还需要取消选中阻止广告和跟踪广告

答案 2 :(得分:-1)

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

position: relative;

到关注按钮的iframe。