How To Add Google +1 Button To WordPress And Blogger

Google has officially launched +1 button before an hour. So here is our little guide on how to add the official Google +1 button on your WordPress and Blogger blog.

google plus for wordpress and blogger

For Blogger

Go to Edit HTML and search for <head>. Soon after that place the below code

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Now the next step is to place the Google +1 in the post area. To do that search for <div class="post-header-line-1"/> or <data:post.body/> and place the below code immediately after it

<div style='float:right; margin-right:10px;'>
<g:plusone expr:href='data:post.url'></g:plusone>
</div>

Google offers four different types of button from which you can select any one of those. For more information kindly check the post footer

For WordPress

WordPress users go to header.php search for </head> and immediately before that place the following code

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Next up is placing the button where you actually want on your blog, so go to single.php and place the following code where you want it to display

<g:plusone href="<?php the_permalink(); ?>"></g:plusone>

Options

As I said, Google offers 4 different types of button

size="small"  - To display small size +1 button of 15px
size="medium" - To display medium size +1 button of 20px
size="large" - To display large size +1 button of 60px

For an example if you want large button, check this example

<g:plusone size="tall"></g:plusone>

For more details check out Google +1 resource from Google

June 2, 2011. This entry was posted in Blogger, Tutorials, WordPress and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

22 Responses so far!

  1. Thanks for sharing the codes :)

  2. i try this on blogger but it have the same count number on every post. How to fix this?

  3. I am having trouble passing the href in blogger like I have done for my FB Like and Twitter buttons. I noticed you didn’t do this, have you tried it and have you had any luck?

    I have tried both this:

    and this:

    And both times the source comes out like this:

    Although I use this same method for both FB and Twitter without issues.

    Thanks!

  4. I’m not going to use in my site.
    Lets see what others thing.

  5. Nevermind, I got it. I forgot the expr:

    Like this:

  6. better result in google.. thanks for sharing

  7. thanks for Google for introducing new +1 button for all bloggers :)

  8. nice widget thanks

  9. Thanx Frank!
    I’ve setup the button for my blog.
    thanx for tut

  10. Today even twitter released the follow button. Happy button day!

  11. I have installed this on wordpress and it works on individual post pages. Could you please tell me how to also make it show up on my home page that has my latest post on it. Thanks

  12. I find the Google Buzz better

  13. Thanks for the code.
    I will add and try it.
    Did they said something about impact on SERPs with +1 ?

  14. this things worked on my blog, thanks a lot mr. rambabu :)

  15. Thanks It worked for me. 😀

  16. Wow.. it’s cool and worked for me..
    Thank you Sir!

  17. yea.thnks a lot !

  18. hey thanx …..at last it worked nd lemme tell u these days its really very important part of search engine thanx for telling

  19. Thank you for your tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *