How to Add the Google +1 Button to Your WordPress Site

Google recently launched their own take on Facebook’s Like button called the +1 button. The idea is to “+1″ sites that you like or found useful so that your friends (and Google) get a good idea of where the best content is.

You will then see pages that your contacts have “+1′d” in your search results, so you can get a good feel for what information your friends have found useful.

Step 1: Load the JavaScript

The code for the Google +1 button is in JavaScript and as we all know, best practice is to load bulky JavaScript files in the footer to help with loading times.

Open up footer.php and find the closing body tag. Then paste the following in the line just above it, like so:

Save your changes and move on to tell WordPress where to display the button.

Step 2: Decide where to put it

You have a few different options for where your +1 button can go, but I’m going to show you the two main options; in your sidebar or in each individual post.

Put it in the sidebar

Putting it in the sidebar is certainly easier and less dangerous if coding scares you. All you need to do is create a new text widget and paste the following into it:

That’s it! Save your changes, refresh your homepage and check out your new +1 button. You can of course add styling (alignment, margins etc.) as your site design requires.

Put it in individual posts

Placing it in individual posts involves a tad more coding, but is still ridiculously easy. Open up your single.php file and decide where you want to put the +1 button (before your post, after it etc.). Once you’ve settled on a location, paste the following code where you want it to appear:

Google provides four sizes for its +1 buttonThe reason this looks slightly different is because we’re specifying the URL that should receive the +1 (the page’s permalink). This can’t be done in the sidebar, because you can’t execute PHP in a widget (without the help of a plugin). It’s not a requirement, but it guarantees that the right URL will be used, rather than hoping the Google will use the right one.

Customise it with options

Using the codes as shown above will provide the Standard size button, but Google has provided three additional sizes that you can choose from (see the image to the right). If you want to use one of these buttons instead, just add one of the variables as shown below:

You can also eliminate the counter for all but the tall buttons if you just want to show the button itself. In order to do this, add the variable count=”false” to your button code. For example:

So, have you installed the Google +1 button yet? Are you even fussed about it, or is it just a fad? Have you seen much of a response from your readers?

9 thoughts on “How to Add the Google +1 Button to Your WordPress Site”

  1. John Winson says:

    Dave, thanks for writing this comprehensive tutorial. According to me this system can be easily abused. Website owners can easily change proxy’s, will vote and rate themselves and can even ask their friends to vote for their site. I really don’t like this system but time will tell how effective this Google+1 button are..

    1. Hi John,

      I personally am a fan of the system. No system can be proofed against asking your friends to vote for your site. Overall though, I think this “abuse” will be negligible when compared to the mass voting by the general public. I think it’s got a lot of potential. It’s no more subject to abuse than the Facebook Like system.

  2. Thanks for breaking out the factors for the +1 button. I have installed it in various places on my two blogs, but I’m not certain yet where the best place is (e.g. in the menu bar, on the sidebar, at the top, etc.).

    I’ll revisit this page if I go for editing my theme, but for now I’m sticking with spots supported by my theme (widgets and menu bar).

    1. You’re welcome. I personally think the best place for such buttons is always the bottom of the post. Once someone has finished reading your post and wants to recommend it, the buttons should be right there for your readers to share your article. I’d definitely recommend digging into your themes and adding the code in there (or using a plugin which will do it for you). Don’t see much point of having it in the sidebar myself.

      1. That’s good logic. I might be able to add it to the bottom without modifying my theme, but I’ll definitely keep an eye on getting it to the bottom of my posts. I need to update what I have at the bottom of my posts – right now I have buttons to link sites like digg, FB, or even post to twitter. However, I’m thinking of making it simpler so there are less choices (just the important ones)

        1. I think 4 or 5 is a good number. There’s a few sites large enough to warrant putting sharing buttons up for them.

  3. David says:

    Can you use +1 on images? Would that have any effect on their ranking on google images if so?

    1. I don’t see why not, as they have a unique URL too. It remains to be seen how the +1 button will have an effect on search engine rankings though. My guess is that it will factor into Google’s algorithm as it helps them understand what people consider to be the best content on the web.

  4. Krzysztof says:

    I agree with Dave Clements ” Google’s algorithm as it helps them understand what people consider to be the best content on the web.” This is important for the google search engine.

Leave a Reply