Customize Twitter Follow Button In 7 ways!

custom twitter follow buttonTwitter 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="" class="twitter-follow-button">Follow @mybloggertricks</a>
<script src="" 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,

twiiter default color

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.

twitter grey color

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,

twitter text color

data-text-color = "#000000"

To change the hexadecimal color use our color generator tool


3) Add this code to change link color,

twitter 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,

twitter followers count


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,

twitter in japanese


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,



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,


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,

customized twitter button

<a href="" data-lang="de" data-text-color = "#0080ff"  data-link-color = "#289728" data-button = "grey" class="twitter-follow-button">Follow @mybloggertricks</a>
<script src="" 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:

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.

Need Quick Help within 24 Hours? ASK NOW

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 »

15 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Hi Mohammad,

    Thank u v.much for the MONOP template. ur skills r amazing, evnthough iam a programmer in .net, most of the times i need ur MBT assistance to configure my blog. You are saving most of the valuable time of all the blogger's.Your coding and designing styles are excellent.

    iam still looking for a favour from you, can u send me a stunning, awesome horizontal n veritcal menu with dropdown facilities. to my mail wewantjagan at gmail dot me in this bcoz my blog is related to political person in Andhra Pradesh and it is becoming most famous now a days. i appreciate your co-operation.

  2. thank you for all the articles , it would be great if you can teach us how to code our own blogger templates ,

  3. Bro my website's content is being copied by someone else without my permission.. How can i report it????????

  4. @BSR

    I have visited your blog and liked the customizations pal. thanks for being a regular reader. For that drop down menu I have published two posts which can fully be customized. Please try them and let me know how can I assist you on it. Those are really easy to customize and will blend perfectly in your blog.

    After facebook John the next series would be Designing blogger Templates. I thank you for the request.

    Write a polite letter to the author and ask him to linkback to you. If he ignores to compromise then you can submit his blog URL to and can remove his content for $10.
    A free advise is to add his blog url to content thieves in your sidebar with a nofollow link.

  5. @BSR
    Forget to attach links pal here they are,

    and this

    for vertical menus you can read this post >

  6. @Mohammad Mustafa Ahmedzai


  7. Hi Mohammad - I am a new at this so pls forgive me it this is a simple thing that I have missed. i want to create a single widget for FOLLOW US - that gives the option or RRS , email and Facebook. Is it possible to easily combine them?

  8. I realize that the one you are using on your site is the kind of thing I am looking for!

  9. @The Cry Baby Blog Feeling foolish now for I have found the widget on your site. Many thanks,

  10. @John
    LATE reply, but you have it copyrighted, send a DMCA to the website and also contact anybody advertising on the website. Also do a WHOIS search and find out who is nameserver is so you can contact the hosting website. Also you can search for what website host the domain by using Worked for me. Other than that, just launch a good ol PDOS/DDOS on their ass :D

  11. This comment has been removed by the author.

  12. Thanks very much, works like a charm on my website at Daily Premiums

  13. That's very helpful, thanks for sharing!!

  14. Are you able to use your own graphic for this button?

  15. salam i am zeeshan, i want to paste facebook, twitter follow button in the below of my post like your post, but there is a problem it is show on the buttom of the comment post.
    Please Give me an any idea/coding