Google +1 Buttons

Last week I added some Google +1 buttons to my site, which you should see at the bottom of this post and at the bottom of my other pages. Rather than using a WordPress plugin, I decided to use a DIY approach, basically because no plugin would be able to integrate with my theme and produce the look I wanted. The plugins I looked at basically just put a button either before or after the text that makes up a post, which, because my theme has various sharing options at the bottom of each post anyway, looked out-of-place. So I started reading Google’s information about the button, and then some of the WordPress documentation, so I could do it myself, properly.

To make my custom solution I first had to edit my functions.php file, adding the following code which makes the required JavaScript file load on each page:

function my_theme_plusone_init(){
	if (!is_admin()){
		wp_register_script( 'plusone', 'http://apis.google.com/js/plusone.js', array(), false, true);
		wp_enqueue_script( 'plusone' );
	}
}

add_action('init', 'my_theme_plusone_init');

With this code in place, the necessary <script> tag for Google’s plusone.js file is placed just before the </body> tag on all my site’s non-admin pages. To get the actual button to appear I then had to place: <g:plusone></g:plusone> in several of my site’s template files where I wanted them to be. This was the tricky part and took quite a while for me to get right, with lots of fine tuning and some trial and error required.

The specific HTML and CSS needed to do this will be different for each site, but in my particular case, I spent a few hours messing around with one of my page templates, and doing stuff on the fly with Firebug, and eventually got a solution that looked perfect in Firefox. But when I tested the page in Chrome it was misaligned! So I did it all over again in a different way, and got something that looked the same in both Firefox and Chrome. As those are the only two browsers I have installed, I’ve just had to assume it works right elsewhere (Which is, of course, a dangerous thing to do, but you can’t install IE on Ubuntu!). What I did was place the <g:plusone> tag inside two <span> tags, the first one aligning the button horizontally and the second vertically:

<span class="my-google-plus"><span style="vertical-align: -16%"><g:plusone size="small" count="false" href="' . get_permalink() . '"></g:plusone></span></span>

This code requires a bit of explanation. I’ve added some options to the <g:plusone> tag so I get the small-sized button and no count indicator, which means it’s a fixed size and much easier to position. I have also passed it the URL of the post or page to +1 using WordPress’ get_permalink() function. (Note that for get_permalink() to work properly it needs to be used “In The Loop”).

The my-google-plus CSS of the outer <span> just emulates the look of the other things on the “Share this on:” row:

span.my-google-plus {
	display: inline-block;
	height: 24px;
	padding: 3px 10px;
	border-right: 1px solid #EEEEEE;
}

The button is then positioned vertically with the inner <span> tag’s style="vertical-align: -16%" property, which moves it down a bit. I got to the -16% value via trial and error with Firebug, it seems to look “right”. I could also have used -##px to move it by so many pixels rather than using a percentage, the end result would have been the same.

I’m pretty happy with the way it’s turned out, as I’ve got a level of integration with my site that would be impossible for a generic plugin to emulate, which is more than worth the extra time it took to set up. Remember though, as I said earlier, every site will be different, and I’ve put this here more as a starting point than as a guide; copying and pasting what I’ve put here straight into your own site almost certainly won’t work!