So, you want to add Google’s new +1 button to your Genesis Framework powered WordPress site? No problem, it’s an easy process to get it to show on any page you’d like.
The example below will illustrate how I’ve added +1 buttons onto my own personal site, along with instructions for a few other cases where you may want to use the button.
Full tutorial below the jump.
To start with, you’ll need to get the script from Google, and identify what kind of button you want to add. Head on over to Google’s dedicated +1 button page and have a look at the different button styles. Do you want a tall one or a small one? Do you want to show the count or just the button? These decisions will effect how the button looks on your page, so it’s worth spending a bit of time to think about the best button style to use. Remember, you can always change the button if you don’t like it, or if it’s not performing well for you.
To start with, you’ll need to add the script below to your site.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
This can be added in your site’s head, or just before the closing body tag. If you want to know how to add this script to your site, please read my tutorial on Genesis Framework — Adding a Conditional Script.
With the script in place, you can now add the button to your site.
I wanted the button to show on my main blog page, along with the individual post page. To do this, I added the following to my functions.php file.
add_action('genesis_post_title', 'jacques_plus_one');
function jacques_plus_one()
{
if ( is_page() )
return; // don't show +1 on pages
?> <div class="plusone"><g:plusone href="<?php the_permalink() ?>"></g:plusone></div>
<?php }
Deconstructing that, what I’m doing is creating a new action, called “jacques_plus_one”. This new action is being hooked onto the “genesis_post_title” hook, after the title has already been output. The button is then told that if it’s currently on a page, don’t show the button, otherwise show it.
You’ll also notice that I’ve added a custom href attribute to the button, which means that the correct post link is being added to the button. If that was removed, the button would default to being for the current page it’s being displayed on. Useful if you’re only showing it on single post templates, not so useful when you want to show it on an archive or a main blog page.
Finally, you’ll want to apply some styling to the button to get it to display exactly as you want to. I’ve added my button inside a div with a class of “plusone”, which allows me to style it in my stylesheet. I’ve used the style below, but you can do whatever you want with it.
.plusone {
float:right;
margin:-50px 0;
}
You can see a screenshot of the final product below:
I hope that’s helped. If you’ve got any questions or suggestions about this particular tutorial, please feel free to leave a comment below.
