谷歌+1按钮不符合W3C标准
Google +1 Button not W3C compliant
所以我一直在玩谷歌的+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>
有谁知道为什么会发生这种情况以及如何使其合规?谢谢
编辑:为了让它通过验证,我在我的网站上写了一篇文章。
有谁知道为什么会这样?
因为谷歌设计它使用标签汤而不是HTML
如何使其合规?
该文档具有在 HTML 5 规范草案下有效的替代标记:
<div class="g-plusone" data-size="standard" data-count="true"></div>
如果您希望它与HTML 4.x或XHTML 1.x一起使用,那么您可能不走运(尽管您可以使用JS添加不兼容的标记,但这只是一个黑客,以隐藏它免受验证,而不是本着有效标记的精神(
在标头中插入以下代码:
<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>
完整的答案可以在这里找到(法语(
我猜你正在尝试验证XHTML。 最接近成功验证的方法是通过添加以下内容在元素上定义"g"命名空间:
xmlns:g="http://base.google.com/ns/1.0"
即,
<html xmlns:g="http://base.google.com/ns/1.0"> ... </html>
制作 Google Plus One 代码进行验证的最简单方法:简单地说:
<div class="g-plusone"></div>
而不是:
<g:plusone size="medium" href="http://www.example.org"></g:plusone>
缺点:您无法添加"计数"或"大小"等参数,否则代码将不再有效。
这是Google为HTML5提出的代码,但适用于其他(X(HTML风格。在HTML5中,您可以添加诸如"数据计数","数据大小"等参数。
在关闭 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>
像往常一样,它可以解决问题...
试试这个:
<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 标签中使用以下标签,您可以将其配置为将其放置在页面中的任何位置,并且它是有效的。
<div class="g-plusone"></div>
我正在我们的网站 www.armaven.com 中使用它。看看吧。如果需要帮助,。
另一种方法是像我一样自定义 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
>
这就是我想出的解决方案...
<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 脚本的链接!
我实现的解决方案已经存在于此线程中,并且由 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/。祝你好运!
根据昆汀的回答,您可以使用data-href
添加符合 W3C 的 href
属性:
<div class="g-plusone" data-size="standard" data-count="true"></div>
- W3C循环样式的JavaScript
- 在哪里可以学习ECMAScript标准中尚未包含的JavaScript功能
- 如何允许web浏览器记住未以标准方式发送的表单字段
- 命名约定的Web标准
- 用于编码标准的javascript工具
- Sencha Ext JS排序标准以字符串而不是JSON的形式发送
- LokiJS与标准Javascript对象访问
- backbone.js-映射标准url参数-使用多个参数
- 如何将日期转换为标准格式
- 使用W3C Geolocation返回的Position
- 为什么新js Fetch标准禁止响应头名称为'设置Cookie 1/2'
- 阻止用户在Netsuite中使用标准/未自定义的表单
- 获取非标准模式中的子字符串
- highcharts:更改工具提示和阴影(悬停)的标准位置
- Google Maps Javascript v3 自定义控件子类化标准控件
- FireFox-在全局作用域中由id名称引用的元素.使用w3c标准
- 为什么jQuery不是W3C标准
- 如何使用JQuery或Javascript添加只读属性(但遵循W3C标准!)
- W3C和/或用于加载非可视化网页资源的公认标准
- 谷歌+1按钮不符合W3C标准