How to Add Official Google +1 Button to Blogger / Blogspot

June 3, 2011   /   Posted by in Blogger News, Blogger Widgets 23 Comments
How to Add Official Google +1 Button to Blogger / Blogspot

Google Released their another Official New +1 Button for websites and Blog. when you +1 the any page form Web, this will gives that the webpage recommend to your friends and contacts in Gmail. While your friends Searching on Google, your Recommendation will be visible as in Search Result(s).

One of My Friend Paul Crowe (Admin of spiceupyourblog.com), He +1 a page on his Blog
Now I am Searching for “twitter follow button for blogger” in Google.
then i see a +1 recommendation form Paul Crowe in the Search Results.
this means he saying this is Best Stuff. :)

How to Add Official Google +1 Button to Blogger / Blogspot

Watch this Video for Better Understand of +1 Button

How to Add +1 Button to Blogger Posts

Blogger giving this button with Blogger Official Share buttons

How to Add Official Google +1 Button to Blogger / Blogspot
to Enable this button

  1. Go to Blogger Dashboard > Design Tab > Page Elements
  2. Edit Blog Posts and tick the Show Share Buttons checkbox and Save it!

How to Add Official Google +1 Button to Blogger / Blogspot

Demo :-

Small Medium Standard Tall

How to Install +1 Button on Blogger Posts

  1. Login to Blogger Dashboard > Design Tab > Edit HTML
  2. Click on Expand Template Widgets checkbox
  3. Find for </head> tag
  4. Paste the Below +1 Button Script Code Before it! and Save your Template.
    <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
  5. Use the Below Button & Generate a Widget Code and Copy it!

    Generate Widget

  6. Now Find for <data:post.body/> tag
  7. Paste the Coppied Code Before or After it! and Save your Template.
  • if you put the code Before <data:post.body/> tag then it will appear at the top of the post
  • if you put the code After <data:post.body/> tag then it will appear at the Bottom of the post
  • if you put the code both Before and After <data:post.body/> tag then it will appear at the both top and bottom of the post

Drop Your Comments :)

Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

23 Comments on “How to Add Official Google +1 Button to Blogger / BlogspotAdd Comment

  1. avatar

    Noushad Vadakkel June 3, 2011 3:00 pm #

    nice and simple post thaank yoooo… :)

  2. avatar

    Bob's Blitz June 3, 2011 8:20 pm #

    Nice, this is the first article that actually put the button where it said it would. Gracias.

  3. avatar

    John Spencer June 3, 2011 11:13 pm #

    I know my question is not on "topic" but how can I make automatic read more with thumbnails trick to be applied only for the first post in the blog ?
    I tried with <b:if cond='data:post.isFirstPost'> but I can make it work. Can you help me? Thanks.

  4. avatar

    GADEL June 4, 2011 2:56 am #

    Thanks a lot for the tips. God bless you.

  5. avatar

    The Nivedita Patil June 4, 2011 4:45 am #

    thanks it works :)

  6. avatar

    Harish June 4, 2011 6:22 am #

    @ John Spencer
    Yes it is Possible!
    First install Automatic Readmore Hack from this Page
    http://www.way2blogging.org/2010/01/automatic-read-more-hack-for-blogger_09.html

    Then Search for below code (tick Expand Widgets)
    <script type='text/javascript'>
    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>

    and Replace it With following code and Save template
    <b:if cond='data:post.isFirstPost'>
    <script type='text/javascript'>
    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    </b:if>

    Please Reply here if it is Working for you!
    Thank You!

  7. avatar

    socialmysite June 4, 2011 8:27 am #

    Great !!!!

  8. avatar

    John Spencer June 4, 2011 8:48 am #

    It' working great. Thanks very much.

  9. avatar

    Harish June 4, 2011 9:03 am #

    @John Spencer
    Wow! i even not tested it!
    Thanks for giving Reply with great news.
    hope you enjoyed and you are always welcome! :D

  10. avatar

    Thobias June 4, 2011 10:23 pm #

    beatiful template and good articles '-'

  11. avatar

    Team Search June 8, 2011 9:29 am #

    Thank for the explanation.. Its clear and simple

  12. avatar

    Anonymous June 10, 2011 9:46 am #

    Thanks. It really helped

  13. avatar

    sandman June 13, 2011 7:52 am #

    Thanks!

  14. avatar

    Reaz July 13, 2011 8:03 am #

    I can not find this. How can i put this my blogsite: appforpc.co.vu

  15. avatar

    Harish July 13, 2011 8:28 am #

    @Reaz
    Click the Expand Template Widgets check-box ant then try again once

  16. avatar

    மயில்சாமி August 2, 2011 4:20 pm #

    HELLO YOU ARE WELCOME

  17. avatar

    gamep01nt August 5, 2011 6:54 am #

    I already put +1 button at my post. But, how can i put it at my homepage so that people can +1 my blog. Not my post..Any idea. For example this blog, see at the top of the page, beside 'archive'..any idea? Tq—-http://www.newbloggingtipz.com/

  18. avatar

    Harish August 10, 2011 6:45 pm #

    @gamep01nt
    Ok Sure!, i will post about it!

  19. avatar

    Sanjaya සිතුවිලි August 19, 2011 10:48 am #

    its not working for ,,can't understand what happen

  20. avatar

    Faizan Habib August 19, 2011 8:39 pm #

    @Hashir..I cannot add it to my blog..The reason is out of my mind..i think there are too many place wher u can find this code ""
    and i think i am entering the other code in wrong place…kindly guide me…
    my blog is
    http://pingmyblog.blogspot.com/

  21. avatar

    Faizan Habib August 24, 2011 4:36 pm #

    Sir i am not able to add google plus 1 button in my blog….i think the problm is with …becauz there are three places where i can find that code.kindly guide me…
    my blog is http://pingmyblog.blogspot.com

  22. avatar

    Danialde4 October 7, 2011 2:51 pm #

    Thanks a lot ^_^

  23. avatar

    PRASANTH November 23, 2011 2:18 pm #

    thanku www.way2games.tk

© 2014 Way2blogging. Designed by +Harish, Powered by WordPress