Google +1按钮不符合W3C标准

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>

有人知道为什么会发生这种情况,以及如何使其符合要求吗?谢谢

修改:为了通过验证,我在我的网站上写了一篇文章。


2
{lang: 'en-GB'} 这部分对我来说看起来很奇怪。首先,因为相同的脚本标签正在从 src 加载,所以我认为它不应该再有任何代码了。其次,这个对象字面量没有被分配给任何东西,那么它的意义是什么呢? - mkilmanas
7
如果提供了SRC属性,浏览器将忽略SCRIPT元素的内容,但脚本作者仍然可以编写代码以获取SCRIPT元素的内容(即上面的“{lang:'en-GB'}”部分)并对其进行操作。这是一种方便的模式,用于捆绑JS对象文字,使脚本可以将其用作参数或配置等。只是供参考... - dossy
谢谢,这是一个有趣的想法,我之前没有意识到。 - mkilmanas
12个回答

24

有人知道这种情况为什么会发生吗?

因为Google设计它使用标记混乱语言而不是HTML。

如何使其合规?

文档中提供了符合HTML5草案规范的替代标记。

<div class="g-plusone" data-size="standard" data-count="true"></div>
如果您希望其与HTML 4.x或XHTML 1.x一起使用,则可能会很难实现(尽管您可能能够使用JS添加不符合标准的标记,但这只是一个欺骗性的解决方案,并且完全不符合有效标记的精神)。

我会尝试您的解决方案,但不确定是否可以更改正确答案。 - ingh.am
你知道我如何在没有Javascript的情况下指定“href”值吗? - Ivan Kuckir

11

将以下代码插入头部:

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

完整的答案可以在此处找到(法语)


FYI,我在我的页面中使用这个声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> - Gilbou
要定义URL,您会将其添加到.render中的JSON吗? - ingh.am
我认为是这样的:<div id="plusone-div" class="plusone"></div><script type="text/javascript"> gapi.plusone.render('plusone-div', { "size": "small", "count": "true",
"href": "your_url_here" }); </script>
- Gilbou

9

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

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

i.e.,

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

1
如果您希望它通过W3C标记验证器,那么您还需要编写自定义DTD并将Doctype指向它。当然,虽然这是有效的,但它不会是有效的(X)HTML。 - Quentin
除非Google提供了这个建议,否则它是不合法的。页面作者无权决定“plusone”应该位于上述Google命名空间中;只有Google拥有这种权力。 - Matthew Wilson
1
@Matthew - 它确实在“g”命名空间中,参见“g:plusone”- 那么问题是什么? - dossy
@Quentin> 不,X代表“可扩展”。通过添加自定义命名空间和DTD,您正在保持其符合XHTML,因为规范本身定义了扩展标记的方法。 - Paul
@Paul — 它的可扩展性在于它是建立在 XML 上的,你可以混合使用命名空间。例如 XHTML + MathML 就是“XHTML + MathML”,而不是“XHTML”。规范明确说明混合命名空间文档并不严格符合标准。(http://www.w3.org/TR/xhtml1/#well-formed) - Quentin
@Dossy:不,它只是在标记混乱的标记中具有“g:”前缀。没有使用XML命名空间,因此它未声明为“http://base.google.com/ns/1.0”定义的命名空间的一部分(除非Google有相关声明)。 - Matthew Wilson

6
使Google Plus One代码验证最简单的方法: 只需放置:

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

改为:

<g:plusone size="medium" href="http://www.example.org"></g:plusone>
缺点: 如果您添加参数,例如“count”或“size”,则代码将不再有效。
这是谷歌提出的HTML5代码,但也适用于其他(X)HTML版本。 在HTML5中,您可以添加参数,例如“data-count”,“data-size”等。

2

试试这个:

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

2
在关闭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>

一如既往,它能解决问题...


1

这很简单

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

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

我正在我们的网站www.armaven.com中使用它。如果你想的话,可以去看看。


1

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>

2
从我的博客中取得的笑话 ;) - ingh.am

0

继Quentin的答案之后,您可以通过使用data-href来添加符合W3C标准的href属性:

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

0

我实现的解决方案已经在这个帖子中出现了,由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/。 如果您想向gabi.plusone.render函数添加其他参数,请查看https://developers.google.com/+/plugins/+1button/#plusonetag-parameters,并查看是否符合W3C标准,请访问http://validator.w3.org/。祝你好运!


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接