Google +1button不符合W3C标准

所以我一直在玩Google的+1button,试图让它在我的网站上,但它不符合W3C。

代码如下:

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

有谁知道为什么发生这种情况,以及如何使这个兼容? 谢谢

编辑:为了让这个通过validation,我在我的网站上写了一篇文章。

有谁知道为什么发生这种情况?

因为谷歌devise它使用标签汤而不是HTML

如何使这个兼容?

该文档具有在HTML 5规范草案下有效的备用标记:

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

如果你想要它与HTML 4.x或XHTML 1.x一起工作,那么你可能会运气不佳(虽然你可能能够使用JS添加不符合标记,但这只是一个黑客来隐藏它validation,而不是有效标记的精神)

将此代码插入标题中:

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

然后插入这个代码你想要的button:

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

完整的答案可以在这里find(用法语)

我猜你正在尝试validationXHTML。 最接近你要成功validation的是通过添加以下内容来定义元素上的“g”命名空间:

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

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

使Google Plus One代码validation的最简单的方法是:只要:

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

代替:

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

缺点 :不能添加“count”或“size”等参数,否则代码将无效。

这是Google提出的HTML5代码,但可以用于其他(X)HTML风格。 在HTML5中,您可以添加“data-count”,“data-size”等参数。

在closures主体标签之前保留代码,并replace:

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

通过:

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

像往常一样,它诀窍…

尝试这个:

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

它只是简单的

在div标签中使用以下内容,您可以将其configuration为将其放置在页面的任何位置,并且该标签是有效的。

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

我正在使用它在我们的网站www.armaven.com 。 一探究竟。 如果你想。

另一种方法是像我一样定制DTD。 我下载了xhtml1-strict.dtd

在dtd文件中find以下实体定义

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

并将其编辑为如下(这将有助于解决上下文validation,即该标签应出现在哪里)

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

现在定义新的元素

 <!ELEMENT g:plusone EMPTY> 

然后列出属性

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

这是我提出的解决scheme…

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

确保您有<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>或其他链接在您的标题jQuery脚本!

我实现的解决scheme已经出现在这个线程中,它由Gilbou发布,但我必须添加<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>不是必须放在标题中。

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

把上面的代码放在你想要的+1button的位置,但是确保你把http://www.YOURSITE.com/replace成页面的链接为+1。 如果要将其他参数添加到gabi.plusone.render函数,请检查https://developers.google.com/+/plugins/+1button/#plusonetag-parameters并查看它是否符合W3C,请转到http::// validator.w3.org/ 。 祝你好运!

继Quentin的回答之后 ,您可以使用data-href添加符合W3C的href属性:

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