underline
phone number

A creative, friendly web design company based in Chelmsford, Essex

back light

Add Google Plus One Button That Complies with W3C Standards

Adding a Google Plus One button to your website that complies with W3C standards is not as easy as you might think – or if you’ve tried, you probably have run into familiar problems. Here’s a solution.

The idea that the effects of clicking a Google Plus One button actually has a positive correlation on your SERP (Search Engine Results Page) position is growing – though Google has not positively identified having a plus one button as a ranking factor – yet.

w3c web standards google plus one button

A Google Plus One button looks like this (try it out – click it and see how it works..)

Although adding the button might not be quite as straightforward as you would expect if you’re not running the latest HTML5 DOCTYPE:

Select Code
1
<!DOCTYPE html>

…& you are maybe using a transitional DOCTYPE declarations on your website like this:

Select Code
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The problem is the code supplied by Google does not comply with W3C standards when not used in conjunction with HTML5. Ok, it’s possible that in the official Google page explaining how to add a Plus One button to your site there might be another solution, but let’s face it; you just want to add a simple button and forget about it right? Reading a tome on a myriad of configurations was not part of the agenda.

How Google Tells You to Do It

Here’s the basic code that Google gives you to add a simple Plus One button onto your website. They tell you to add the following between your “head” tags at the top of your web page:

Select Code
1
2
3
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'en-GB'}
</script>

You can then add the following into your web page wherever you want the Google Plus One button to show up (you can also enclose code this inside a div and position it how you wish):

Select Code
1
<g:plusone size="standard"></g:plusone>

Or you could try this (below) to comply with web standards if you’re using a transitional DOCTYPE – as you’ve most likely already run into problems from the off with the code you’ve just placed between your head tags…

In the head area:

Select Code
1
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

..and this for the rendering of the button:

Select Code
1
<div class="g-plusone"></div>

Now any of this might all work fine of course and comply with W3C Standards – it just depends on what DOCTYPE you are using. Or you might notice the following warning in your coding tool of choice…

g:plusone undefined w3c

You might also run into the issue that if the solution above works for you, it doesn’t enable you to choose the type of button you want. Which brings us onto the following idea.

Other Google Plus One Code Solutions

So if you’re still running into problems, then this coding solution might work for you.

In your head area, add the following in place of the head code given above:

Select Code
1
2
3
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang:'en', parsetags:'explicit'}
</script>

And use this to insert the button wherever you want on your website:

Select Code
1
<div id="plusone-div" class="plusone"></div>

Followed by this:

Select Code
1
2
3
<script type="text/javascript">
    gapi.plusone.render('plusone-div',{"size": "normal", "count": "true"});
</script>

Changing the “normal” to whatever you require will render the button as you want it to (refer to the official Google Plus One link given above for your options).

To add a further Plus One button onto the same page of your site, you can simply add another piece of code as per above, but change the ‘plusone-div’ to ‘plusone-div2’ for example, remembering to also change the relevant Javascript below it as well.

If you want to read more discussion on this latter example, please refer to the Stack Overflow website, where this tip was found.

Please note: If you clicked the Plus One button example in this post, please don’t click the one below – as the two are linked!

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , , , , , , , ,


2 Responses to “Add Google Plus One Button That Complies with W3C Standards”

  1. steve says:

    great idea, but does it really have an effect on SEO?

  2. Hi Steve, jury’s out on that one at the moment, but there is an increasing feeling (with some evidence) among SEO specialists that it does have an effect – although as yet no-one at Google is admitting it as far as we can find out..

Leave a Reply

Please complete the sum so we know you\'re a human... *