Adding official Twitter follow button to Blogger

Make it easier for your blog visitors to follow you on Twitter by adding Twitter Follow button to your blog.

The Twitter Follow Button lets them follow you straight from your blog, without having to visit Twitter.  All it takes is just one click (if they are logged in).

The button comes with (optional) followers count. Visitors can also see your profile and latest tweets by clicking the button.

Let us proceed with the tutorial:

1. Go to Design > Page Elements.
2. Click Add A Gadget and select HTML/Javascript gadget.
3. Copy the code below and paste it inside the content box:

   <!-- Twitter follow button start -->
   <a href="http://twitter.com/USERNAME" class="twitter-follow-button">Follow @USERNAME</a>
   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
   <!-- Twitter follow button end -->

   
   
   • Replace USERNAME with your Twitter handle (username).
   • If you’re already using a Tweet Button on your blog, you won’t need the Twitter widget Javascript (code line 3). Remove it.
4. Configure button  
   

   You can configure the look of the Follow button by adding link data-attributes (next to class="twitter-follow-button") in line 2. Refer to the list below:

   Description	Appearance	Data-attribute
   Default
   Don’t show followers count		data-show-count="false"
   Don’t show Twitter handle		data-show-screen-name="false"
   Large button (shown here without count)		data-size="large"
   Align button to the right		data-align="right"

5. Save the widget and view your blog.
6. Do test the button to make sure if it works.

Here’s a live demo example:

Follow @BloggerSentral

and the code for it:

<!-- Twitter follow button start -->
<a class="twitter-follow-button" href="http://twitter.com/BloggerSentral" data-show-screen-name="false" data-size="large">Follow @BloggerSentral</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Twitter follow button end -->

Enjoy!

Update Jan 2012: Update code and attributes, and add demo.