google+1

Add Multiple Google +1 Buttons to WordPress

It’s recently been announced that the number of +1’s your site receives might affect your Google page rank so it’s worth having a Google +1 button on your site.

The obvious way to add a single Google +1 button is to just use a WordPress Google +1 plugin but what if you want to keep plugin numbers down for performance reasons or want to add multiple instances of Google +1 to your site, all promoting different url’s, ie – one at the top of your home page for your main site url and one on individual blog posts? Well this is what I needed to do and found it wasn’t that easy! Here’s how I managed it:

Go to www.google.com/webmasters/+1/button and grab your button code, making sure to enter a target url for your main site, then paste it into your site template, taking care to paste the right bits in the right places. The following goes in your header.php file in the <head> section:

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  window.___gcfg = {lang: 'en-GB'};

  (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>

And the following goes wherever you want the button to show, typically inside the header.php file somewhere after the opening <body> tag:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline" href="http://www.reverbstudios.ie"></g:plusone>

Now, if you wanted to also have a button on each blog post, to specifically target that blog post url, you need to paste the above code into your single.php template file, somewhere inside the loop but this time change the url to “<?php the_permalink(); ?>”, ie:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline" href="<?php the_permalink(); ?>"></g:plusone>

What this does is automatically grab the post url of the post your’re currently reading and allows it to be +1’d!

See the top left of this site and the share section just below this blog post’s title to see both buttons in action.

Leon

Published by

Leon Quinn

Multimedia Design company in Leitrim, Ireland specializing in WordPress Website Design, Photoshop and Graphics. www.reverbstudios.ie

2 thoughts on “Add Multiple Google +1 Buttons to WordPress”

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.