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!

Discussion

  1. Will says:

    This was very useful but how do you get it to point towards one URL like the href method in the g:plusone tag?

  2. Phillip says:

    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

  3. jon says:

    good catch there! thanks for the tip :)

  4. JLyC says:

    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 ….

  5. Guest says:

    It’s not working…
    I see many posts about it, none of them passing the validation.

    Anyone knows why?

  6. Phillip says:

    @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?

  7. Ashley says:

    This was the only site that actually had a solution that worked. Thanks!

  8. Josh says:

    Thanks for that. Get a Flattr button and I’ll flattr you :)

  9. Phillip Lovelace says:

    @Josh – No flattr necessary, I’m just glad you found the info helpful!

  10. venkat says:

    thank’s Second step is working

  11. Mark says:

    That did it! Thanks for posting this.

Leave a Comment