Tutorial: How to produce valid Google +1 buttons

Introduction

If you added a Google +1 button to your website, you certainly noticed that the Google +1 button is not valid at all. While you have the choice to not care about it and let your pages become invalid because of this button, you may also not be fully happy if you happened to include a link to validate your pages and started to receive complaints about users saying your website is NOT valid.

Source of the problem

The “<g:plusone>” tag is certainly not valid and will never be. Google also proposes to use a more standard tag using a DIV element, as follow:

<div class="g-plusone" data-size="standard" data-count="true"></div>

This is slightly better because it uses a valid XHTML element. However the validator will still complain about the “data-size” and “data-count” attributes to be invalid.

Early attempts to fix the problem

Some people came with a solution of adding the Google +1 button by replacing the “g:plusone” tag with the following Javascript code:

<script type="text/javascript">

document.write('<g:plusone size="standard" count="true"></g:plusone>');

</script>

While this does the trick for a HTML page, it will throws Javascript errors if your page is served as application/xhtml+xml instead of text/xml (as recommended by the W3C), because the “document.write()” Javascript function can’t be used with XML documents.

There are also several other Javascript attempts. You could for example add the Google +1 button with the following code:

<div id="plusone-div" class="g-plusone"></div>
<script type="text/javascript">

var g = document.getElementById( "plusone-div" );
g.setAttribute( "data-size", "standard" );
g.setAttribute( "data-count", "true" );

</script>

This solution is better because it will work with XHTML pages served as application/xhtml+xml. However what is the point of your quest if you add the “data-size” and “data-count” invalid attributes, even using Javascript?

We could also add an “xmlns:g” attribute to the HTML element to declare the “g” XML namespace, but that would not be a nice hack and there are chances that the W3C validator will still complain.

The solution

I will show you another, better, more standard-compliant way to add the Google +1 button that uses standard Javascript and XHTML code.

First add this code just before the closing HEAD section of your page:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
//<![CDATA[
{ "parsetags": "explicit" }
//]]>
</script>

Then add the following code where you want to place your Google +1 button:

<div id="plusone-div"></div>
<script type="text/javascript">
//<![CDATA[
gapi.plusone.render
(
    "plusone-div",
    {
        "size": "standard",
        "count": "true"
    }
);
//]]>
</script>

What have we done here?

First we import the Google +1 Javascript code and we set “parsetags” to “explicit” because we want to use the Google +1 Javascript API, as explained in the documentation. However, after some tests, I found that the { “parsetags”: “explicit” } line is optional.

Then we added a standard DIV element. This done, we invoke the gapi.plusone.render() method of the Google +1 Javascript API with the DIV id and a JSON object passed as parameters of the render() function. Be careful to not give the class “g-plusone” to the DIV or you wont be able to change the button appearance and use the default settings! And the magic happens. It works, and the page is now valid XHTML!

Conclusion

That’s all we need to do to produce a XHTML valid Google +1 button that work for everyone. This tutorial shows how it is easy to implement a valid and reliable solution that work for everyone. The tutorial is now over! However, if you want to know how to load the Google +1 button asynchronously, here is how.

View Comments (42)

  • Thanks Guys,
    Been searching everywhere for EXACTLY the solution you provide. Keep up the good work!

  • Hello, thank you for this tutorial.
    The +1 button is XHTML valid with your code, but does not count.
    Some weeks ago it stopped to count more than 11. Wenn you click it shows 12, when you reload page it goes back to 11.

    This is the site: http://www.cristiane-festas.ch

    Thanks in advance for any help.

  • Thanks alot guys, gave you a plus one, and linked to you from my websites blog.

  • I found a lot of great stuff here, thanks. I will continue to follow your blog for sure.

  • I love it, your solution was plug and play and now my page validates without the need for all sorts of IE conditionals and various other hacks. I implemented you G+ button code on this mortgage calculator tool I'm building here: http://www.searchlawrence.com/mortgage_calculator/

    I always like to make sure by HTML validates, so this has been a problem I have been dealing with since G+ buttons were first offered. Now I need to find time to go and patch all by other code...

    Thanks - Greg

  • I am using Front Page. Every time I insert any of the scripts here or from Google's own step by step process I see the code visible on the web page. Can anyone assist. I am a wysiwyg type of guy! thx

  • Had to asynchronously load about 30 g+ buttons, this helped make the load don't feel like a browser hiccup anymore. Thanks!

  • Hi, I put the code in just as requested but I still get the same problem as with the other versions. It adds the +1 for a few seconds and displays the snippets box for a few seconds nad then reverts to 0 with an exclamation mark in the +1 box. Any ideas on how to fix this. I have it on my products on my website http://corset.ie
    Thanks,
    Andrew

  • Excellent blog! Do you have any hints for aspiring writers?
    I'm hoping to start my own blog soon but I'm a little lost on everything.

    Would you propose starting with a free platform like Wordpress or go for a
    paid option? There are so many choices out there that I'm
    totally confused .. Any recommendations? Appreciate it!

1 2 3 4