新的Facebook像buttonHTMLvalidation
在我的页面上添加新的Facebook likebutton后，不再使用XHTML严格标准进行validation。 我遇到的两个错误是：
- 所有的元属性标签都说没有属性属性 ，
-
所有在类似的button行中使用的variables被列出，没有它的属性。 线路如下：
<fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>
这是一个不交换文档types的解决scheme：
如zerkmsbuild议的那样，添加“fb”命名空间仅适用于“fb：”属性。 元标记的“属性”属性保持无效的XHTML。
如您所知，Facebook构build于RDFa合规性之上，因此您可以使用以下文档types：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
但是，在大多数情况下，使用RDFa会带来比简单的FB问题修复更多的问题。
正如_timm所build议的那样，将元标记dynamic地写入dom没有任何意义。 这些fb元标签的主要用途之一是对“共享”或“我喜欢”的目标页面（动作页面）的FB-botparsing，以提供自定义标题，图像和anchorbok墙后自动填充的锚标签。 鉴于这一事实，并给予事实，Facebook大多数肯定使用简单的页面提取读取传递的HTML响应没有任何parsing相关的元标记JavaScript的注入能力，预期的function将简单地失败。
现在，有一个非常简单的解决scheme，提供了一个XHTMLvalidation和成功parsingFacebook之间的折中：在HTML注释中包装Facebook元。 绕过w3cparsing器，Facebook仍然识别meta标签，导致它忽略评论。
<!-- <meta property="og:image" content="myimage.jpg" /> <meta property="og:title" content="my custom title for facebook" /> -->
从今天开始，您还可以使用符合HTML5的标记
例如，而不是
<fb:like href="example.org">
你可以做
<div class="fb-like" data-href="example.org">
由于data- *属性在HTML5中有效
只要是任何人使用评论方法的后续行动。 Facebook目前正在评论评论，所以在评论中包含元属性标签会导致Facebook忽略它们。 如果您使用Facebook URL Linter检查您的页面，您可以看到它们不使用注释掉的元标记。
FBML将不会validation，因为它不是有效的XHTML。 W3Cvalidation器不知道如何处理它。 错误可以安全地忽略。
如果必须必须validation，则可以使用<script>标记输出FBML，而不是直接将其包含在页面的HTML中。
@Eric我希望你最终find你正在寻找的东西。
如果你想让开发人员能够validation，无论XHTML严格1.0还是HTML5，Twitter整合都有其困难。 另一方面，Facebook使用自定义的FBML标签是不可能的。
在我们的最后一个项目中，我的朋友杰森和我明确了两件事情：
- 我们将使用Facebook的Like Button来validationXHTML Strict 1.0
- 我们不会通过欺骗我们的DOCTYPE或xmlns来增加技术债务
解决scheme是使用一个灵活的，asynchronous的JavaScript模块。 谢天谢地，我们一路上有一些帮助和指导： http : //techoctave.com/c7/posts/40-xhtml-strict-tweet-button-and-facebook-like-button
你有没有尝试添加xmlns:fb="http://www.facebook.com/2008/fbml" ？
你可以通过document.write将html标签embedded到脚本中。http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/这里以一个例子来说明如何做到这一点。;
对于正在使用"<javascript... document.write... ”的剂量，document.write不是一个有效的DOM过程，所以在FireFox和Chrome中，如果您在XML / XHTML Strict中以content-type作为文本/ XML不起作用。
一个有效的DOM aproach适合我：
<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>
希望这项工作为他人。
韦尔奇
RE：Welcho
发现脚本types对我造成了一个错误（XHTML 1.0 Transitional）。 也添加为那些可能会错过的人。
你的是我迄今在网上看到的最好最容易使用的。 再看一遍，哈哈！ 你是最好的 ：）
欢呼声和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>
总是把它评论出来。
为fb：喜欢
<script language="javascript" type="text/javascript"> //<![CDATA[ document.write('<fb:like href="http://www.cpp.net" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>'); //]]> </script>
也是标题中的元数据
<!-- <meta property="og:title" content=" some title" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://cpp.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" /> -->
修复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>
和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>
它可以在我的网站http://cpp.net上运行;
我最近使用过：
<script type="text/javascript"> document.write('<fb:like href="http://www.mywebsite.co.uk" layout="button_count" show_faces="true" width="100"></fb:like>'); </script>
即使有点臭，它似乎工作正常。
好吧，经过几百个这些post，我终于find了一个快速和简单的方法来获得一个有效的页面上有一个Likebutton（或任何其他的Facebook小部件）。
只是代码的几行，看看http://www.liormark.com/develop/development-articles/facebook-fbml-w3c-validation-solved
这是一个很好的解决scheme。 如果你打算使用document.write，如下所示，它会完美validation
<script type="text/javascript"> //<![CDATA[ (function() { document.write('<a href="https://twitter.com/share" data-count="vertical" data-via="siteripe">Tweet</a>'); var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://platform.twitter.com/widgets.js'; s1.parentNode.insertBefore(s, s1); })(); //]]> </script>
我已经使用了这个代码，它对W3C Validator有效。
<script type="text/javascript"> <!--//--><![CDATA[//><!-- document.write('<fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>'); //--><!]]> </script>
这是纯粹的解决scheme（技巧）使任何标签或不被识别的代码validation！
我使用smarty作为模板引擎，但是如果你不这样做，也可以用同样的方法来完成。
我想到了更多的技巧而不是解决scheme（因为目前还没有解决scheme），只是让W3Cvalidation器通过validation，而不是向那些元string显示。
当Validator使用PHP引用我的页面时，我不会呈现W3C Validator无法识别的内容。 我只是通过提取W3C Validator发送的头信息来做到这一点，W3C Validator是用户代理，它是W3C_Validator / version。
-
创buildPHP函数并将其分配给Smarty：
function User_Agent_Check($user_agent) { $user_agent_check = strpos($_SERVER['HTTP_USER_AGENT'], $user_agent); if ($user_agent_check === false) { return false; } else { return true; } } -
那我们来看看用户代理：
if (User_Agent_Check("W3C_Validator")) { $smarty->assign('W3C', "1"); } else { $smarty->assign('W3C', "0"); } -
然后在你使用的Smarty模板中（如果你不使用Smarty，只需用PHP“回显”内容）：
{if $W3C == 0} <meta property="og:url" content=""> <meta property="og:title" content=""> <meta property="og:description" content=""> <meta property="og:type" content="video"> <meta property="og:image" content=""> <meta property="og:video" content=""> <meta property="og:video:type" content="application/x-shockwave-flash"> <meta property="og:video:width" content="1920"> <meta property="og:video:height" content="1080"> <meta property="og:site_name" content=""> <meta property="fb:app_id" content=""> <meta name="twitter:card" content=""> <meta name="twitter:site" content=""> <meta name="twitter:player" content=""> <meta property="twitter:player:width" content="1920"> <meta property="twitter:player:height" content="1080"> {/if}
当Validator尝试检查您的页面时，这些meta标签只是不会输出到页面！ 当任何其他用户代理正在看你的页面，那么这些代码就像往常一样输出！ 您可以为Facebook Like Button或任何OG Metatags做到这一点 – 实际上是其他任何东西。
这恰好是我的时代精神解决scheme！
