--> Customize Twitter Follow Button In 7 ways! | Experience Lab - Online business creation and development guide for bloggers and startups

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

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.

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,11,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,17,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Customize Twitter Follow Button In 7 ways!
Customize Twitter Follow Button In 7 ways!
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXFZ7Ex_sH2BdR6Arl5PKII9S9IP6Q6rv2IaEsKcnaFqgPEKVVFKnt64aq_q7spTias5tp0mHGHxkskz7-6xTaEKbJWKmC6OKPFDG9slfxYy3y83Y7IlQLshe2w2baJkze_RuWMei5bs/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXFZ7Ex_sH2BdR6Arl5PKII9S9IP6Q6rv2IaEsKcnaFqgPEKVVFKnt64aq_q7spTias5tp0mHGHxkskz7-6xTaEKbJWKmC6OKPFDG9slfxYy3y83Y7IlQLshe2w2baJkze_RuWMei5bs/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/07/customize-twitter-follow-button-in-7.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/07/customize-twitter-follow-button-in-7.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy