Google +1 Button not W3C compliant

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.

Quentin

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)

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)

I'm guessing you're trying to validate XHTML. The closest you're going to come is to successfully validating is by defining the "g" namespace on your element by adding this:

xmlns:g="http://base.google.com/ns/1.0"

i.e.,

<html xmlns:g="http://base.google.com/ns/1.0"> ... </html>

Ricardo de la Vega

The simplest way to make Google Plus One code to validate: Just put:

<div class="g-plusone"></div>

Instead of:

<g:plusone size="medium" href="http://www.example.org"></g:plusone>

Drawbacks: you cannot add parameters such as 'count' or 'size', or the code will not be valid any more.

It's Google's proposed code for HTML5, but will work for other (X)HTML flavours. In HTML5 you CAN add parameters such as 'data-count', data-size', etc.

Keep the code before you close the body tag, and replace:

 <g:plusone size="medium"></g:plusone>

by :

<div class="g-plusone" id="gplusone"></div>
<script type="text/javascript">
var ValidMe=document.getElementById("gplusone");
ValidMe.setAttribute("data-size","medium");
ValidMe.setAttribute("data-count","true");
</script>

As usual, it does the trick...

Xavier

Try this:

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

http://james-ingham.co.uk/posts?p=google-plusone-w3c-valid

<!-- Put inside the <head> tag. -->
<script type="text/javascript"
        src="http://apis.google.com/js/plusone.js">
    {lang: 'en-GB'}
</script>

<!-- Put where you wish to display button. -->
<script type="text/javascript">
    document.write('<g:plusone size="medium" href="http://www.example.org/post"></g:plusone>');
</script>

its just simple

Use the following inside a div tag which you can configure to place it wherever you want in your page and it is valid.

<div class="g-plusone"></div>

I am using it in Our Web site www.armaven.com. Check it out. If you want.

The other way can be to Customize DTD as I did. I downloaded the xhtml1-strict.dtd

Find the following entity definition in the dtd file

<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc; )*">

And edit it to be as follow (This will help to resolve the contextual validation i.e. where should this tag appear)

<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc; | g:plusone)*">

Now defining new element

<!ELEMENT g:plusone EMPTY>

And then listing attributes

<!ATTLIST g:plusone
  href %URI; #IMPLIED
  size CDATA #IMPLIED
>

This is the solution I came up with...

<span id="plusone"></span>
<script type="text/javascript">
    //< ![CDATA[    
       $("#plusone").html('<g:plusone></g:plusone>');
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    //]]>    
</script>

Make sure you have <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> or other link to jquery script in your header!

The solution i implemented is already present in this thread and it was posted by Gilbou but i have to add that <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> is not mandatory to be placed in the header.

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

Place the above code where you want the +1 button to be but make sure you replace http://www.YOURSITE.com/ with the link of the page to be +1. If you want add other parameters to the gabi.plusone.render function check https://developers.google.com/+/plugins/+1button/#plusonetag-parameters and to see if it is W3C compliant go to http://validator.w3.org/. Good luck!

Jonathan

Following on from Quentin's answer, you can add a W3C-compliant href attribute by using data-href:

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

来源：https://stackoverflow.com/questions/6217434/google-1-button-not-w3c-compliant

标签

javascript

w3c

w3c-validation

google-plus-one