Facebook Debugger for Open Graph Properties
One of the cool feature Facebook provides, is the capability to share a link in our wall stream and post a preview image about that’s link/page/site.
Many times we see Youtube video shared on Facebook, and just on the left of the video title, there’s a thumbnail with a preview of the video.
That’s cool, and for many shared link, that preview is very important, because it helps out Facebook friends to understand, at a glance, what that link is about.
In Smappo, I wanted that, for every smapped events shared on Facebook, there was a bunch of thumbnails of the preview of that single event.
That bunch of images was so composed: one of the preview was the user’s avatar on Smappo, one the mini Google map with a small marker centered on latitude and longitude of the event’s address (that’s cool, and it’s a nice feature of georeferenced events in Smapppo), one is the event’s logo in the event’s detail page in Smappo, the last thumb is a generic Smappo image with a simple “check this event out”.
So, the easy way to get all this cool images appear on your Facebook wall when you share a link in your status box is coding some “og” namespace in the html page.
Step 1 (add NS to HTML tag):
<html xmlns:og=”http://ogp.me/ns#”>
Step 2 (add og attriubutes to your META tags):
<meta property=”og:title” content=”The Rock”/>
<meta property=”og:type” content=”movie”/>
<meta property=”og:url” content=”http://www.imdb.com/title/tt0117500/”/>
<meta property=”og:image” content=”http://ia.media-imdb.com/rock.jpg”/>
<meta property=”og:image” content=”http://ia.media-imdb.com/rock2.jpg”/>
<meta property=”og:image” content=”http://ia.media-imdb.com/rock3.jpg”/>
<meta property=”og:site_name” content=”IMDb”/>
<meta property=”fb:admins” content=”USER_ID”/>
The cool thing is that we can have MULTIPLE og:images. When you will share that link on your stream, Facebook will give you the chance to pick on of those images, so you can choose the best tho show as a thumb preview.
Step 3: Debug you Open Graph Information
http://developers.facebook.com/tools/debug
This Debugger tools is very usefull because it shows you how Favebook will manage your “og” information found in the page, it gives a feedback if any og is wrong, not expected, misspelled and most important, it shows all of your og:image so you can really check and debug the rightness of all your meta data in the html page.
