I recently wrote a tutorial about putting Fixed Position Social Media Icons on your WordPress website, but since Google Plus seems to be a very popular request of late, I thought I would write a quick, detailed tutorial on exactly how to get just a Google +1 button on your site without using a plugin.
As usual, these instructions involve the Thesis Theme for WordPress, so if you’re not using Thesis, you’re going to have to modify these directions a bit (or you could buy the Thesis Theme).
Before we begin, though, to check out what a Google +1 button looks like, you can head on over to this test site. You’ll see it on the main/home/blog page as well as on the individual blog pages if you click through to one.
Get your Google +1 button code
First, click on over to Google’s tool to produce the code you’re going to need. Once there, specify the size of the icon you want. Standard (24px) is probably fine, but whatever you like. Next, choose your language from the drop down.
If you’re really motivated, you can click on the Advanced Options link, but it’ snot necessary. The main thing there is you can choose to either have it list the count or not (that is, how many people have +1’d your post). Other than that option, I wouldn’t mess with the advanced options.
Below all the options you’ll see the code window that you’ll need to cut and paste. Here’s how it will look:
As you can see from my fancy markup, there are 2 different pieces to this. The first piece (#1) should be highlighted and copied first. Once you have it on your clipboard, go to the Thesis>Site Options menu. From that page, click on the + next to the Additional Scripts item in the left column. Paste that first bit of code in the field that opens up. Hit the Big Save Button and we’re on to the next step.
Go back to the Google code page and this time, have a look at that second piece of code (#2). Don’t copy it, I just wanted you to be aware that it’s going to be part of the next bit of code you’re going to be putting on your site (below). The *only* thing you might have to change is the code that sets the size of the button. If you used anything but the standard size, you’ll need to add size=”small”, size=”medium” or size=”tall”, right after the ‘count=”false”‘ (if you chose to list the count, then you’ll actually want to remove the count=”false”, as that says ‘don’t include the count”). Otherwise, though, just use the below code as is.
Okay, so take the below code (click on it to enlarge it). This is what needs to be input per the below.
Now, go to your Thesis>Custom File Editor menu. From the drop down at the top, choose the custom_functions.php file and click on the “Edit” button to the right of it. Scroll down to the bottom of that file, hit enter/return a couple times and put that code in. Hit the Big Save Button and you’re done.
Google +1 Options
Couple things you might want to be aware of with the above code.
- The “if (is_single() | is_home())” is what tells Thesis to put it on single posts and the main blog page. If you want it to appear on your regular pages as well, hit me up and I’ll help you out.
- The ‘thesis_hook_post_box_bottom’ is what tells Thesis to put the button at the bottom of each post. You can change this to any hook you want, meaning, Thesis lets you easily change the position of that Google +1 button. Check out the Thesis Hook Reference to see your options.
- And as with most things, the Google +1 button can be styled using the custom.css file (Thesis>Custom File Editor menu), which means you can change alignment or placement, etc.
As always, if any of the above confused you, or if you have some follow up questions about anything, leave a comment or reach out some other way and I’ll gladly assist. Oh, and if you’re so moved, how about a Like and/or a +1 for me, eh?