How to Add Google +1 Bubble Button to Posts and Pages? – Blogspot/Blogger Tutorial

Google+ is shut down!

Google Blogger has introduced the Google +1 button but only inline. You can’t choose Google +1 bubble button for Blogger posts and pages. If you want to use the Google +1 button on your blog, you should add the Google +1 bubble button by yourself.

Bubble Google +1 button is available in two formats –
1. Bubble Horizontal
2. Bubble Vertical.

It is also available in four different sizes –
1. Small
2. Medium
3. Standard
4. Tall

You can quickly get the Google +1 button from the official page.

Google plus button

Google+ Share button Official Page: https://developers.google.com/+/web/+1button/

Google +1 Bubble Buttons
Google +1 Bubble Buttons

But when you add this button to your blog or site on Blogger and have more than one post on the home page, this +1 button +1 shares the home page, not the posts. So in this article, I will cover how to add a Google +1 button on Blogger blogs, which will be valid for each post, not only to the home page. For this purpose, we’ll modify the default Google+ share button code. So let’s proceed to modification:

1. Bubble Horizontal – Default Google +1 button code (of medium size):

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>

Bubble Horizontal – Modified Google+ share button code (of medium size):

<!-- Place this tag where you want the share button to render. -->
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>

2. Bubble Vertical – Default Google +1 button code (of tall size):

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall"></div>

Bubble Vertical—Modified Google+ share button code (of tall size):

<!-- Place this tag where you want the share button to render. -->
<div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/>

The above-highlighted part is added to the working code as per our objective of this article.

How to Insert the Modified Button Code to the Blogger Theme?

  1. Go to Blogger Dashboard › Select blog › Switch to Theme tab › Edit HTML › Check Expand widget theme.
  2. Now search theme for <data:post.body/>
  3. If you want to place Google +1 button above post then insert code above <data:post.body/> or if you want to place Google +1 button below post then insert code below <data:post.body/>
  4. Save the theme changes › Done.

Note: You have to add the JavaScript given below under <head> if you are not using it.

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

› Another important thing –
Learn how to edit the Blogger theme

Conclusion

After a pretty exercise on Google +1 button code and theme customization, you get a Google +1 button on your blog for posts and pages.

2 thoughts on “How to Add Google +1 Bubble Button to Posts and Pages? – Blogspot/Blogger Tutorial”

Leave a Comment

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