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 –
You can quickly get the Google +1 button from the official page.
Google+ Share button Official Page: https://developers.google.com/+/web/+1button/
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?
- Go to Blogger Dashboard › Select blog › Switch to Theme tab › Edit HTML › Check Expand widget theme.
- Now search theme for <data:post.body/>
- 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/>
- Save the theme changes › Done.
› Another important thing –
› Learn how to edit the Blogger theme
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”
Great work done dear, nice article