36

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

1

15 Answers 15

43

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" />
-->
2
  • 1
    I just tested the Facebook meta comment-out solution on my site and it worked. Facebook still read the meta tags even though they were commented out. My page now validates with W3C. Nice solution.
    – mitchf
    Jan 16, 2011 at 3:14
  • 3
    I just tested this and Facebook ignored the comments and reverted to grabbing the data from the DOM. For anyone else looking to test where they get the data, here is FB's Linter.
    – patridge
    Apr 14, 2011 at 16:43
25

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

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.

2

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.

2
  • 4
    XHTML is X HTML because it is e X tensible. w3c validator can get fb: tags description with proper xmlns specification
    – zerkms
    May 3, 2010 at 22:51
  • I've had difficulty getting the validator to pick up extended namespaces like FBML, but that was a while ago.
    – ceejayoz
    May 4, 2010 at 1:58
2

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

  1. We were going to validate XHTML Strict 1.0 using Facebook's Like Button
  2. 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

1

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

1

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.

1
  • this isn't a good idea because the like button will work but when facebook comes around to index your page it wont run the javascript document.write so it wont see the tags
    – rtpHarry
    Mar 18, 2011 at 11:17
1

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

1

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

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

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

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

1
  • For the sake of future-proofing, the code on this page is: <script language="javascript" type="text/javascript"> //<![CDATA[ document.write('<fb:like href="yourdomain.com" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>'); //]]> </script>
    – jsims281
    Feb 7, 2011 at 10:10
0

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

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

Here is the pure solution (trick) for making ANY tags or not recognized codes validated!

I use smarty as a template engine, but it can be done the same way if you don't!

I thought up more a trick rather than a solution (because there is no one so far) and just made W3C Validator to pass validation simply by NOT showing those meta strings to it.

When Validator referring to my page, using PHP, I don't render the content that is not recognized by W3C Validator. I simply do this by extracting headers' information that is sent by W3C Validator, which is user-agent and which is W3C_Validator/version.

  1. Create PHP function and assign it to 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. Then let's check the user agent:

    if (User_Agent_Check("W3C_Validator")) {
       $smarty->assign('W3C', "1");
     } else {
       $smarty->assign('W3C', "0");
    }
    
  3. Then in Smarty template you use (if you don't use Smarty just 'echo' the content with 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}
    

When Validator tries to check your page those meta tags are just not output to the page! When any other user agent is seeing your page then those codes are just output as usual! You can do this for Facebook Like Button or for any OG Metatags - actually for anything else.

It's happened to be zeitgeist right solution for me!

3
  • The point is obvious - most people want to validate not supported tags. So that was the point and my solution. Easy and working. Not perfect though - but there is no perfect decision here, I think!
    – Ilia Ross
    Jul 4, 2012 at 8:07
  • But why do you want to validate if the page everyone really sees is not valid? The only reason I'd care about valid HTML is if I'm worrying about a browser switching to quirks mode or something, and they're going to do it with this.
    – Charlotte
    Jul 4, 2012 at 12:11
  • Well, ok! then I will adjust my code later so these tags are only shown to specific: Facebook, Twitter or Google for example! In all other cases it will be hidden including for the browsers and would prevent them going to quirks mode? These tags are only important for certain applications (websites) so why don't we show those tags just for them? How about this?
    – Ilia Ross
    Jul 13, 2012 at 16:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.