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="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,

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

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,

twitter in japanese

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,

customized twitter 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:

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.

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 »

13 comments

PLEASE NOTE:
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 com.help 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.

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

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

    ReplyDelete
  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.

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

    @Shadab
    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 dmca.com 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.

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


    http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-blogger.html


    and this

    http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-facebook-style.html


    for vertical menus you can read this post >

    http://www.mybloggertricks.com/2010/01/25-vertical-navigation-menus-for.html

    ReplyDelete
  6. @Mohammad Mustafa Ahmedzai

    YOU ARE EXCELLENT MOHAMMAD, EXACTLY IAM LOOKING FOR THIS. YOU MADE ME EASY. THANKS A LOT

    ReplyDelete
  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?
    Thanks,
    Jeff

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

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

    ReplyDelete
  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 http://www.whoishostingthis.com/. Worked for me. Other than that, just launch a good ol PDOS/DDOS on their ass :D

    ReplyDelete
  11. That's very helpful, thanks for sharing!!

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

    ReplyDelete
  13. 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

    ReplyDelete