Google +1: How to Add the Google Plus One Button

Written by: Adam Short 43 Comments Click to Contribute

On June 1st, 2011, Google expanded the range and scope of their Plus One button. Instead of just limiting the +1 button to their organic search engine results pages, they now allow webmasters to place +1 buttons on their websites.

As we discussed in a recent blog post, the ramifications of this new initiative could prove to be significant for those interested in maximizing their traffic from Google.

In today’s post, we’ll cover step-by-step how to implement the +1 button on your individual website. I’ll also discuss how to avoid a potentially hazardous result associated with using Google default code. The simple workaround I’ll reveal also carries the benefit of allowing you to control which URL is being +1’d and registered in Google’s organic search results.

Again, if you’re not familiar with Google’s +1 button, please read our earlier post — Google’s Plus One Button – A New Form of Social Interaction — for a more in-depth explanation.

Now you know the basics of the button and what it does, let’s take a look at how to implement the +1 button on your website.

The code and process is very simple.

Place the code below in one of two places on your website theme or website:

1. Just above the closing </head> tag; or
2. Just above the closing </body> tag.

<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”></script>

Next, place the following code where you want the +1 button to appear on your web pages:

<g:plusone></g:plusone>

That’s all the code you have to add and the entire process for displaying the button and making it functional. The above steps will work on any web page or website regardless of its format or theme.

But there are limitations and real security issues — important to both you and your customers — that need to be adjusted. The head JavaScript code is fine as-is and does not need any adjustment. The button display code, on the other hand, may create a significant issue. Luckily, the fix is easy.

To understand the limitations and security issues involved, we need to first understand how Google decides which page URL (web address) is being +1′d. Below are the three ways Google determines a Plus One button’s page URL, and the issues or limitations of each (later, I’ll show you the fix.)

How Does Google Find Your Page’s URL?

From an SEO standpoint, it’s important that Google is +1-ing the correct URL on your website. The problem is that the default Google +1 icon code does not have any URL or HREF reference. It also looks for a page’s URL in three different ways (in a specific order), but each can have a different result.

The 3 ways are as follows:

1. Google looks for a specific URL within the +1 button code.

Google Looks For URL 1st

The issue: By default, there is no reference to a specific URL in this code, so Google will not know which page to +1. It will continue to look for the page URL, which unfortunately, can lead to problems that are both inaccurate and insecure.

Google will automatically go to its second way of determining a page URL.

2. Google will look for the page’s canonical link. This is a line of code in the <head> section of your pages.

The issue: The head code often contains a website’s homepage URL and not the actual page being visited, so the page being +1′d is not the page you want to be recorded. In short, this way of finding the correct URL to +1 is not always accurate.

Here’s a typical canonical link reference:

Google Looks For URL 2nd

Notice in the above code that the link is http://www.example.com — which is not the article page or the blog post page. Instead, it’s the home page. So in effect, the plus one is for the wrong page.

The other issue is that some web pages do not have the <link rel=”canonical” href=”http://www.example.com” /> code at all.

This means Google will revert to its third way of finding a page’s URL — the web browser’s address bar. And this is a major problem.

3. Google will use the web browser’s address bar location.

The issue: The page in the URL may not be correct. It may contain session ID’s that expire and aren’t actually part of the page’s URL. It could even contain form information. Imagine your customers name or password being sent to Google’s search engine via a +1 click. Additionally, the URL could contain affiliate ID’s or any one of a number of other variables that are passed via a page’s URL structure.

It may not be apparent at first, but this is all quite dangerous. The image below provides an example of the information that might be added to a browser’s address bar (note: this is not a real URL).

Google Looks For URL 3rd

Notice there is a Username ID (“u”), session ID (“session”), and Password ID (“p”) all located in the web address bar.

This is really an issue with webmasters or page designers who don’t understand how the button works and are implementing it incorrectly. And this is why it’s critically important that you do understand what’s going on behind the scenes so you can implement your buttons correctly.

If someone asks you to +1 an article but they have usernames, sensitive data, or form variables in the URL, it might look like the example above. This is extremely insecure, and if someone allows Google to use the web page URL address bar as the URL for the Plus One button, serious issues could arise.

So here’s an important warning for all web users: Always check the page URL before you Plus One it!

What does all this mean?

We need to take control. We need to tell Google what URL we want to be used with the +1 process.

Fixing These Limitations

To add a specific URL to the code, all you need to do is add the page’s URL between the <g:plusone> tag and the </g:plusone> tag like this:

