How to Add Google+ Share Button to Blogspot/Blogger Posts and Pages?

4

Google+ is no more online.

Google+ has introduced a share button which is more user friendly and easiest way to share your site content on Google+. Google+ share button is different from Google +1 button because Google +1 button just only for +1 and share button is to increase your content sharing on Google+. Like Google +1 button Google+ share button is available in four annotations: 1. None 2. Bubble Horizontal 3. Bubble Vertical 4. Inline. It is also available in three different sizes: 1. Small 2. Medium 3. Large.

Well, you can easily get a Google+ share button from the official page.
Google+ Share button Official Page: https://developers.google.com/+/web/share/

Button Annotations
Google+ share button annotations

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 button shares home page, not the posts. So in this article, I will cover how to add a Google+ share 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:

Default Google+ share button code:

<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation="bubble"></div>

Modified Google+ share button code:

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

Above highlighted part is added to work code as per our objective of this article.

How to insert this modified button code to Blogger template?

  1. Go to Blogger Dashboard › Select blog › Switch to Template tab › Edit HTML › Check Expand widget template
  2. Now search template for <data:post.body/>
  3. If you want to place Google+ share button above post then insert the code above <data:post.body/> or if you want to place Google+ share button below post then insert the code below <data:post.body/>
  4. Save the template 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 template

Conclusion:

After a pretty exercise on Google+ share button code and template customization, you get a Google+ share button on your blog for post and pages.

4 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.