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

Google+ is no more online.

Google+ has introduced a share button, which is a more user-friendly and easiest way to share your site content on Google+. Google+ share button is different from the Google +1 button because the Google +1 button just only for +1 and share button is to increase your content sharing on Google+. Like the 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 the 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'/>

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 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 the 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 posts and pages.

4 thoughts on “How to Add Google+ Share Button on Posts and Pages? – Blogspot/Blogger Tutorial”

Leave a Comment

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