Google +1 Button not W3C compliant

Question

So I've been playing with Google's +1 button trying to get it on my website, but it's not W3C compliant.

Here's the code:

<!-- Place this tag in your head or just before your close body tag --> <script type="text/javascript" src="http://apis.google.com/js/plusone.js">   {lang: 'en-GB'} </script>  <!-- Place this tag where you want the +1 button to render --> <g:plusone size="medium" href="http://www.example.org"></g:plusone> 

Does anyone know why this happens and how to make this compliant? Thanks

EDIT: To get this to pass through the validation, I wrote an article on my website.

Answer 1

Does anyone know why this happens?

Because Google designed it to use tag soup instead of HTML

How to make this compliant?

The documentation has alternative markup that is valid under the draft HTML 5 specification:

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

If you want it to work with HTML 4.x or XHTML 1.x then you might be out of luck (although you might be able to add the non-compliant markup using JS, but that would just be a hack to conceal it from validation and not at all in the spirit of valid markup)

Answer 2

Insert this code in the header:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">       {lang:'en', parsetags:'explicit'} </script> 

Then insert this code where you want the button:

<div id="plusone-div" class="plusone"></div>  <script type="text/javascript">       gapi.plusone.render('plusone-div',{"size": "small", "count": "true"}); </script> 

The complete answer can be found here (in French)