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>

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.

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>