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.
Comments
14 responses to “html5 validation with(!) facebook opengraph”
I think you might want keep “xmlns:fb” for other user agents than facebook too.
Check out http://fbml5.blogspot.com/ for tips on how to avoid using -items altogether.
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].
loving this! thanks!
right, just tried this in a project and works really well. yey for that!
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…
omg you’re right. thanks. *updating post…*
✌ Like
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!
of course, you’re right. can’t believe we had this posted for 6 months without anyone noticing. corrected it in the post. thanks!
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 `}`
Thank you very much for that script! I used it in my Blog. 🙂
lol
Hello, I like your blog labs | html5 validation with(!) facebook opengraph and have saved it on Mister-Wong 🙂 !
bye,
Stanley Vanscooter
Thank you! Nice