Add Google +1 (Plus One) Button To Blogger Posts or Websites

What is Google +1 button and How to add Google +1 button to your blogger or Website

    

    

Google provides Google +1 button to publicly recommend the content of any website by its visitors to their circles.If you are implementing Google +1 button for blogger by adding Gadget then it is limited for your blogger and not available for your post. Adding Google +1 button to your post level is also pretty easy if you follow the below steps.

SEO Benefits of Google +1 Button

Google +1 button provides great benefits in terms of SEO, By adding Google +1 button you are allow you users to recommend your blog post to their Circles and get more traffic to your blogger or site.

Add Google +1 Button for every Post in Blogger or Website

Step: 1

First of all you need to add a JavaScript tag in your head or just before your close body tag. Blogger users you can skip this step

<script src="https://apis.google.com/js/platform.js" async defer></script>

Step: 2

Blogger users if you want this Google +1 Button for every post follow below steps:

1. Log-in to your blogger account and click on Theme tab from your left panel and click on Edit HTML button 

   

   Edit HTML for Blogger



2. Click inside code editor and press Ctrl+F and Search for the below text

   <data:post.body/>
   

   

   Example for Adding Google+1 Code in Blogger

   
   
3. For Blogger to display Google+1 button to end of the post, add one of the below tag just after the code you searched. For Website to add Google +1 button simply add the below one of the tag where you want the Google +1 button to be rendered.

Google +1 Button Code	Preview
<div class="g-plusone" data-size="small"></div>
<div class="g-plusone"></div>
<div class="g-plusone" data-size="tall"></div>
<div class="g-plusone" data-size="small" data-annotation="inline" data-width="300"></div>
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300"></div>
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
<div class="g-plusone" data-size="tall" data-annotation="inline" data-width="300"></div>
<div class="g-plusone" data-annotation="none"></div> <!-- You can add 'data-size' attribute according to your need ->

You are all done with Google +1 (Google Plus One) button for website or Blogger Post. Let me know if you have any questions or suggestions.

SHARE