<g:plusone href=”http://www.YOURSITE.com/SpecificPage.html”></g:plusone>

That’s it — the complete solution (that wasn’t so bad, was it :) )!

There are two ways to adjust the code to look like the image above: manually or automatically. But before I go into the process, there’s one more reason you want to add the URL to the button code and not let Google decide it for you arbitrarily.

If you have an archive page or list of articles on a particular page and you want to add a +1 button to each of the listed pages or posts, you will need to tell Google which URL is to be attached to each button.

Consider a page that looks like this:

Two Plus One Buttons on One Page

You will need to have the URL for each article attached to the correct button. Button A needs to be attached to the URL of the post covering the “Promotional Giveaways” and button B needs to be attached to the URL for the “Advanced Searches” article.

Adding the URL Manually

You can manually code the URL into each button individually. The code would look like this:

Code For manual Placement Of Google +1

Notice I have manually placed each article’s URL into the Google Plus One code. Now if the first article’s +1 button is selected, the URL for the “Promotional Giveaways” will be the URL Google will see as being “voted” on, and if the second button is selected, the article about using “Advanced Searches” will be +1′d.

Adding the URL Automatically to a WordPress Theme

WordPress records the URL of a page or post via a piece of code that is associated with your permalink structure. The URL code within WordPress looks like this:

<?php the_permalink() ?>

In order to have every button match a specific article or post within the WordPress loop structure — even if there are several posts displayed on a single page — you need to place the permalink URL structure into the Google button code like this:

<g:plusone href=”<?php the_permalink() ?>” </g:plusone>

When placed next to a post on the archives or index page, the code above displays like this:

Two Plus One Buttons on One Page

The beauty of the code is that WordPress will automatically change the +1 button URL to the correct permalink or page URL for every post.

What to see it in action? Check out the archives page of our blog for this month. Notice the number of buttons on the page, and that each button goes to a different URL (feel free to plus one any of our posts).

We’ve posted a button that displays on each post in the archives, or on the left hand side of the individual posts. See the image below:

Our +1 Button

Okay, that’s all the tough stuff. Once you understand that you need to specify the URL that you want +1′d, you’ll be in great shape.

Button Style

Google provides different button sizes and styles. You can display the button as a Small button with or without a count, Medium button with or without a count, Standard button with or without a count, or finally, a Tall button that displays the count above the actual +1 icon (which is what we’re using).

For a full list of sizes and options, refer to Google’s Webmaster documentation page:
http://code.google.com/apis/+1button/

Can People Abuse the +1 Button?

There are some legitimate fears and concerns I’d like to address before closing.

All my hard with SEO is going to be undermined by black hat website owners who manipulate the system.

Google isn’t doing away with SEO — they still recognize your hard work and will still take all of that work into consideration. The Plus One button is just one of many additional factors that fit into the algorithm that Google uses. Picture it as a puzzle. Adding one piece does not eliminate the need for all the rest of the pieces. Solid SEO work will always produce benefits.

Illegitimate website owners will hire a bunch of people to Plus One pages and gain an unfair advantage over those of us who aren’t doing that.

The first time you click on the button, it registers a +1. The second time (in a row) that you click the button, it removes or reduces the count. This means multiple clicks will result in the button being a plus one count or a zero count (no vote has been registered). This greatly reduces the chance that one person at one IP address can just click their own button for an entire day to increase the votes Google is recording.

Additionally, Google is tracking the number of clicks being made from an IP in a short period of time. If they suspect that some kind of automated software running, Google stops the +1 vote from being recorded and displays a CAPTCHA form which must be filled out to continue.

When the +1 button first came out, people reported clicking the +1 button on all of their pages. To their surprise (and ours, too), Google stopped the process and put up a CAPTCHA page. This means that regardless of the web page URL, if you do too many +1′s in a short time, Google sees it as an automated process and blocks the actions.

Personally, when we discovered these safeguards, it made us feel better. It took the worry out of the +1 button being used in some strong black hat fashion to unduly influence the organic search results. Enjoy the +1 (Plus One) tool, implement it often, and be sure to check back with us for new developments regarding Google’s +1 tool and other Internet marketing developments.

Talk to you soon,

Adam Short

43 Comments Posted:

Written by: Dr. Sarah Newkerk June 9, 2011

