How to Add Google +1 Button to Your Blogger Blog

Wednesday, March 14, 2012 Stef dela Cruz 5 Comments

If you want to add a Google +1 button to your Blogger blog, the walkthrough below shall make it super easy for you! Get Google to notice your Blogspot blog by adding a Google+1 button to your blog, pronto.

There are two ways to add Google Plus One buttons to your Blogger blog: via the official sharing buttons (which includes a whole bunch of sharing buttons: +1 button, Twitter button, Facebook button, and email button), OR by adding just the Google button alone. The first option is usually found in a separate box right UNDER (or ABOVE) your blog post, while the second option can float anywhere INSIDE the body of your blog post. Actually, you can add BOTH.

Add Official Sharing Buttons
(First Option)

  1. Do you want to use the official sharing buttons used by Blogger? Yes, you have that option on your Blogger dashboard. Log on to Blogger, then click on the Design tab. On the lower right side of the Blog Posts widget, click the Edit button. A pop-up window will appear (so pop-up windows should be enabled in your blog post). Click on the box right beside this option: Show Share Buttons.Show Share Buttons
  2. No Google+1 button showing up yet? Don’t sweat it just yet. Maybe you’re using a template that didn’t come from blogger, or you’ve modified your old blogger template. To fix this, click on the Design tab, then click on the Edit HTML option. (Before proceeding, please Download Full Template first, just in case something goes wrong later.) Check the box right beside the Expand Widget Templates option. Then, look for this short code (you can use CTRL+F as a short cut for “finding” this code).

    <p class='post-footer-line post-footer-line-3'>

    If the above code is not in your HTML, try looking for this one:
    <div class='post-footer-line post-footer-line-3'>

    If that’s still not in your code, try looking for this instead:
    <data:post.body/>

    Then, right BELOW any of the above codes (whatever you found in your blog), paste this code
    <div class='post-share-buttons'>
    <b:include data='post' name='shareButtons'/>
    </div>


    Then, save your template.

  3. Is the Google+1 button still not visible on your Blogger blog? No worries, proceed with the next steps. Find this code on your HTML (remember to use the shortcut CTRL+F).
    <b:includable id='shareButtons' var='post'>

    Delete the code above and everything below it until the FIRST occurrence of the code below.
    </b:includable>

    Delete the above code as well, okay? That means you have to delete an entire block which starts from <b:includable…> and ends at </b:includable>.

  4. In the place of the code you just deleted, copy and paste the code below:
    <b:includable id='shareButtons' var='post'> <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'> <span class='share-button-link-text'><data:top.emailThisMsg/></span> </a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'> <span class='share-button-link-text'><data:top.blogThisMsg/></span> </a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span> </a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span> </a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span> </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'> <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span> </a></b:if> <b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div> </b:if> </b:includable>
  5. Now, let’s see if that fixes everything. Save your template. Now, check if you can see the Google +1 button on your blog. If it’s still not showing, follow the next few steps.
  6. Find this code:
    </head>

    then, right above that code, copy and paste this code:
    <script src='https://apis.google.com/js/plusone.js'/>

    and don’t forget to save the changes to your blog template once again. Check the Plus One button on your Blogger blog. Is it there already? Success! But you can add ANOTHER Plus One button on your blog – and this button will make a big difference because it is more visible. Read more to view the guide.

Add Just the Google +1 Button
(Second Option)

So, you’ve already added the entire block of sharing buttons above, but you want another pretty Google+1 button somewhere else in your post. Or maybe you want to skip the first option altogether and want to add a dainty and very visible +1 button on your Blogger blog posts. Sure, no problem; just follow the steps below.

Customize your Google +1 button based on the following options:

Google+1 Button ABOVE Blog Post

On your Dashboard, click the Design tab, then click on the Edit HTML option. Then, check the box beside the Expand Widget Templates option. Find </head> and right above it, copy and paste this code:

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


Then, find <data:post.body/> and right above that, copy and paste this code:

<div>
<g:plusone size="tall" expr:href="data:post.canonicalUrl"/>
</div>


Don’t forget to save the changes to your Blogger template.


Google+1 Button BELOW Blog Post


On your Dashboard, click the Design tab, then click on the Edit HTML option. Then, check the box beside the Expand Widget Templates option. Find </head> and right above it, copy and paste this code:

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


Then, find <data:post.body/> and right below that, copy and paste this code:

<div>
<g:plusone size="tall" expr:href="data:post.canonicalUrl"/>
</div>


Don’t forget to save the changes to your Blogger template.


And you are done! Save the changes to your Blogger blog template. Now, check if the Google +1 button appears in your blog.


Yes! Finally, you have a Google +1 button on your Blogger blog (or maybe you have TWO +1 buttons, if you followed the steps above to the letter). If this guide worked for you, then you wouldn’t mind clicking on my +1 button, would you? Winking smile And don’t forget to BOOKMARK this blog post, in case you want Google +1 buttons for your future blogs!

Stef dela CruzAbout the blogger
Stef dela Cruz is a doctor and writer. She received the 2013 Award for Health Media from the Department of Health. She maintains a health column in Health.Care Magazine and contributes to The Manila Bulletin. Add her to your circles.

5 comments:

  1. this actually works Stef!!! super galing. i have been wanting to have a G+ button to join but the tutorial was so confusing!! yours is very well done. it allows blogger to install depending on his/her blog.like with me i have the share buttons but just not showing bec of the templates that i modified! so i chose to the big button G+ which is so easy!! thank you so much!i will keep tab!!

    ReplyDelete
  2. Thanks, Mhe-Anne! I try my best. I'm glad I was able to help at least one fellow blogger! :)

    ReplyDelete
  3. maraming salamat sa iyo...nagawa ko na....exchange link tayo..

    ReplyDelete
  4. You're welcome! I hope your Google +1 button is working now. :)

    ReplyDelete

Get Email Updates! (You don't wanna miss out, yes?)