html5 validation with(!) facebook opengraph

html5 is that new, cool(?) technology which you should(?) be using when making new sites. but, being the thorough developer you are – it just eats you up from the inside when your brand new html5 website won’t validate because your client decided to add a facebook like button.

the facebook open graph protocol/namespace/api/whatever which was released in spring 2010 will only validate with an xhtml doctype. if you want to work in a html5 doctype and use opengraph, you need to apply a little bit of server logic. have a look at this, i won’t bother explaining the source code, i think you’ll get it.

<?php
function is_facebook(){
if(!(stristr($_SERVER[“HTTP_USER_AGENT”],’facebook’) === FALSE))
return true;
}
}
?><!DOCTYPE html>
<html dir=”ltr” lang=”en-US”<?php if(is_facebook()){echo ‘ xmlns:fb=”http://www.facebook.com/2008/fbml” xmlns:og=”http://opengraphprotocol.org/schema/”‘;}?>>
<head>
<title><?php bloginfo(‘name’); ?></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<?php if(is_facebook()){?>
<meta property=”og:title” content=”<?php echo $title;?>”/>
<meta property=”og:description” content=”<?php echo $description;?>”/>
<meta property=”og:type” content=”article”/>
<meta property=”og:image” content=”<?=$path_to_page_thumbnail?>”/>
<meta property=”og:url” content=”http://<?php echo $_SERVER[“HTTP_HOST”].$_SERVER[“REQUEST_URI”];?>”/>
<meta property=”og:site_name” content=”<?=$the_name_of_the_site?>”/>
<meta property=”fb:appid” content=”<?=$your_fb_app_id?>”/>
<?php }?>

one thing to have in mind is that page level caching is a no go if you apply this tactic. if your cache is clever, you could possibly make an exception for the facebook user agent, delivering fresh content to facebook on all requests.

oh well, it’s just a thought. let me know if i missed something.

14 thoughts on “html5 validation with(!) facebook opengraph

  1. Some text was removed by the comment filter in my previous post.

    The website I linked to describes how to avoid using the fb-html-items like [fb:login] or [fb:comment].

  2. Thanks for the help!
    However, I think your test is wrong.

    You should be doing :
    if(stristr($_SERVER[“HTTP_USER_AGENT”],’facebook’) === FALSE)

    Because if “facebook” is the first word, stristr will return 0 and it will be interpreted as false…

  3. Okay, maybe I’m wrong… but shouldn’t that be

    if(!(stristr($_SERVER[“HTTP_USER_AGENT”],’facebook’) === FALSE))
    return true;
    ?

    If the string ‘facebook” is not (FALSE) in the user agents the is_facebook function should not return true… should it?

    I tried (faking my user-agent) and it does seem to work, this way.

    Thanks for the idea, anyway, it’s interesting!

  4. of course, you’re right. can’t believe we had this posted for 6 months without anyone noticing. corrected it in the post. thanks!

  5. Thanks for the workaround. I did encounter a error on the is_facebook function

    function is_facebook(){
    if(!(stristr($_SERVER[“HTTP_USER_AGENT”],’facebook’) === FALSE))
    return true;
    }
    }

    The post doesn’t have a `{` after the if statement and fatals out when PHP tries to parse the second `}`

Comments are closed.