April 25, 2012

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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Mason disick said...

old g+ button is better than new released button.

Adrienne Smith said...

Well aren't you becoming quite the helper here Mayura. Don't you love learning new things and then sharing it with your readers? There are plenty of people who would like to learn the same things you have and you are very generous sharing this information with them.

I'm not familiar with blogger blogs anymore so I have no doubt if I run across some people still using this platform that I'll point them in your direction.

Great job Mayura...

~Adrienne

Mayura De Silva said...

Absolutely, You're right :) That's the intention of mine here. I just dedicated this blog for topics such as Blogger, Social Media and Web related topics to improve their blogging and web experience. So I'm always aligned to those topics dear :)

Really I'm learning more stuff except for these topics. I think that's what you meant by "Learning new things" :) I get it. But this is what I'm really good at dear :) I like to fix things up. So when someone come find me here for help, I'm enjoying it by helping them. Sincerely, I just wanna help out people in need.

I'm always manage not to cross the line and mix things up in this blog with external topics as I need dear. This blog is manage by me, but not for me anymore. I just wanna make this one a pure resource with complete relevancy :) The new stuff I find and learn, related to topics I cover here, will always get posted. That's my style ;)

Thanks for your admiration dear :) Always loved to.

Cheers...

Unknown said...

Thank you, very useful, very clear

Mayura De Silva said...

Ya Mason :) I agree with you. But some people may find this useful as it just help readers to share posts to Google+ without recommending it. However it needs more improvements. Let's see how Google encourage users :)

Cheers...

Mayura De Silva said...

You're welcome mate :) Thanks for stopping by and leaving your compliments.

Cheers...

Sitruc Mak said...

Really helpful tip :)

Mayura De Silva said...

You're welcome Sitruc :) Thanks for commenting...

Cheers...

Serena Lewis said...

Thank you! This was very helpful. :)

Mayura De Silva said...

Hi Serena,


You're welcome :) Glad you could make use of it...


Thanks for commenting...


Cheers...