新的 Facebook 点赞按钮 HTML 验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2761622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
New Facebook like button HTML validation
提问by Eric Di Bari
After adding the new facebook like button on my page, it's no longer validates using XHTML strict standard. The two errors I come across are:
在我的页面上添加新的 facebook like 按钮后，它不再使用 XHTML 严格标准进行验证。我遇到的两个错误是：
- All of the meta propertytags say that there is no attribute property;
All of the variables used in the like button line are listed that there are no attributes for it. The line is as follows:
<fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>
- 所有的元属性标签都说没有属性property；
列出了类似按钮行中使用的所有变量，没有它的属性。该行如下：
<fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>
回答by hschmieder
Here is a solution for not swapping doctype:
这是不交换文档类型的解决方案：
As zerkms suggested, adding the "fb" namespace only applies for the "fb:" attributes. The "property" attribute of the meta tag remains invalid XHTML.
正如 zerkms 所建议的，添加“fb”命名空间仅适用于“fb:”属性。元标记的“属性”属性仍然是无效的 XHTML。
As you know, Facebook builds upon the RDFa compliance, so you could use the following doctype:
如您所知，Facebook 建立在 RDFa 合规性之上，因此您可以使用以下文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Using RDFa brings more problems than the simple FB issue fix in most cases though.
不过，在大多数情况下，使用 RDFa 会带来比简单的 FB 问题修复更多的问题。
as _timm suggested, dynamically writing the meta tags to the dom doesn't make any sense. One of the major uses of these fb meta tags is the FB-bot parsing of a "share" or "i like" target page (action page) to provide custom titles, images and anchor label for the facebok wall post auto population. Given that fact and given the fact that facebook most certainly uses a simple page fetch to read in the delivered html response without any capability of parsing a related meta tag inject by javascript, the intended functionality will simply fail.
正如 _timm 所建议的，将元标记动态写入 dom 没有任何意义。这些 fb 元标记的主要用途之一是 FB-bot 对“分享”或“我喜欢”目标页面（操作页面）的解析，以便为 Facebook 墙贴自动填充提供自定义标题、图像和锚标签。鉴于这一事实，并且考虑到 facebook 肯定使用简单的页面获取来读取交付的 html 响应，而没有任何解析 javascript 注入的相关元标记的能力，预期的功能将简单地失败。
Now, there is a pretty simple fix to provide a compromise between a XHTML validation and successful parsing by facebook : wrap the facebook meta in html comments. That bypasses the w3c parser and facebook still recognizes the meta tags, cause it ignores the comment.
现在，有一个非常简单的修复方法可以在 XHTML 验证和 facebook 成功解析之间提供折衷：将 facebook meta 包装在 html 注释中。这绕过了 w3c 解析器，facebook 仍然可以识别元标记，因为它忽略了评论。
<!--
<meta property="og:image" content="myimage.jpg" />
<meta property="og:title" content="my custom title for facebook" />
-->
回答by Stoyan
starting today you can also use HTML5-compliant markup
从今天开始，您还可以使用符合 HTML5 的标记
e.g. instead of
例如代替
<fb:like href="example.org">
you can do
你可以做
<div class="fb-like" data-href="example.org">
Since data-* attributes are valid in HTML5
由于 data-* 属性在 HTML5 中有效
回答by kevin
Just a follow-up in case anyone uses the comment method. Facebook currently honors comments, so wrapping meta property tags in comments will cause Facebook to ignore them. If you check your pages with the Facebook URL Linter you can see they don't use commented-out meta tags.
以防万一有人使用评论方法。Facebook 目前尊重评论，因此在评论中包装元属性标签将导致 Facebook 忽略它们。如果您使用 Facebook URL Linter 检查您的页面，您会发现它们没有使用注释掉的元标记。
回答by James Dillinger
@Eric I hope you eventually found what you were looking for.
@Eric 我希望你最终找到了你想要的东西。
Twitter integration has its difficulties if you want to empower developers to validate irrespective of XHTML Strict 1.0 or HTML5. Facebook, on the other hand, is down right impossible with its custom FBML tags.
如果您想让开发人员在不考虑 XHTML Strict 1.0 或 HTML5 的情况下进行验证，那么 Twitter 集成就有其困难。另一方面，Facebook 的自定义 FBML 标签完全不可能。
On our last project my friend Jason and I knew two things for certain:
在我们的上一个项目中，我和我的朋友杰森确定了两件事：
- We were going to validate XHTML Strict 1.0 using Facebook's Like Button
- We were not going to add Technical Debt by fudging our DOCTYPE or xmlns
- 我们将使用 Facebook 的 Like Button 验证 XHTML Strict 1.0
- 我们不会通过捏造我们的 DOCTYPE 或 xmlns 来增加技术债务
The solution is to use a flexible, asynchronous JavaScript module. Thankfully, we had some help and guidance along the way: http://techoctave.com/c7/posts/40-xhtml-strict-tweet-button-and-facebook-like-button
解决方案是使用灵活的异步 JavaScript 模块。幸运的是，我们一路上得到了一些帮助和指导：http: //techoctave.com/c7/posts/40-xhtml-strict-tweet-button-and-facebook-like-button
回答by ceejayoz
FBML will not validate, as it's not valid XHTML. The W3C validator doesn't know what to do with it. The errors can be safely ignored.
FBML 不会验证，因为它不是有效的 XHTML。W3C 验证器不知道如何处理它。可以安全地忽略这些错误。
If you must must must have validation, you could use a <script>tag to output the FBML instead of directly including it in the page's HTML.
如果必须必须进行验证，则可以使用<script>标记来输出 FBML，而不是直接将其包含在页面的 HTML 中。
回答by zerkms
have you tried to add xmlns:fb="http://www.facebook.com/2008/fbml"?
你有没有尝试添加xmlns:fb="http://www.facebook.com/2008/fbml"？
回答by timm_
you can embed html tags into script via document.write.. http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/here how to do this with an example.
您可以通过 document.write 将 html 标签嵌入到脚本中 .. http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/这里如何通过一个例子来做到这一点。
回答by Welcho
For dose who are using "<javascript... document.write..." document.write is not a valid DOM procedure so in Fire Fox and Chrome if you use it in an XML/XHTML Strict with content-type as text/xml don't work.
对于使用"<javascript... document.write...“ document.write 不是有效的 DOM 过程的剂量，因此在 Fire Fox 和 Chrome 中，如果您在内容类型为 text/xml 的 XML/XHTML Strict 中使用它，则不起作用。
A valid DOM aproach that works for me:
对我有用的有效 DOM 方法：
<div id="FbCont">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var fb = document.createElement('fb:like');
fb.setAttribute("href","http://www.cirugia-obesidad.mx");
fb.setAttribute("layout","button_count");
fb.setAttribute("show_faces","true");
fb.setAttribute("width","100");
fb.setAttribute("font","arial");
document.getElementById("FbCont").appendChild(fb);
//--><!]]>
</script>
</div>
Hope this work for others.
希望这对其他人有用。
Welch
韦尔奇
回答by Robo Blingbo
RE: Welcho
回复：韦尔乔
Found the script type was causing an error for me (XHTML 1.0 Transitional). Also added for those who may be missing that.
发现脚本类型对我造成了错误（XHTML 1.0 Transitional）。也为那些可能错过的人添加了。
Your's is the best and easiest to use I have seen online to date. After looking over it again - ha! you're the best :)
你的是迄今为止我在网上看到的最好和最容易使用的。再看一遍后——哈！你是最好的 ：）
Cheers and thnks :)
干杯和谢谢:)
<div id="fb-root"></div>
<div id="FbCont">
<script type="text/javascript"
src="http://connect.facebook.net/en_US/all.js#appId=XYOURIDXyourapID=1">
</script>
<script type="text/javascript">
<!--//--><![CDATA[//>
<!--
var fb = document.createElement('fb:like');
fb.setAttribute("href","http://www.wakawakblahblah.com");
// fb.setAttribute("layout","button_count");
fb.setAttribute("send","true");
fb.setAttribute("action","recommended");
fb.setAttribute("show_faces","false");
fb.setAttribute("width","280");
fb.setAttribute("font","trebuchet ms");
document.getElementById("FbCont").appendChild(fb);
//--><!]]>
</script>
</div>
回答by Daniel
Always comment it out.
总是把它注释掉。
for the fb:like
对于fb：喜欢
<script language="javascript" type="text/javascript">
//<![CDATA[
document.write('<fb:like href="http://www.c-p-p.net" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>');
//]]>
</script>
also the Meta Datain the header
也元数据中的报头
<!--
<meta property="og:title" content=" some title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://c-p-p.net/" />
<meta property="og:image" content="site image" />
<meta property="og:site_name" content="site name" />
<meta property="og:description" content="description text" />
<meta property="fb:admins" content="some number" />
-->
repair the javascripttag add type="text/javascript"
修复javascript标签 add type="text/javascript"
<script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and for the iframeversion
和iframe版本
<script language="javascript" type="text/javascript">
//<![CDATA[
document.write('<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%..... allowTransparency="true"></iframe>');
//]]>
</script>
it works on my website http://c-p-p.net
它适用于我的网站http://cpp.net
