Genesis Framework — Adding Google’s +1 Button

So, you want to add Google’s new +1 but­ton to your Gen­e­sis Frame­work pow­ered Word­Press site? No prob­lem, it’s an easy process to get it to show on any page you’d like.

Genesis Framework Google +1 Button

 

The exam­ple below will illus­trate how I’ve added +1 but­tons onto my own per­sonal site, along with instruc­tions for a few other cases where you may want to use the button.

Full tuto­r­ial below the jump.

To start with, you’ll need to get the script from Google, and iden­tify what kind of but­ton you want to add. Head on over to Google’s ded­i­cated +1 but­ton page and have a look at the dif­fer­ent but­ton styles. Do you want a tall one or a small one? Do you want to show the count or just the but­ton? These deci­sions will effect how the but­ton looks on your page, so it’s worth spend­ing a bit of time to think about the best but­ton style to use. Remem­ber, you can always change the but­ton if you don’t like it, or if it’s not per­form­ing 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 clos­ing body tag. If you want to know how to add this script to your site, please read my tuto­r­ial on Gen­e­sis Frame­work — Adding a Con­di­tional Script.

Your ads will be inserted here by

Easy AdSense.

Please go to the plu­gin admin page to
Paste your ad code OR
Sup­press this ad slot OR
Sup­press Place­ment Boxes.

With the script in place, you can now add the but­ton to your site.

I wanted the but­ton to show on my main blog page, along with the indi­vid­ual post page. To do this, I added the fol­low­ing 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 }

Decon­struct­ing that, what I’m doing is cre­at­ing 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 out­put. The but­ton is then told that if it’s cur­rently on a page, don’t show the but­ton, oth­er­wise show it.

You’ll also notice that I’ve added a cus­tom href attribute to the but­ton, which means that the cor­rect post link is being added to the but­ton. If that was removed, the but­ton would default to being for the cur­rent page it’s being dis­played on. Use­ful if you’re only show­ing it on sin­gle post tem­plates, not so use­ful when you want to show it on an archive or a main blog page.

Finally, you’ll want to apply some styling to the but­ton to get it to dis­play exactly as you want to. I’ve added my but­ton inside a div with a class of “plu­sone”, which allows me to style it in my stylesheet. I’ve used the style below, but you can do what­ever you want with it.

.plusone {
float:right;
margin:-50px 0;
}

You can see a screen­shot of the final prod­uct below:

Google +1 Genesis Theme

 

I hope that’s helped. If you’ve got any ques­tions or sug­ges­tions about this par­tic­u­lar tuto­r­ial, please feel free to leave a com­ment below.

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>