Add Google+1 button to your Website / Blog

Google+1 button can generally be seen on blogs, websites, Google ads and Google search results to provide votes or thumbs up to the content entities. If you are a blogger or webmaster, Google+1 button allows your audience to vote and recommend your content publicly on Google and Google+.

Google+1 is the way to vote up the Google search results just like we do in digg, stumbleupon. You may call it Google’s version of like button (just like the Facebook like button). You can +1 and undo +1 any content on web anytime with the Google+1 button.

With the Google+1, if you find the results you searched on Google good and helpful, you should hit +1. Collectively, your and other researchers’ recommendation to the results will help other people in your Google+ circles who make search with the same or similar query to figure out the best results for the query.

This post is all about adding a Google+1 button to your website or blog to increase your visibility on Google+.

Adding Google+1 button on website / Blog

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

Google+1 button for Website

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

<div class="g-plusone" data-annotation="bubble" data-size="medium"></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+1 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-plusone" data-href="<?php the_permalink(); ?>" data-annotation="bubble" data-size="medium"></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+1 button for Blogger

Log in to you Blogger account and go to Blogger Dashboard » Design » Edit HTML. Click "Expand Widget Templates" textbox. Find <b:includable id='shareButtons' var='post'>, paste the following code just below it:

<div class="g-plusone" expr:data-href='data:post.url' data-annotation="bubble" data-size="medium"></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 (it could also be Navbar2 or Navbar3, just find the same it has reflected in the warning) and replace it with Navbar2 (or a different one like Navbar3 or Navbar4). If it says Warning: Your new template does not include the following widgets:…, just click the "Keep Widgets" button. That’s it.

Google+1 button for Tumblr

Go to your Tumblr Dashboard » Edit » HTML. Find {/block:Regular} and paste the following code just above it:

<div class="g-plusone" expr:data-href="{Permalink}" data-annotation="bubble" data-size="medium"></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+1 button for Posterous

Currently, Posterous platform do not support adding external scripts in it’s core files. Since, Google+1 button requires additional JavaScript files to act dynamically, adding a static Google+1 button will be of no use. Stay tuned for any official addition for Google+ button for posterous.

* 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+1 button:

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

Also see Educational Social Media Graphics.