Add Google +1 Button To Blogger | SEO Benefits for Google+ Button

Description: Simple tutorial to add Google+ or +1 Button to Blogger Posts. When someone +1's your post, it would be a Google+ recommendation for their Google connections.

You would be familiar with Google+ button, if you are a Blogger. Have you created a new blog on Blogger platform? If yes, you don't need to search for adding Google +1 button to your blog. You can add plus one button by going to 'Layout -> Add a Gadget -> +1 Button' inside your Blogger dashboard. You may also add +1 button to each post inside your Blogger by going to  'Layout -> Blog Posts -> Edit -> Show share buttons -> Save'. You may also add Official Google+ badge to Blogger with your 'Add Gadget' option.

However, if you add your button by the gadget option, you are limited. You can not add your +1 button inside post on different places or header navigation menu, since you don't have the button snippet. If you have a code snippet for a thing, you can add it to your Blogger source code to display the thing anywhere on your blog. We will use Google+ button snippet to display it anywhere on our blog.

adding google+ button to blogger

Related Articles:

What are SEO Advantages for Google +1 Button?

The more +1's your post received, the more recommendations your post have. Let a user named 'Julia' visit a post on your blog and +1'd this. Now, one of her Google+ connection searches the same topic 'Search Plus Your World' would be activated on the search, and the post +1'd by Julia would be appear to her connections.

It doesn't mean that the more +1's your post have, the more higher rank getting on the search results. It is basically a recommendation by Google+ connections. You can read more about its SEO advantages to use +1 button which has already been written on Mashable.

Who Can See My Google +1's Recommendation in the Google Search

Basically your +1's are public. Google will look at your social connections and determine who will get the most benefits from your +1's and which +1's might be useful for you. Your social connections including,

  • Users in your Gmail chat list
  • Users in your Gtalk chat list
  • Users in your My Contacts group in Google Contacts
  • Users you are following in Google Reader.
  • Users you are following in Google Buzz
So the Users who connect with you by any of above methods, can see your +1's in the Google search and similarly if you want to see +1's of any specific person then add them to any of the above services.

*** Viewing +1's by your connections doesn't imply they will also view your +1's.

***You might view +1's from the peoples you don't know (because it doesn't means that their recommendation are not valuable). Similarly, your +1's may be shown by the persons who are outside from your social connections.

Add Google Plus One, +1 Button To Blogger in Every Post Pages

  1. Go to your Blogger Dashboard --> Select your Blog --> Template --> Edit HTML --> Click anywhere on the source code,  press Ctrl + F to find </head> code. Paste the following code above to </head>.

    <script src="" async defer></script>

    If you have already installed this JavaScript to your blog before, you don't need add this again into your Blogger source code.
  2. Choose any one code of the following code 1.0 that you want to display in your Blogger posts. You may look over the preview of each code into following table.

    Code 1.0Preview
    <div class="g-plusone"></div>
    <div class="g-plusone" data-size="small"></div>
    <div class="g-plusone" data-size="medium"></div>
    <div class="g-plusone" data-size="tall"></div>

    For inline style, you may add additional attribute to the above code data-annotation="inline" and for simple button without counting plus one you may add data-annotation="none".
  3. Once you have chosen your code from code 1.0,  display it to your Blogger posts by going to Blogger Dashboard --> Select your Blog --> Template --> Edit HTML --> Click anywhere on the source code,  press Ctrl + F to find <data:post.body/> code. Skip the first <data:post.body/> code, since it is used for the mobile template. Once you find <data:post.body/> code second time into your Blogger source code, paste code 1.0 above to <data:post.body/> code for displaying plus one button below to title or paste code 1.0 below to <data:post.body/> code for displaying your Google+ button at the end of your content.

    * If you are using automatic read more option for your custom Blogger templates, you might find <data:post.body/> code more than two times so paste your code 1.0 for each one, and look which one is work for you. Once you find out the correct one, save your template.

    *You can paste your Code 1.0 anywhere inside your Blogger including your sidebar gadgets.


If you have a blog, you should add Google+ button. It is also recommended by many bloggers including me. Visitors find the easiest way to share your posts they don't want to like to share your posts by going to visit their social sites manually. If you have installed a plus one button to your blog, visitors have an ability to recommend your post to their social connections easily. If you would like more easy tips, you may feel free to subscribe us via your email. If you like this post, you may recommend it to your social connections by +1'd this post.

    Like Us on Social Media
    Share this article
    Copyright © 2015 • All Rights Reserved.
    Powered by Blogger
    back to top