Adding official Twitter follow button to Blogger

official twitter follow button

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 Dashboard > Layout .
  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 twitter follow button default  
    Don’t show followers count  follow button no followers count  data-show-count="false"
    Don’t show Twitter handle twitter follow button no screen name data-show-screen-name="false"
    Large button (shown here without count) twitter follow button large data-size="large"
    Align button to the right twitter follow button default 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:

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.

45 comments to "Adding official Twitter follow button to Blogger"

nurmisnan June 18, 2011 at 5:19 PM    

wohoooo... must try this button
thanks BS

For some reason it doesn't work for my blog. It messes with how my blog looks. Something about the code.

Greenlava June 19, 2011 at 2:39 AM    

@Blog This Link
You're right about the code...thanks for bringing it to my attention.
I've fixed it though. You can retry now.

Unknown June 19, 2011 at 12:06 PM    

Thanks.. I ve put this on my blog and It works. I ve been searching for this type of button.
Click here to watch live on my blog

bestbloggerarea.blogspot.com June 19, 2011 at 1:51 PM    

thanks for a nice post.i am try it and done.

Himanshu Pandey June 19, 2011 at 5:57 PM    

Thanks for this button.

nycstylelittlecannoli June 19, 2011 at 7:22 PM    

is there a way to make the followers be underneath the follow twitter sign? my followers number is cut off on the edge?

Greenlava June 19, 2011 at 7:41 PM    

@NYC, Style and a little Cannoli
I'm afraid you can't. The only option now is to widen the sidebar, or remove the followers count.

nizam June 20, 2011 at 6:39 PM    

how about page load? it's effect page load or not?

zulkbo June 21, 2011 at 12:55 AM    

salam..
very nice entri
very useful
:)

Greenlava June 21, 2011 at 3:13 PM    

@nizam
Of course it puts additional load to your blog, but I don't you'll even notice it.

N.A. July 1, 2011 at 4:15 PM    

This was really helpful...Thanks! :)

adetruna July 13, 2011 at 8:28 PM    

this is what i've been looking for - thx!

Andrew August 20, 2011 at 5:23 AM    

Perfect! Best guide out there.

Anonymous,  August 22, 2011 at 9:47 AM    

Thank you very helpful.

Ben Racicot August 22, 2011 at 11:08 PM    

What about combining this "Follow" button under the "Retweet" button in your floating social sidebar?
@ http://www.bloggersentral.com/2010/07/install-floating-social-media-buttons.html

thanks!

Greenlava August 23, 2011 at 11:59 AM    

@Ben Racicot
You can't hide/remove the username part of the button (because the button lies inside an iframe), hence the button won't fit in the floating bar.

Dapo October 9, 2011 at 12:22 AM    

This rocks..am gonna try it

Gembul October 16, 2011 at 9:09 PM    

Excellent advice, thanks!

khairilnst November 18, 2011 at 5:06 PM    

nice, must try ! :)

Unknown December 17, 2011 at 3:42 AM    

Need help adding twitter handle to tweet button in html.

Greenlava December 17, 2011 at 11:36 PM    

@Nat
Just replace the word USERNAME with acooknotmad in both places in line 2.

Lok Bahadur Thapa December 20, 2011 at 5:25 PM    

i tried in my another blog and works well...thanks for such a helpful idea :)

Ravi Jindal January 23, 2012 at 4:09 AM    

Nice Info, Thanks for Sharing, I'm loving Blogger Sentral :)

Wayne February 3, 2012 at 10:54 PM    

I love it thanks for offering the best stuff ever for my website!

Unknown February 16, 2012 at 7:58 AM    

Thank you! This helped so much!

Kang Topjer February 25, 2012 at 12:34 AM    

thanks for great tutorial, keep sharing brot

ignored_genius April 12, 2012 at 4:55 AM    

thanks for the tip ! :)

Anonymous,  June 2, 2012 at 12:11 PM    

really nice for my blog, with twitter follow button in my blog will be popular in social,,,thanks...nice share post...

أبو كابو June 6, 2012 at 1:17 AM    

thanks man for that

Anonymous,  June 11, 2012 at 5:41 PM    

Great help thanks!

Tom Shewbridge July 6, 2012 at 1:12 AM    

Thank you so much for this, this was fantastic! I do appreciate it!

newsarkarijobs July 7, 2012 at 1:51 PM    

thanks for this button.

Unknown August 23, 2012 at 9:22 PM    

thanks BS

Timor-Leste Open Source Community August 26, 2012 at 7:52 PM    

This article is very helpful at all

Topan Setiawan November 6, 2012 at 3:07 AM    

Thank u very much.'

jyotirmoy December 3, 2012 at 4:16 AM    

Think you boss! its very helpfull for me.

Elizabeth Scheib January 13, 2013 at 4:40 PM    

What am I missing? There is no Page Elements option under Design...

Greenlava January 18, 2013 at 6:41 PM    

@Elizabeth Scheib
That's for the old user interface. With the current UI, you need to go to Dashboard > Layout.

BigBookLover April 14, 2013 at 1:29 AM    

Thank you so much. I've been trying to do this for ages but these have been the only clear and helpful instructions!!

RunnerInMe April 24, 2013 at 9:24 AM    

Thanks for this. Easy way to put one unlike others where you have to go to Twitter directly (Twitter is blocked in our office!)

Anonymous,  April 29, 2013 at 7:04 PM    

thankyou :)

Unknown June 22, 2013 at 1:44 AM    

Always wanted to add Twitter to my blogs .Thank you ! Your easy explanation helped.Hoping to find more from your blogs.

Kata Kata Bijak August 30, 2013 at 9:15 PM    

Thanks so much for sharing twitter follow button on top, really useful for me: D

Unknown September 1, 2013 at 6:50 PM    

thnx! this was very helpful!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.