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

2

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, then you should have to add 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

Well, you can easily get the Google +1 button from the official page.

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 that is on Blogger and have more than one post on the home page, then this +1 button +1 or shares 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. Let 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 this 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 javascript give 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 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 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.