Sanitarium by Zac Dreyer

How To customise Facebook link previews using Open Graph

Posted by zac on Thursday, April 4th, 2013

I was recent dragged kicking and screaming into Facebook content customization, specifically for auto-publishing of links back to articles on web sites. After a bit of struggling and with a lot of help from my best buddy Google I finally got something together what works beautifully.

 
First off we need to modify the HTML tag slightly so that the all the custom Facebook and Open Graph tag may be recognized by clients outside of Facebook. Your new HTML tag will look like this, assuming you are using XML as the document language, the og: and fb: parts are the important ones:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml>

 
 
Now for whats between the HEAD tags, this needs to be added in to your usual content:

<meta property="og:title" name="Title to be displayed on Facebook link" />
<meta property="og:description" content="Short description to be displayed on Facebook link" />
<meta property="og:url" content="Full URL, including http://, to actual article or linked paged" />
<meta property="og:type" content="article" />
<meta property="og:image" content="Full URL, including http://, of thumbnail to be displayed on Facebook link" />
<link rel="image_src" href="Full URL, including http://, of thumbnail to be displayed on Facebook link" />

 
Just a few notes regarding these tags:
Thumbnails: The thumbnail should be a minimum of 200px by 200px with a maximum size of 5MB. Also, the bigger the image the better as Facebook down samples and bigger images result in better quality. The maximum size is 1500×1500.
 
URL: If you are a tad lazy, like I am, and happen to be using PHP you could include the following line of code in your header, that way your og:url will always be correct –

<meta property="og:url" content="http://<?php echo $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; ?>" />

 
Title and Description: This content should always have special characters encoded as HTML entities, again if you are using PHP htmlspecialchars() will do this for you.
 
 
Now for the annoying part, testing and debugging. In case you are unsure, our friends at Facebook cache all pasted linked for 24 hours and in certain cases even longer. This is a true pain when it comes to testing a link result as you would basically need a unique URL for every test. One way of getting past this is to use a time-stamp or some such in the URL which is constantly changing and so prevents caching. If you don’t want to go through that much effort, and I normally don’t, you could just make use of Facebook’s Debugger Tool. This little joy will let you know whats wrong with your link sample as well as debug any other issues on your page relating to Facebook plugins.
 
That’s about it, fairly easy once you decode the Facebook Developer Documentation. Here are a few resources I used to get to this point,
Facebook Debugger Tool: http://developers.facebook.com/tools/debug
Stack Overflow – Facebook Post Link Image: http://stackoverflow.com/qu…
Open Graph Documentation: https://developers.facebook.com/docs/opengraph
Open Graph › Property Types: https://developers.facebook.com/docs/opengraph/…
How to Find the ID of a Facebook User: http://xen… ( http://graph.facebook.com/fbusername )

Posted in: Featured, Programming.

Comments are closed.