Google +1 Button not W3C compliant

2019-01-31 11:33发布

站内文章 / JavaScript
54 0 0

问题:

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.

回答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)



回答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)



回答3:

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>


回答4:

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.



回答5:

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



回答6:

Try this:

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


回答7:

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>


回答8:

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.



回答9:

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
>


回答10:

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!



回答11:

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!



回答12:

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>


标签： javascript w3c w3c-validation google-plus-one
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~