Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide the word "followers" from Twitter follow button

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>
like image 541
Knocks X Avatar asked Jun 03 '12 22:06

Knocks X


People also ask

How do I hide my followers and following on Twitter?

If you don't want non-followers to see all your followings, you can hide who you follow on Twitter by simply switching to a private account. When you have a private Twitter account, non-followers won't be able to see who you follow, your followers, and your tweets.

Why can't I see followers on Twitter?

My follower count is wrong If you received a notification from Twitter alerting you to a new follower, but don't see that person later in your followers list, it's likely that account was hidden for spam activity, unfollowed you, or deactivated their account.

How do I fix zero following on Twitter?

Some people's following/followers or Tweet counts do not immediately display their previous numbers upon reactivation. Don't worry, these will be fully restored within 24 hours of reactivation. If it has been more than 48 hours and your counts have still not been restored, contact support for assistance.

How do you tweet a follow button?

Log in to your Twitter account. Go to https://publish.twitter.com/. Customize the follow button to your liking with the available options. Copy and paste the code into the HTML of your website wherever you would like the button to appear.


1 Answers

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.

like image 56
Charles Avatar answered Oct 22 '22 22:10

Charles