Customize Twitter Follow Button In 7 ways!

Create Custom Twitter Follow Button

You can make 7 changes to the button appearance. You can change:

1. Button background color
2. Text Color
3. Link Color
4. Followers Count Display
5. Language
6. Width
7. Alignment

The only changes that makes sense to me are the first 4 changes. Remaining changes should be made only of you run a blog with complex design and language other than english.

The normal code looks like this:

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

Where you just need to replace the green text with your twitter username. The above default code will display the following look,

Now to make customization changes add the following codes (given below) just before the highlighted yellow text to make the effects take place.

1) To Change the button color you have two choice blue or grey. The blue one is the default one and the grey color is the one that I am using.

data-button = "grey"

PS: With the grey color you will not be able to see the followers count because its color is automatically changed to white.  So read below..

2) To change the text color use this code,

data-text-color = "#000000"

To change the hexadecimal color use our color generator tool

3) Add this code to change link color,

data-link-color = "#000000"

Again replace the 6 digit hexadecimal code with a color of your choice

4) To Hide the followers count number, use this code,

data-show-count="false"

If you wish to show counts again then simply change false to true

5)  The Follow Button is available in English (en), French (fr), German (de), Italian (it), Spanish (es), Korean (ko) and Japanese (ja). To specify the language for the Follow Button use the two letter language code. For example for Twitter button in Japanese language use this code,

data-lang="ja"

Simply replace ja with any language code you want.

6) You can adjust the width of the follow button in pixels or percentage using the following code,

data-width="300px"

The default width is 300px. You can increase or decrease it. The default dimensions for the follow button are 300px by 20px

7)  You can also align the plugin to left or right just like the float property by using this code,

data-align="right"

You can float the button to either right or left.

Combined Customized code:

The following code will put the important effects in a single button,

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

You can add your required codes in the similar manner as shown in the above code.