How to add a Google +1 button

wordpress tutorial – google plus one and thesis

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:
Google Plus 1 Button Code

Thesis Additional ScriptsAs 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.

Google +1 custom_functions

This is an image, if you want the actual code to copy, email me

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?

Cheers…

{ 4 comments… add one }

Leave a Comment

  • Andy Dill September 13, 2012, 5:51 pm

    Thank you for this! I’ve been looking for a while for a way to figure out how to add a Google Plus button to the custom wordpress website I’m trying to build. This has been very helpful.

    Reply
    • Jeb September 15, 2012, 3:57 pm

      Glad it helped Andy, thanks for saying so. Cheers…

      Reply
  • Grant September 18, 2012, 1:30 pm

    Hey, thanks a ton. I would also like it on individual pages. Thoughts?

    Reply
    • Jeb September 19, 2012, 8:31 pm

      Hey Grant,
      Sure, easy breezy. Where you see “if (is_single() | is_home()) { ?>”, you need to add a “is_page()” in there too. So it would look like this:

      if (is_single() | is_page() | is_home()) { ?>

      The is_single puts it on individual posts. The is_page puts it on individual pages, and the is_home puts it on the blog index page (even if that blog index page isn’t the front page - so, for example, let’s say you had a static welcome page as your home page, and a tab that said ‘blog’. In that case, the blog index page would exist at http://www.yoururl.com/blog, and THAT is what is affected by the is_home. And taking that example one step further, if you then wanted to employ some php to affect your front page (what we usually call our ‘home’ page), then you would use the is_front_page() conditional tag.

      Hope that helps. Holler if I’ve confused you. Cheers…

      Reply