Adam, Adam, Adam! You are just the best. Thank you for sharing, you really do keep them coming. I have learnt more on this blog for free, than I have from 99% of the products I have bought, excluding Nicheprofitclassroom of course :-) Thank you. Sarah Newkerk.

Written by: Brian De Den June 9, 2011

Thanks Adam, I just added this as a plugin today, but I will follow you’re instructions and do it manually…. Thanks!!

Brian De Den

Written by: Asim Bawany June 9, 2011

like always… amazing actionable steps and very easy to understand and implement Adam…
thanks!
*runs to his major money sites to implement the plus one*

:D

Written by: Julie Larson June 9, 2011

Thank you for being on top of the latest and greatest, Adam!!! I’m looking forward to adding the buttons to my sites. :)

Written by: Mr. Bill Essien June 9, 2011

I like the explanation but want it in a more simply way. Thanks

Written by: David Tilbury June 9, 2011

Thanks for the tip on using the Google +1 Button and your insight on how to properly structure the code.

What little I have learned about installing and manipulating code has been self taught so I could use some clarification from someone more experienced.

Do we install the first set of code into one of the Templates in the editor of WordPress, ie. before the tag and then install the actual button code on the individual pages or posts? Or does the button code go somewhere in the template files also?

Sorry, still learning.

Thanks,
Dave

Written by: Leonard June 9, 2011

Thank you. I was just searching informations on that +1 button and how to place it on my website. Now I know how…

Thank you

Written by: Paul Facey June 9, 2011

Thanks for sharing Adam (I almost said Allen – :o )!

Your explanation and implementation was very thorough.

However, wouldn’t it be easier to use the PlusOne plugin located here: http://wordpress.org/extend/plugins/google-plus-one-google1/ rather than having to do this manually?

I’d love to hear your thoughts and feedback.

Cheers,
Paul

Written by: George Marvin June 9, 2011

It really is important to know the security risks involved with this,and to do it correct to avoid problems. Also to gain any benifit from the +1.

Thanks Adam,for giving us this good information, it will save a lot of headaches.

Written by: Genaro Geneta June 9, 2011

This is awesome free tutorial! I wonder why Google didn’t give the instruction on putting the URL correctly (just like you fixed it) since it’s simple and could avoid lots of headache in the future especially regarding privacy.

Thanks Adam!

Written by: lothar huske June 9, 2011

Thanks, amazing actionable steps and very easy to understand and implement Adam…
Thank you Lothar

Written by: John Whiteley June 10, 2011

very helpful article in understanding Google +1

Written by: Graham June 10, 2011

Great info Adam, very straight forward and easy to implement. It will interesting to see how this idea of Googles goes in the long term. People are always trying to think of ways to game Google and this will be no different. I bet there will be services, like on fivver, that will offer to get a ton of people to +1 your site much like the get likes now for facebook fanpages.

Written by: Karen June 10, 2011

At last, I understand the plus one button much better now. Thanks for a great explanation. Now I have the confidence to implement it. Thanks.

Written by: Jenny June 10, 2011

Hi Adam,
Thanks for the excellent article. I would click on the +1 button for this article, except it says I will be registering the +1 vote publicly as “my email address”. I assume this means that everyone would then be able to see my personal email address, not something I want. Can you comment on this please.
Thanks
Jenny

Written by: Patrick June 10, 2011

May I know how do you put the ‘+1, retweet & FB Share’ button on left side of the post like this post?

Did you use a plugin?

Tks a lot for the answer.

Best Rdgs

Written by: Bob June 10, 2011

You are a great teacher Adam.

Being on top of something new like this and passing it on is just fantastic.

Many thanks

Written by: Sonny Selwyn June 10, 2011

Thankyou Adam – dont want to appear gushy – but probably is of value to us all to know I do personally notice a degree of concern about my faltering moves to link up with this extraordinary medium of E-science. The thrill for me is that while the faculties remain stable, the buzz is always in the “trying” – great work mate — Sonny

Written by: David June 10, 2011

Thanks Adam, for yet another concise and informative post. Even so, explicit as it is, a dunderhead like me I will mess it up regardless. That makes me question the wisdom of this manual install against the simplicity of the Word Press plug-in, at:
http://wordpress.org/extend/plugins/google-plus-one-google1/ as mentioned by Paul, above.
Do you know if that plug-in has the necessary safeguards you warn us about?

Thanks again Adam…. David

Written by: Cameron Abel June 10, 2011

