Google +1 按钮不符合 W3C答案

【问题标题】：Google +1 Button not W3C compliantGoogle +1 按钮不符合 W3C
【发布时间】：2011-09-07 05:28:41
【问题描述】：

所以我一直在使用 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 上写了一篇文章。

【问题讨论】：

{lang: 'en-GB'} 部分在我看来很奇怪。首先，因为相同的脚本标签是从src 加载的，所以我认为其中不应该有更多的代码。其次，对象字面量没有分配给任何东西，那么它有什么意义呢？
@mkilmanas，如果提供了 SRC 属性，浏览器将忽略 SCRIPT 元素的内容，脚本作者仍然可以编写检索 SCRIPT 元素内容的代码（即 @987654325 @上面的部分）并采取行动。这是捆绑脚本可以用作参数或配置等的 JS 对象文字的便捷模式。仅供参考 ...
谢谢，虽然很有趣，但还没有意识到

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

【解决方案1】：

有人知道为什么会这样吗？

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

如何使其合规？

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

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

如果您希望它与 HTML 4.x 或 XHTML 1.x 一起使用，那么您可能会不走运（尽管您可能能够使用 JS 添加不兼容的标记，但这只是一个 hack从验证中隐藏它，而不是本着有效标记的精神）

【讨论】：

我会尝试您的解决方案，但不确定是否可以更改正确答案。
您现在如何在没有 Javascript 的情况下指定“href”值？

【解决方案2】：

我猜您正在尝试验证 XHTML。最接近成功验证的方法是通过添加以下内容在元素上定义“g”命名空间：

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

即，

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

【讨论】：

如果您希望它通过 W3C 标记验证器，那么您还需要编写自定义 DTD 并将 Doctype 指向它。当然，虽然这是 有效的，但它不是有效的 (X)HTML。
除非谷歌提供了这个建议，否则它是不合法的。页面作者不能决定“plusone”应该存在于上面提供的 Google 命名空间中；只有 Google 拥有该权限。
@Matthew - 它位于“g”命名空间中，c.f. “g:plusone”——那么，有什么问题？
@Quentin> 不，X 代表“eXtensible”。通过添加自定义命名空间和 DTD，您使其符合 XHTML，因为规范本身定义了扩展标记的方式。
@Paul — 它是可扩展的，因为它是基于 XML 构建的，并且您可以混合命名空间。 XHTML + MathML（例如）是“XHTML + MathML”而不是“XHTML”。该规范是明确的，混合命名空间文档是not strictly conforming

【解决方案3】：

制作 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 中，您可以添加“数据计数”、“数据大小”等参数。

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

【解决方案5】：

在标题中插入此代码：

<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（法语）

【讨论】：

仅供参考，我在我的页面中使用了这个声明：ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
要定义 URL，您会将其添加到 .render 中的 JSON 中吗？
我认为是：

【解决方案6】：

在关闭body标签之前保留代码，并替换：

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

像往常一样，它成功了……

【讨论】：

【解决方案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】：

很简单

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

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

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

【讨论】：

【解决方案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
>

【讨论】：

【解决方案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 脚本的链接！

【讨论】：

【解决方案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/。祝你好运！

【讨论】：

【解决方案12】：

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

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

【讨论】：