Hide the word "followers" from Twitter follow button

Question

Is there a way to modify the Twitter 'follow' button to display the number of followers in a bubble but hide the word "followers"? I basically want my 'follow' button to look the same as the 'tweet' button.

The current code looks like this:

<a href="https://twitter.com/User" class="twitter-follow-button" data-show-count="true" 
data-show-screen-name="false" data-dnt="true">Follow @User</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>

Sorel

Answer 1

I had this same issue and solved it by basically hiding the word 'followers' and creating a fake right edge to the bubble, if that makes sense. So, you have to wrap the button in its own div, then hide the overflow of that div and set the width to the exact point where the word disappears and the height precisely to the height of the button you are using. Here's a code example:

#titter-div {
    border-radius: 4px; /* to mimic the curved edges of the count box */
    border-right: 1px solid #AAAAAA; /* this is the width and color of the count box border */
    height: 20px; /* this height works for the medium button */
    width: 88px; /* precise width to hide the word */
    overflow: hidden; /* actually hides the word */
}

This worked for me to create exactly what you are looking for. Hope this helps.

Englut

ideally, you would put the style declarations in a stylesheet, but you could put them inline. For other social buttons, you'd just have to adjust the different widths, heights and border colors to match. – Englut

If you're using the iframe version of the follow button, you can actually just add 4/5 of the styles mentioned here to the iframe style parameter itself (skip width because its already there). This way you need not create a new div wrapper :) – Foe

I'm revisiting this issue 7 years later and finding that it doesn't work very well anymore. It's impossible to get the fake border to display perfectly down to the pixel, and the overflow creates problems with the div appearing shorter than it actually is, which means you have to create offsets when positioning it within the page. There is also text decoration for the link inside the bubble with underlining extending into the border, which gives away the hack. You also can no longer add padding to the div. – Sorel

Answer 2

To display the number of followers in a bubble but hide the word "followers", here is the code I use with an iframe :

<iframe
  src="//platform.twitter.com/widgets/follow_button.html?screen_name=Vacance_Luberon&show_screen_name=false"
  style="width: 88px; height: 20px;"
  allowtransparency="true"
  frameborder="0"
  scrolling="no">
</iframe>

Semaphore

platform.twitter.com/widgets/… – Icebound