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.
