How to add Google+ Share button to Website / Blog?

Google has finally introduced the official Google+ Share button for websites and blogs. You can grab the button by visiting Google+ Share Plugin page. This Share plugin for Google+ helps you to customize and get code of your Google+ Share button, you can put this code in your website or blog on a desired position to display the Google+ Share button.

I just have added it to this blog (you can check it just at the end of the post in the share buttons) and dug the code a bit for advance usage. This article will help you to put a Google+ Share button to your blogs and websites without installing any additional widgets or plugins.

Adding Google+ Share button on website / Blog

Follow the below given steps to add Google+ Share button to your website or blog:

Google+ Share button for Website

Edit the source code of the page of your site in which you want to put Google+ Share button. Add the below code in the page’s source where you want to show the button:

<div class="g-plus" data-action="share" data-annotation="bubble"></div>
<script type="text/javascript">
  window.___gcfg = {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>

Save the changes.

Google+ Share button for WordPress

Go to your theme directory and open single.php in editing mode. Put the below given code just * above / below <?php the_content(); ?>:

<div class="g-plus" data-action="share" data-href="<?php the_permalink(); ?>" data-annotation="bubble"></div>
<script type="text/javascript">
  window.___gcfg = {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>

Save Changes.

Google+ Share button for Blogger

Log in to you Blogger account and go to Blogger Dashboard » Design » Edit HTML. Find <data:post.body />, paste the following code * above / below it:

<div class="g-plus" data-action="share" expr:data-href='data:post.url' data-annotation="bubble"></div>
<script type="text/javascript">
  window.___gcfg = {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>

Save Template. If it shows error message like:

More than one widget was found with id: Navbar1. Widget IDs should be unique.

Just find Navbar1 (or the id it is showing in the error message) and replace it with Navbar2 (do make sure that a different Navbar2 doesn’t exists in your blogger template).

Google+ Share button for Tumblr

Go to your Tumblr Dashboard » Edit » HTML. Find {blocks:Posts} and paste the following code * above / below it:

<div class="g-plus" data-action="share" expr:data-href="{Permalink}" data-annotation="bubble"></div>
<script type="text/javascript">
  window.___gcfg = {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>

Click Update.

Google+ Share button for Posterous

In your Posterous dashboard, navigate to Manage Spaces » Space Settings » Edit Theme » Advanced, and find <section class=”share”>, add the following code just below it:

<a href="http://plus.google.com/share?url={Permalink}"><img src="https://lh5.googleusercontent.com/-G8IquA6jh_M/T5fAVmNvksI/AAAAAAAAAs0/Ff6G_zBXzWw/s59/techably-gplus-share.png" /></a>

Save the changes. You can see the button in action here.

* above / below: Wherever you want to make it appear either above the post or at the footer of the post.

You can alter the following parameters to customize your Google+ Share button:

Quick Tip: Use Ctrl + F or Command + F to find the code in your browser.

Hope you liked the tutorial. You may also follow TechAbly at Google+.