Adding Google’s +1 Button To genesis

by ryan




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.

Sponsored




To start with, you’ll need to add the script below to your site.


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.

genesis-google-plusone

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

?>

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:

adding-google-plus-button-genesis

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.




Previous post:

Next post: