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+ 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.
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.
Great work done dear, nice article
thanks dear