Adding official Twitter follow button to Blogger

by Greenlava

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.