Customize Twitter Follow Button In 7 ways!

Twitter official Follow button can easily be customized by changing the button color, text and link colors and to show or hide the followers count display.  The best location to add your twitter button is the header section. This area has the highest page impressions and you will surely observe an increase in your twitter count by adding the button to the top position. Lets now customize our twitter counter so that it may blend just perfectly with your blog and website theme.

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/mybloggertricks" class="twitter-follow-button">Follow @mybloggertricks</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.

That's All!

Any Questions?

You can also visit the developers page for more info. If you wish to add this button to your blogger blogs then you may read this post:

• Add Twitter Follow button to Blogger

I hope you find it easy and useful to implement. If you have any questions then you are most welcomed to ask for any help if needed by posting your questions in the comments box.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 7/06/2011