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>
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With