问题
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>
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.
What could be causing this behaviour? I have tried moving the JavaScript function into the head element of the page but to no avail.
回答1:
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.
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>
Also disable any plugins, particularly Disconnect as these often block dynamic social network plugins which contain tracking features.
回答2:
If you use AVG you will also need to un-check the block ads and trackers extension
回答3:
I ran into a problem similar to this. My issue turned out to be that the Follow button was being displayed underneath its container div only in chrome. The solution was to add
position: relative;
to the Follow button's iframe.
来源：https://stackoverflow.com/questions/9056139/twitter-follow-button-doesnt-render-in-google-chrome