Wednesday, May 30, 2012

New Facebook like button HTML validation


After adding the new facebook like button to my page, it no longer validates using XHTML strict. The two errors I come across are:



  1. All of the "meta property" tags say that "there is no attribute "property""



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




Source: Tips4all

16 comments:

  1. 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" />
    -->

    ReplyDelete
  2. starting today you can also use HTML5-compliant markup

    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

    ReplyDelete
  3. 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.

    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.

    ReplyDelete
  4. 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.

    ReplyDelete
  5. have you tried to add xmlns:fb="http://www.facebook.com/2008/fbml"?

    ReplyDelete
  6. 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

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

    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>

    ReplyDelete
  8. 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.

    ReplyDelete
  9. @Eric I hope you eventually found what you were looking for.

    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.

    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


    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

    ReplyDelete
  10. 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.

    ReplyDelete
  11. Ok, after going over literally hundreds of these posts, I finally found a quick and easy way to get a valid page with a Like button (or any other facebook widget) on it.

    Just a fewlines of code really, take a look at http://www.liormark.com/develop/development-articles/facebook-fbml-w3c-validation-solved

    ReplyDelete
  12. I have a solution. Just to wrap tags in JS and document.write it.

    http://nerdramblings.tumblr.com/post/3213578636/html5-and-facebooks-fbml

    J.

    ReplyDelete
  13. Here is a good solutions. If you're going to use document.write use it as shown below and it will validate perfectly

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

    ReplyDelete
  14. 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

    ReplyDelete
  15. I just wrote an article describing all the changes I had to do get 100% W3C Compliant with Facebook Social Plugins. Hope it helps and you can find it here:

    http://intensewebsites.blogspot.com/2010/11/fix-for-w3c-valid-xhtmlrdfadoctype-for.html

    ReplyDelete
  16. You can find a solution to your problem here: http://www.londoncitygallery.co.uk/valid-fb-button.html

    ReplyDelete