Official Twitter Follow me Button for Blogger

Before it’s too late, I should tell you that Twitter has officially launched its Follow me buttons. It not only allows your blog readers to join you on Twitter and read your updates but also shows the total number of followers you have.

Update [9/12/2011]: This tutorial has been updated with new Twitter Follow Buttons.

Here is a live example which you can click to join me on Twitter to get updates of my blog posts.

Follow @blogger_raju

You can easily add it to Blogger powered blogs by some simple methods. So, let’s start with it.

Step 1: Go to Twitter official Follow button page and select the options:

First is to give your twitter username in the input field. For example, my user name blogger_Raju.
Select the type of button you want depending on your blog’s background color.
Select whether to show the followers count or not.
Lastly, select the language.

Step 2: After selecting every options, it will give you a preview and below it you will find the snippets that are needed to add it to render Follow me button. There are two parts as shown in the image below:

Click to enlarge

You need the first part only. It will look like:

<a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="true">Follow @username</a>

Step 3: If you have added the Tweet Button for Blogger, there I have told you to add the JavaScript before the closing body tag so that it loads once and can be reused for every type of widget for Twitter.

If you have previously didn’t added the script then go to Blogger’s Dashboard > Template > Edit HTML (or Dashboard > Design > Edit HTML tab if you have not chosen the new Blogger UI). Find </body> and before it add:

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

Step 4: Save your template.

Step 5: Go to Layout and add a new HTML/JavaScript gadget. Within this gadget add the first part as told in step 2 and save it.

Now view your blog and see if you have properly added the Follow me button on your Blogger blog.

Customize Attributions

Let’s discuss some advance options on customizing the official Twitter follow button.

data-show-count - Shows the number of followers. To turn this off use data-show-count="false". Example:

Follow @blogger_raju
```
<a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="false">Follow @username</a>
```
data-show-screen-name - The default value is true. If you don't want to show the username use data-show-screen-name="false". Example:

Follow @blogger_raju
```
<a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @username</a>
```
data-size - Controlling the size of the Follow button. When not mentioned, it shows the smaller/normal size of the button. To make it large use data-size="large".Example:

Follow @blogger_raju
```
<a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-size="large">Follow @username</a>
```