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.
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.
Also disable any plugins, particularly
Disconnectas these often block dynamic social network plugins which contain tracking features.