How To Add Google +1(plus) Button With Blogger Share Buttons

26
8f1d87f8b78c0c6590c4f8b78c1cf69edelicious

This quick and easy tutorial will explain how to enable Google +1 Button with Blogger Share Buttons. If you are already using Blogger share buttons in your blog, you can skip step 1.

"+1" is often used as a digital shorthand for "this is pretty cool." It’s also a way for friends, contacts, and the rest of the world to find great things on Google search. Google launched the +1 button back in March as a way to help share web content and make search more personal and relevant.

From Blogger Buzz

For more information about the +1 button, you can watch this short video:

Step 1 : First enable share buttons for blogger editing the Blog Posts widget from Page Elements section.

Step 2 : Go to "Edit HTML". Click on "Expand Widget Templates"

Step 3 : Find this and remove it:

<b:include data='post' name='shareButtons'/>

Note : If you can not find above code, then skip that step.

Step 4 : Now add below code just above the </head> tag.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>

Step 5 : Scroll down to where you see below code:

<div class='post-header-line-1'/>

Step 6 : Now Copy below "Blogger Sharing buttons" code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste "Blogger Sharing buttons" code just before <data:post.body/> .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>

This will show blogger sharing buttons below post header in blogger post pages..But if you want to show share buttons below blogger post,then paste your code just after <data:post.body/>.

Also if you want to show share button in every page, then remove 2 blue lines form above code.

Step 7 : Now save your template and you are done.

File Under : button, google, seo, widget

26 Responses to “How To Add Google +1(plus) Button With Blogger Share Buttons”

  1. Andreas says:
    June 8, 2011 at 9:13 am

    thanks

    Reply
  2. Kurnia Septa says:
    June 18, 2011 at 2:25 pm

    thanks for tips

    Reply
  3. Kashish Gupta says:
    June 19, 2011 at 4:19 am

    Working gr8 for me thanks alot1!!

    Reply
  4. outlier says:
    June 19, 2011 at 9:21 am

    Thanks for your instruction. I've built it

    Reply
  5. David Cosier says:
    June 27, 2011 at 8:57 am

    Hi there,

    Thanks for the tutorial. For some reason my +1 button is not showing up in my social icons at the bottom of my blog posts. I was wondering if you could tell me if I've done something wrong?

    www.fearhealing.com

    Reply
  6. Rodrigo... says:
    July 2, 2011 at 4:50 am

    Very nice Job thanks sow Much
    www.atualizasat.com

    Reply
  7. Hostel Tinktinkie, Santa Rosa de Calamuchita says:
    July 7, 2011 at 9:52 pm

    Hi, thank you for sharing this. I have the same problem the plus button is not appearing below my posts. I would also appreciate some help. Thank you.

    Reply
  8. deyahya says:
    July 8, 2011 at 12:32 pm

    Assalamua'alaikum...syukron..

    Reply
  9. Xtreamer says:
    July 10, 2011 at 2:12 pm

    thnx
    http://prolearners.blogspot.com/
    chk my blog

    Reply
  10. Roziebay says:
    July 12, 2011 at 8:02 pm

    success with your tips, syukron katsiro

    Reply
  11. MARIUS B. says:
    July 25, 2011 at 11:25 pm

    please Help me ! What is wrong..... I put the button -> +1 ... and not apear in my blog...

    Reply
  12. Francisco Galárraga says:
    August 9, 2011 at 11:40 am

    Thanks for the tips! Fixed my blog good. Check it out: http://gringo-art.blogspot.com/

    Reply
  13. dzuturum says:
    August 13, 2011 at 7:41 pm

    conflict between google plus button and lightbox
    There is a serious conflict b/w Google plus button and lightbox script the buttons works fine in all other pages but when lightbox script is added to the page there is some problem.

    It has a JavaScript error and the Google plus one button wont show up

    Reply
  14. omtiger.com says:
    August 17, 2011 at 8:01 pm

    This is my first time i visit here. I found so many entertaining stuff in your blog, especially it's discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! Keep up the good work.

    Reply
  15. omtiger.com says:
    August 17, 2011 at 8:05 pm

    Aw, this was a really great post. In theory I'd like to write like this also - taking time and real effort to make a good article... but what can I say... I procrastinate a lot and never seem to get something done.

    Reply
  16. $hubham says:
    August 21, 2011 at 5:34 pm

    Thanks for the tips!!!!!!! Fixed my blog awesome. Check it out: http://smashinggadget.blogspot.com/

    Reply
  17. Clommo Trust says:
    August 26, 2011 at 6:47 pm

    Thanks This Help me..

    Reply
  18. Jhonnysan says:
    October 9, 2011 at 1:45 am

    thanks you helped me with this tutorial

    Reply
  19. ahmed elawamy says:
    October 26, 2011 at 10:52 pm

    thank you

    http://pramjk.blogspot.com/

    Reply
  20. Pam Hogeweide says:
    November 5, 2011 at 11:09 am

    Thanks!!! Perfect!

    Reply
  21. Ban Terbaik di Indonesia GT Radial says:
    November 10, 2011 at 5:56 pm

    I love google plus more than the others, but my friends are not interested in this google plus. However, I like this post, thanks a lot..

    Reply
  22. AFZAAL AHMAD says:
    November 18, 2011 at 11:00 pm

    Thanks, working perfectly.....

    Reply
  23. Rosefrankie says:
    November 24, 2011 at 11:31 am

    I have posted google+
    but what is the benefit, If someone click on +button
    may you like to describe what happen and benefit of getin a lot +plusgoogle

    Reply
  24. Lee Curtis says:
    December 10, 2011 at 8:32 pm

    how do i add a plus one widget, to any section of my layout? is it possible?

    done the posts but would like the +one icon in the left side bar at the top and bottom

    Reply
  25. manoj says:
    December 26, 2011 at 3:35 pm

    Thanks, visit http://nextsemtesting.blogspot.com/ for free ccna updates..

    Reply
  26. Khmer News says:
    April 27, 2012 at 10:59 am

    Thanks you for this helpful post! I think I have a clue on how to work it out now. I'll be back for further interesting and useful posts. Thanks!

    Reply

Leave a Reply