Adding Google's +1 Button to a Twenty Ten Child Theme

Google recently let their +1 button loose upon the masses. I figured it wouldn’t be too hard to implement it here on VoodooPress. We already have everything in place that we need. If you followed along with this tutorial you are already all set up too! If not, check it out. You don’t need to do exactly what we did there, just follow along with the concept. We’re just going to insert the +1 button into the code to display it at the bottom of our posts.

The first thing we need in place is the proper code running in the header of our site to get the +1 button running. Now back in the day we would just plop the code right into our header and be done with it. But there are better ways to do this! Here’s a bit of code for properly enqueueing the script. You can put this into your functions.php, but a better idea is to put it into your functionality plugin. It’s a great idea if you haven’t done it yet to set up your functionality plugin. This is one of those bits of code that I’m going to want running on my site no matter what theme I’m using. Anything like that goes into the plugin.

add_action ('wp_enqueue_scripts','google_plusone_script');

function google_plusone_script() {
	wp_enqueue_script('google-plusone', 'https://apis.google.com/js/plusone.js', array(), null);
}

So now that we have our header code in place, we need to display the button. I want mine down at the bottom of the single view, along with the FaceBook Like and Twitter Tweet buttons. The basic code for you to work with is this:

<g:plusone href="<?php echo get_permalink(); ?>"></g:plusone>

Now you can do whatever you like with that. But here’s what I did, in the context of this post. I just dropped the Google +1 code in there like this:

// FUNCTION TO ADD IN STC TWITTER AND SFC FACEBOOK BUTTONS
if ( ! function_exists( 'voodoo_social_buttons' ) ) :
function voodoo_social_buttons() { ?>
	<?php if(function_exists('sfc_like_button')) : ?>
		<div class="socialStuff">
		<?php sfc_like_button(array('layout' => 'button_count')); ?>
		</div>
	<?php endif; ?>
	<?php if(function_exists('stc_tweetbutton')) : ?>
		<div class="socialStuff">
		<?php stc_tweetbutton(); ?>
		</div>
	<?php endif; ?>
	<div class="socialStuff">
		<g:plusone href="<?php echo get_permalink(); ?>"></g:plusone>
	</div>
	<div class="clear"></div>
<?php }
endif;

So that adds the +1 button in with the SFC and STC buttons. It’s all in one function, which we call in by overwriting the twentyten_posted_in function as seen in the above linked tutorial. Whether or not you put the above in your functions.php or in your functionality plugin is up to you. I think the above goes best in the functionality plugin. It’s not theme specific. I want it in any theme. Now the twentyten_posted_in portion obviously wouldn’t go in your functionality plugin. That display portion is theme specific. When WP gets upgraded, and I switch over to twenty eleven on VoodooPress, I’ll have to figure out how to call my voodoo_social_buttons function again.

The final thing I did was edit my css. I had originally wrapped each of the buttons in it’s own class. I realized that was a bit unneccessary. Here is my new css which covers displaying the above perfectly.

.clear {
	clear: both;
}
.socialButtons {
	margin-top: 10px;
}
.socialStuff {
	float:left;
	height:35px;
	width:30%;
	overflow:hidden;
}

That covers it. All the buttons are nicely spaced out in a row under my posts. And that’s it! This is probably the last twentyten tutorial I’m going to have on here. I will be releasing my VoodooChild 2010 theme, and the associated functionality plugin real soon for you all to download and pick apart. I’m going to be preparing VoodooPress for the release of WP 3.2 by preparing my VoodooChild 2011 theme. We will revisit a lot of the tutorials on here by showing how to re-integrate what we’ve done with the new theme. If you have taken the time to properly develop a nice functionality plugin, things should be simple to change over!

Leave a Reply