Thanks for the info Adam! Just 1 question, like others in this thread, will the WordPress plugin work or only if you do it manually and change the info as described above, will it be “safe”. Additionally, what type of difference do you think +1 will make as part of the whole ranking process. Will websites without it suffer and what sort of impact do you think websites effectively using +1 will gain?
Cheers mate!
Cam

Written by: Francis June 10, 2011

Although I understand your blogs (in fact, now I’m addicted) – I never could write them myself. Even more embarassing, they wouldn’t have ocurred to me. Can I ask you what your background is? I am veryimpressed by yuour insight.

Written by: Nizom June 11, 2011

Thanks for the post, Adam.

In general I understand the process of adding +1 button…but would be more grateful if you showed it on video too…I think many members would appreciate it.

Not only +1 button, but how to add FB and Twit buttons as well.

Any way, thank you so much.

Written by: Hipolito M. Wiseman June 12, 2011

Thank you for this! made my day

Written by: Mike June 12, 2011

Hi Adam
There is free WP plugin for Google+1 by Jacob Gillespie, available via the WordPress plugin search. It looks pretty good from the description. Wouldn’t this be an easier installation route? Or is a bit risky.

Written by: Andrew Pelt June 12, 2011

Wow, your info here is always great. Ill be back

Written by: Gregory Despain June 13, 2011

Wow, your info here is always great. Ill be back

Written by: wayne June 13, 2011

For Mike – I added the plugin for Google +1 to one of my sites. Its pretty simple, and of course, if it becomes a problem, you can always deactivate the plug in (which is what I love about plug ins, if you dont like em, click deactivate and they go away)

So far, no problems

Written by: TorontoPrint June 16, 2011

Hi Adam,
appreciate the wonderful info on the +1 button. I have a site with a small gallery and i’m hoping to implement this for each image. i’d like to know if google supports this or against images being +1′d? Thanks for your help

Written by: JeLBee June 21, 2011

Thanks for sharing. I added this button with href.

Written by: bloggerjon June 24, 2011

Thanks for this and very easy to follow
Thanks
Jon

Written by: masterpapers.com June 29, 2011

Great job, you’ve helped me so much and I am so glad I have chosen your service.

Written by: Bob July 4, 2011

Great Post as usual

Would like to know about the plugin for WP though

Many thanks

Written by: Michael July 31, 2011

Not to be a bummer, but I just created my first site and I have no idea where to put the code you just gave us.
Just above the closing tag.?????

Where are these places you speak of? Is this in the page code? I did this in the page code where it said and nothing happened. Better instructions for beginners would be nice.

Written by: Michael August 3, 2011

I have the Google plus one all up and running, but I worry that my facebook friends all go from my facebook page to my new website and plus one it thinking they are doing my a favor and end up getting my site banned. I’ll have to send out a broadcast telling none of them to do that.

    Written by: Adam Short August 3, 2011

    Hi Michael,

    Here is a bit of information you may find interesting, as it relates to your comment. A recent study showed social sharing of a site (Facebook Liking, etc.) was a commen trait of the top search engine page one ranked websites across many niche subjects within the Google search engine results. I’d recommend your friends continue to Plus One and share your site amongst their own Facebook, Twitter or blog network of contacts.

    Thanks for your comments.

    Adam Short

Written by: Michael October 31, 2011

Thanks for the reply Adam! I’ve been doing a lot or research into social media lately and testing my research and I couldn’t agree with you more!

Written by: eryn March 9, 2012

Very detailed info about the +1 button. Thanks. Love NPC.

Written by: Chastity Jaggers March 19, 2012

Thank you very interesting info.

Written by: anusha August 22, 2012

Thanks a lot for it

Written by: JanH September 3, 2012

Great explenation on the subject. After searching and reading for an hour I finally got this and solved my issue in 20 minutes. Thank you Mr. Short.

Written by: Ian M November 28, 2012

I’ve been looking for an example with the href specified to check I was doing it correctly. Your explanation was exactly what I needed. Thank you.

Written by: Shelli December 7, 2012

Wow that was unusual. I just wrote an very long comment but after
I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again.
Regardless, just wanted to say excellent blog!
Shelli

Written by: Reginald January 18, 2013

whoah this blog is magnificent i like studying your articles.
Stay up the good work! You realize, many people are hunting round for this info, you can aid them greatly.

Leave a Comment:

Name:
Email:
Website:
Comment:

Follow Adam Short on Twitter
Subscribe below using your email address to get Blog updates.

Search