新的Facebook就像按钮HTML验证

时间:2010-05-03 22:24:52

标签: html facebook

在我的页面上添加新的facebook like按钮后,它不再使用XHTML严格标准验证。我遇到的两个错误是:

  1. 所有元属性标签都表示没有属性 property ;
  2. 列出了类似按钮行中使用的所有变量,它们没有属性。该行如下:

    <fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>

15 个答案:

答案 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)

从今天开始,您还可以使用符合HTML5标准的标记

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标签是不可能的。

在我们的最后一个项目中,我的朋友杰森和我确实知道两件事:

  1. 我们将使用Facebook的Like Button
  2. 验证XHTML Strict 1.0
  3. 我们不会通过捏造我们的DOCTYPE或xmlns
  4. 来添加技术债务

    解决方案是使用灵活的异步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。

  1. 创建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;
        }
    }
    
  2. 然后让我们检查用户代理:

    if (User_Agent_Check("W3C_Validator")) {
       $smarty->assign('W3C', "1");
     } else {
       $smarty->assign('W3C', "0");
    }
    
  3. 然后在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}
    
  4. 当Validator尝试检查您的页面时,这些元标记不会输出到页面!当任何其他用户代理看到您的页面时,那些代码就像往常一样输出!你可以为Facebook Like Button或任何OG元标记执行此操作 - 实际上是为了其他任何东西。

    这对我来说恰好是时代精神的正确解决方案!