0

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.

Andy Bowskill
  • 1,734
  • 3
  • 18
  • 36

3 Answers3

4

If you use AVG you will also need to un-check the block ads and trackers extension

Mark
  • 49
  • 1
  • 2
4

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.

toomanyairmiles
  • 6,465
  • 8
  • 43
  • 71
  • 1
    Apologies I didn't add the script tags as the function was part of a bigger script section in the head of the page. The changes were uploaded to the web host so I have not been testing locally. – Andy Bowskill Jan 30 '12 at 00:21
  • No worries, it is perplexing then. Can you post a link? I tested locally and on a live server - admittedly with a bare html page and it seemed to work perfectly. – toomanyairmiles Jan 30 '12 at 00:42
  • Thank you, the page in question is at http://www.daniduffymakeup.co.uk/contact.html. For me, after the page load is complete, Safari styles the twitter follow button correctly but Chrome doesn't display anything initially and then just displays the link text. – Andy Bowskill Jan 30 '12 at 22:37
  • I've checked in current versions of chrome, firefox and IE and it renders perfectly. Have you disabled any plugins you have running in the problem browsers? I'm just waiting for a render from browsershots.org and I'll get back to you. – toomanyairmiles Jan 30 '12 at 23:05
  • Ah you got me thinking about the Chrome extensions that I use and of course it transpires that the Disconnect extension was preventing the twitter script from functioning correctly, it works fine if i disable Disconnect. Thank you so much for your help! – Andy Bowskill Jan 30 '12 at 23:25
  • @EddieCatflap No worries, I had disconnect in mind as this happened to me recently but I was waiting for the browsershots output so I could prove it. Glad it's all fixed. – toomanyairmiles Jan 30 '12 at 23:51
  • @toomanyairmiles Thank you for reminding me about disconnect.me! – Chris Abrams Feb 18 '14 at 03:54
  • @toomanyairmiles, I don't have Disconnect extension in my Chrome, but I experience the same issue. How can I see the list of all plugins that may interfere? – Green Oct 05 '17 at 10:57
-1

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.

Aaron Robeson
  • 192
  • 1
  • 4
  • 12
  • What `iframe` are you talking about? There is no any `iframe` in docs https://dev.twitter.com/web/follow-button – Green Oct 05 '17 at 11:04