7 Ways To Customize Your Twitter Follow Button

The Follow button that Twitter provides by default is not much appealing. You don’t need to use the old Follow button anymore, because you can now customize almost everything like – button color, button text, followers count display and more. The best place to add in your Twitter Follow button will be the Header area of your blog/website. Because it will be the place that people see most. I’m sure that you will have an increased ‘Follow’ count if you place the button on the header part of your site. The reason is simple – header section gets most impressions. Now I will tell you, how you can customize your Twitter Follow Button to make it more appealing and sexy.

Creating a Custom Button

Well, there are 7 things you can change about the button appearance. They are:

1. Button Background

2. Link Color

3. Button Text Color

4. Display of Followers’ Count

5. Language

6. Alignment

7. Width of the button

But you need to change only the firs four among these because these are the only ones which really impact the appearance. Rest of them are applicable only if your blog’s design is quite complex. The normal Follow Button code looks like this:

<a href=”http://twitter.com/techomag” class=”twitter-follow-button”>Follow @techomag</a> <script src=”http://platform.twitter.com/widgets.js” type=”text/javascript”></script>

You just need to replace ‘techomag’ with your Twitter username in the above code. And that will produce a follow button which looks somewhat like this: But this is too old-fashioned and very common. Let’s try some customizations. Now you’ve to add the following codes before class=”twitter-follow-button” to make the changes work.

1. Button Background

Twitter provides Blue and Grey as the only options for the button color. Choose either one. If you chose Blue, then you don’t have to make any changes as it’s Blue by default. If you chose Grey, then you just need to add the following piece of code as described above:

data-button = “grey”

Note: You will not be able to see your followers count if you choose grey. For that, read #3.

2. Link Color

You can add the Link color for your Twitter Follow button. For that, you just need to add the following code:


You need to update the 6 digit hexadecimal value with the desired one. You can easily find the color codes from the Internet or even from Photoshop. Alternatively, you can simply give plain color names like – green, black etc.

3. Button Text Color

You need to use this code to change the text color:


Note that you need to change the color code.

4. Display of Followers Count

If you wish to hide Followers’ Count, then use the following code:


Change “false” into “true” if you need to display the followers’ count again.

 5. Language

The Twitter Follow button is now available in many languages like – English (en), German (de), French (fr), Spanish (es), Italian (it), Japanese (ja) etc. You can easily specify the language using a two letter language code. Just add like below:

For example, if you need the code in German, then use the code below:


And to use any other available language, just change the two letters into your desired language.

6. Alignment

This is pretty much self explanatory. Its like any other property in HTML/CSS. You can use the code below to align the button to left:


7. Width of the Follow Button

You can increase or decrease the width of your Twitter Follow Button in pixels or % by using the following code:


The default dimensions is 300px by 20px. You can increase or decrease it by changing the value.

In a nutshell

If you want to get the code with all the important effects then here is it:

<a href=”http://twitter.com/techomag” data-lang=”de” data-text-color = “#0080ff” data-link-color = “#289728” data-button = “grey” class=”twitter-follow-button”>Follow @techomag</a>
<script src=”http://platform.twitter.com/widgets.js” type=”text/javascript”></script>

I hope you enjoyed this post. Feel free to ask us any doubt.

Leave a Reply