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.