Since Google recently added +1 Metrics to Webmaster Tools and Social Engagement to Google Analytics, I decided to add the Google +1 button to my website. All went well until I ran my site through the W3C’s HTML validator. The new button caused my previously valid site not to validate.
While of course, it’s not the end of the world I kept getting the following validation error:
“Element name g:plusone cannot be represented as XML 1.0.”
The code that Google gave me seemed to be the issue.
<g:plusone size="small"></g:plusone>So of course, I started searching to see if anyone else was having the same problem. I wasn’t able to find much, so I decided to check out Google’s documentation to see if I could find any info.
Apparently, using the default code snippet Google provides in combination with the HTML5 Doctype will cause the validation error.
In the documentation Google provides an HTML5-valid syntax alternative which is available as follows:
<div class="g-plusone" data-size="small" data-count="true"></div>Needless to say, I switched out the code and voilà problem solved. My site is now valid again and all is well in the universe. Nice looking out Google!
This was very useful but how do you get it to point towards one URL like the href method in the g:plusone tag?
To be honest, I am not too sure because I am also using a script that has been optimized for faster loading. I will do some research and see what I can find.
In case your interested in some performance info about the +1 button check out this article:
Google +1 Button Performance Review
good catch there! thanks for the tip :)
mmm…. when I used Google+1 button, I noticed too same error in the W3C validator, and found same alternative, but it doesn´t work in my website.
Perhaps it is because I am using a DIV tag for adding Facebook, Twitter and G+1 buttons together.
Txs for the post. I will continue informing ….
It’s not working…
I see many posts about it, none of them passing the validation.
Anyone knows why?
@Guest – I am not sure what you mean. Using the method I described above does indeed cause my site to pass HTML validation when adding the +1 button to my site.
Care to elaborate?
This was the only site that actually had a solution that worked. Thanks!
Thanks for that. Get a Flattr button and I’ll flattr you :)
@Josh – No flattr necessary, I’m just glad you found the info helpful!
thank’s Second step is working
That did it! Thanks for posting this.