How to Add Google+ Share Button for Your Posts in Blogger

I do assume now you are much familiar with Google +1 button and it's functionality. But if you are not much into it, I'd like to elaborate. Using Google +1 button, you can recommend content on the web. We call them +1s or recommendations. The +1s made via Google +1 button acts as recommendations for your content and pages. Also those recommendations will be visible for users in Google search results too. Did you install Google +1 button for your posts in Blogger? If not you can implement +1 button by reading Add Google +1 Button for Blogger Posts. When someone clicks on a +1 button appears on your blog post, in addition to increment of recommendations, it prompts to share your post on Google+ too. But what if someone just need to share your post on Google+ without recommending it?

Recommend vs Share

Absolutely your readers can share your posts on Google+ by just copying and pasting corresponding post URL if they wish to share your content. But what if they just wanna share it while they are on your blog? So they have to click on +1 button before they share it on Google+. It's insisting. isn't it? Eventhough user doesn't wanna recommend your content, he has to recommend it if he wanna share it on Google+. But why someone share your content if he's not recommending it? Think of a scenario like this. If someone land on your blog and find a post which he thinks that his friends might find interesting, then he just wanna share it with their friends. Further, you can use your imagination for more examples. So what if someone just wanna share it on Google+? What is your solution?

Sharing is Possible...

Now you don't need to worry about it anymore. Google+ introduces another social plugin for that functionality - Google+ share button. Google+ share button let share content directly to user's Google+ profile without recommending it. Think of Facebook Send button, Twitter Tweet button or LinkedIn Share button. Here it's just the same functionality. Unlike Google +1 button, the shares made via share button won't be visible for public on search. But it will turn into red once after someone shared. However this Google+ share button could be just to rival with popular share buttons like Facebook Send button and Twitter Tweet button. Because I don't think someone who already using +1 button on their blog just wanna add Google+ share button too.

But there could be some opportunities where Google+ share button is more worth than +1 button. For example, in a news or gossip blog, readers would be reluctant to click on +1 button and just wanna share it with friends. So they would love share button just to share interesting stories with their friends. In such a scenario, it would increase traffic for content from Google+. May be people could be love Google+ share button than Facebook send button. Let's see how it goes. As I think it would be more productive, if +1 button and share button can be rendered together using only one code snippet. However we can't predict what Google thinks about it. Anyway, if you'd love to add Google+ share button for your blog posts, here you can learn how.

Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Now navigate to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.

5. Tick on, Expand Widget Templates option.

6. Now add below fast loading asynchronous Google+ Share button script just before the </body> tag.

<script type="text/javascript">
window.___gcfg = {lang: 'en', parsetags: 'onload'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
</script>

Color Indication Information:

   - Language Code

The Default language associated with Google+ share button is English (US). If you prefer to use another available language, find language code from Share Button Language Codes page and replace corresponding value here.


7. Search for the below tag in your template and add one of following button codes just after that, in a new line. There is three type of share buttons categorized by its size. You can either use Standard Share tag or HTML5-valid Share tag.

<data:post.body/>

Notes:

* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.

* You may encounter two search results for <data:post.body/>. Add this code right after the first resulted line of code.

Small

Standard Share Tag

<g:plus action="share" annotation="bubble" height="15" expr:href="data:post.url"></g:plus>

HTML5-valid Share Tag

<div class="g-plus" data-action="share" data-annotation="bubble" data-height="15" expr:data-href="data:post.url"></div>

Medium

Standard Share Tag

<g:plus action="share" annotation="bubble" expr:href="data:post.url"></g:plus>

HTML5-valid Share Tag

<div class="g-plus" data-action="share" data-annotation="bubble" expr:data-href="data:post.url"></div>

Large

Standard Share Tag

<g:plus action="share" annotation="bubble" height="24" expr:href="data:post.url"></g:plus>

HTML5-valid Share Tag

<div class="g-plus" data-action="share" data-annotation="bubble" data-height="24" expr:data-href="data:post.url"></div>

Color Indication Information:

   - Button Annotation

Here you can change annotation of your share button. By default, Google+ share button use bubble annotation. Additionally you can specify inline or no annotation. Select your preferred annotation and specify corresponding value here.

Note: Below annotation styles demonstrated with medium size Google+ share button.

Bubble (Horizontal) Annotation

Annotation Value: bubble


Bubble (Vertical) Annotation

Annotation Value: vertical-bubble

No Annotation

Annotation Value: none


Inline Annotation

Annotation Value: inline

If you are using inline annotation with your share button, it enables you to specify the width for button and inline annotation. Just add width attribute into your share button code as below and specify preferred width in pixels.

Standard Share Tag - <g:plus width="450" ...

HTML5-valid Share Tag - <div class="g-plus" data-width="450" ...

8. Now save your template and check individual posts for Google+ share button.


Enjoy :-)