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
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.
First add this code just before the closing HEAD section of your page:
Then add the following code where you want to place your Google +1 button:
What have we done here?
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.