发表新帖
发表新帖

New Facebook like button HTML validation

前端 未结
关注
15 1899
抹茶落季
抹茶落季 2020-12-02 11:34

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:

  1. All of the
相关标签:
15条回答
  • 难免孤独
    2020-12-02 11:56

    I've recently used:

    <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>

    and it seems to work fine, even if it is a bit smelly.

    0 讨论(0)
  • 暗喜
    2020-12-02 11:59

    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.

    0 讨论(0)
  • 太阳男子
    2020-12-02 12:00

    I've used this code and it is valid for 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>
    0 讨论(0)
  • 暖寄归人
    2020-12-02 12:01

    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.

    As you know, Facebook builds upon the RDFa compliance, so you could use the following doctype:

    <!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.

    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.

    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.

    <!--
<meta property="og:image" content="myimage.jpg" />
<meta property="og:title" content="my custom title for facebook" />
-->
    0 讨论(0)
  • 走了就别回头了
    2020-12-02 12:01

    Always comment it out.

    for the fb:like 

    <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 Data in 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 javascript tag 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 iframe version

    <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

    0 讨论(0)
  • 忘掉有多难
    2020-12-02 12:04

    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.

    A valid DOM aproach that works for me:

    <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

    0 讨论(0)
 看不清?
提交回复
热议问题