Question

所以我一直在玩Google的+1按钮试图在我的网站上获取它，但它不符合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>

有谁知道为什么会发生这种情况以及如何使其合规？感谢

编辑：为了让这个通过验证，我在我的website上写了一篇文章。

Answer 1

有谁知道为什么会这样？

因为Google将其设计为使用标签汤而不是HTML

如何使其符合要求？

documentation具有在HTML 5规范草案下有效的替代标记：

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

如果您希望它与HTML 4.x或XHTML 1.x一起使用，那么您可能会运气不好（尽管您可以使用JS添加不兼容的标记，但这只是一个黑客攻击将其隐藏在验证之外，而不是根据有效标记的精神进行隐藏）

Answer 2

在标题中插入此代码：

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

然后将此代码插入您想要按钮的位置：

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

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

可以找到完整答案here（法语）

Answer 3

我猜你正在尝试验证XHTML。你最接近的是成功验证是通过添加这个来定义元素上的“g”命名空间：

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

即，

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

Answer 4

使Google Plus One代码验证的最简单方法：只是说：

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

而不是：

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

缺点：您无法添加“count”或“size”等参数，或者代码将无法再有效。

这是Google提出的HTML5代码，但适用于其他（X）HTML风格。在HTML5中，您可以添加“数据计数”，“数据大小”等参数

Answer 5

试试这个：

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

Answer 6

在关闭正文标记之前保留代码，并替换：

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

像往常一样，它可以解决问题......

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

Answer 8

它很简单

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

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

我在我们的网站www.armaven.com中使用它。看看这个。如果你想。

Answer 9

另一种方法可以像我一样自定义DTD。我下载了xhtml1-strict.dtd

在dtd文件中找到以下实体定义

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

并将其编辑为如下（这将有助于解决上下文验证，即此标记应出现在何处）

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

现在定义新元素

<!ELEMENT g:plusone EMPTY>

然后列出属性

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

Answer 10

这是我提出的解决方案......

<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脚本的链接！

Answer 11

我实施的解决方案已经出现在这个帖子中，它由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>

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

Answer 12

继续使用Quentin的answer，您可以使用href添加符合W3C的data-href属性：

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

Google +1按钮不符合W3C标准

12 个答案: