New Facebook like button HTML validation

Question

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

Answer 1

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>

Answer 2

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!

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