在我的页面上添加新的facebook like按钮后,它不再使用XHTML严格标准验证。我遇到的两个错误是:
列出了类似按钮行中使用的所有变量,它们没有属性。该行如下:
<fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>
答案 0 :(得分:43)
以下是不交换doctype的解决方案:
正如zerkms建议的那样,添加“fb”命名空间仅适用于“fb:”属性。元标记的“property”属性仍然是无效的XHTML。
如您所知,Facebook建立在RDFa合规性的基础上,因此您可以使用以下doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
在大多数情况下,使用RDFa会带来比简单FB问题修复更多的问题。
如_timm建议的那样,动态地将元标记写入dom没有任何意义。这些fb元标记的主要用途之一是FB-bot解析“共享”或“我喜欢”目标页面(动作页面),以便为自动填充的facebok墙壁提供自定义标题,图像和锚标签。鉴于这一事实并且鉴于facebook肯定使用简单的页面提取来读取传递的html响应,而没有任何解析javascript注入的相关元标记的能力,预期的功能将完全失败。
现在,有一个非常简单的解决方法,可以在XHTML验证和facebook成功解析之间提供折衷:在HTML评论中包装facebook meta。绕过w3c解析器并且facebook仍然识别元标记,导致它忽略评论。
<!--
<meta property="og:image" content="myimage.jpg" />
<meta property="og:title" content="my custom title for facebook" />
-->
答案 1 :(得分:25)
e.g。而不是
<fb:like href="example.org">
你可以做到
<div class="fb-like" data-href="example.org">
由于data- *属性在HTML5中有效
答案 2 :(得分:4)
如果有人使用评论方法,只需跟进。 Facebook目前支持评论,因此在评论中包含元属性标签将导致Facebook忽略它们。如果您使用Facebook URL Linter检查页面,则可以看到他们不使用已注释掉的元标记。
答案 3 :(得分:2)
FBML不会验证,因为它不是有效的XHTML。 W3C验证器不知道如何处理它。可以安全地忽略错误。
如果必须必须进行验证,则可以使用<script>
标记输出FBML,而不是直接将其包含在页面的HTML中。
答案 4 :(得分:2)
@Eric我希望你最终能找到你想要的东西。
如果您想让开发人员无论XHTML Strict 1.0还是HTML5都能进行验证,那么Twitter集成就会遇到困难。另一方面,Facebook使用自定义FBML标签是不可能的。在我们的最后一个项目中,我的朋友杰森和我确实知道两件事:
解决方案是使用灵活的异步JavaScript模块。值得庆幸的是,我们在此过程中得到了一些帮助和指导:http://techoctave.com/c7/posts/40-xhtml-strict-tweet-button-and-facebook-like-button
答案 5 :(得分:1)
您是否尝试添加xmlns:fb="http://www.facebook.com/2008/fbml"
?
答案 6 :(得分:1)
你可以通过document.write将html标签嵌入到脚本中。 http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/这里有一个例子如何做到这一点。
答案 7 :(得分:1)
对于正在使用"<javascript... document.write...
的剂量“document.write不是有效的DOM程序,所以在Fire Fox和Chrome中如果你在XML / XHTML Strict中使用它,内容类型为text / xml不工作
适用于我的有效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>
希望这对别人有用。
韦尔奇
答案 8 :(得分:1)
RE:Welcho
发现脚本类型导致了我的错误(XHTML 1.0 Transitional)。还为那些可能错过的人添加了。
我是迄今为止在网上看到的最好和最简单的。再看一遍之后 - 哈!你是最好的:)
欢呼和嘘声:)
<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>
答案 9 :(得分:1)
始终将其评论出来。
对于 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>
标题
中的元数据<!--
<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" />
-->
修复 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://c-p-p.net
答案 10 :(得分:0)
我最近用过:
<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>
它似乎工作正常,即使它有点臭。
答案 11 :(得分:0)
好的,经过几百个这样的帖子,我终于找到了一个快速简便的方法来获得一个带有Like按钮(或任何其他facebook小部件)的有效页面。
只需几行代码,请查看http://www.liormark.com/develop/development-articles/facebook-fbml-w3c-validation-solved
答案 12 :(得分:0)
这是一个很好的解决方案。如果您要使用document.write,请使用它,如下所示,它将完美验证
<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>
答案 13 :(得分:0)
我已使用此代码,它对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>
答案 14 :(得分:0)
这是用于使任何标签或无法识别的代码经过验证的纯解决方案(技巧)!
我使用smarty作为模板引擎,但如果你不这样做,它可以用同样的方式完成!
我想的更多的是技巧而不是解决方案(因为到目前为止还没有人),只是让W3C Validator通过验证只是通过NOT显示那些元字符串。
当Validator使用PHP引用我的页面时,我不会呈现W3C Validator无法识别的内容。我只是通过提取由W3C Validator发送的标题信息来做到这一点,W3C Validator是用户代理,它是W3C_Validator / version。
创建PHP函数并将其分配给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尝试检查您的页面时,这些元标记不会输出到页面!当任何其他用户代理看到您的页面时,那些代码就像往常一样输出!你可以为Facebook Like Button或任何OG元标记执行此操作 - 实际上是为了其他任何东西。
这对我来说恰好是时代精神的正确解决方案!