Twitter的“关注"按钮未在Google Chrome中呈现 [英] Twitter follow button doesn't render in Google Chrome

问题描述

我已经使用 twitter按钮资源来生成用于关注按钮的代码，我已添加到我正在工作的网站的必填页面.代码是:

I have used the twitter button resources to generate code for a follow button, which I added to the required page of a website I am working on. The code is:

<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中，链接文本每次都会显示，并且仅当重新加载页面时才显示为按钮样式通过访问另一个链接并向后导航.刷新页面会再次清除按钮样式，有时甚至连纯链接文本也不会呈现.

When viewing the page in Safari the JavaScript to style the button appears to be executed fine as the button is styled as expected, however in Chrome the link text is displayed each time and only gets styled as a button if the page is reloaded by visiting another link and navigating backwards. Refreshing the page clears the button style again and sometimes even the plain link text does not get rendered.

什么可能导致此行为?我尝试将JavaScript函数移到页面的head元素中，但无济于事.

What could be causing this behaviour? I have tried moving the JavaScript function into the head element of the page but to no avail.

推荐答案

您似乎已经放弃了脚本标签，将它们添加回去就可以了.

You seem to have lopped off the script tags, with those added back it works just fine.

如果您在本地进行测试，尽管该图像没有出现(这可能是问题所在)-它仅在将代码托管在实时服务器上时才会显示.

If you're testing it locally though the image doesn't appear (which might be the problem) - it will only show up when the code is hosted on a live server.

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

You can separate the script tag into the head if you like, if you have multiple different kinds of the twitter button you'll only need the script once.

<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 ，因为这些插件通常会阻止包含跟踪功能的动态社交网络插件.

Also disable any plugins, particularly Disconnect as these often block dynamic social network plugins which contain tracking features.

这篇关于Twitter的“关注"按钮未在Google Chrome中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！