Your browser may have trouble rendering this page. See supported browsers for more information.

|<<>>|208 of 273 Show listMobile Mode

Customizing Facebook Previews from your Website

Published by marco on

When someone posts a link to your web site on Facebook, it retrieves a preview and presents that as the default text, along with a selection of pictures it found in the page. Clearly, Facebook has some sort of scraper that extracts what it thinks is the best preview text from a given URL. Sometimes it works well, sometimes not. Luckily, you can tune your pages for Facebook requests, emphasizing the parts you think are important and belong in the preview.

It’s anybody’s guess how the scraper actually works but, at the very least, we know that it uses a special user agent when accessing your site. Given that, you can customize your response when Facebook comes calling. The user agent is given below:

facebookexternalhit/1.0 (+http://www.facebook.com/externalhit_uatext.php)

The earthli WebCore just recently got upgraded to detect Facebook. When a browser of unknown capabilities makes a request to a WebCore site, it generally includes a banner in the header, urging the user to download a supported browser (as shown below). Until recently, the message didn’t include HTML paragraph tags; once it acquired them, the Facebook scraper started using the warning text as the suggested summary for every link posted from WebCore sites.

This clearly would not do, therefore the earthli Browser Detector was updated to include support for detecting requests made for the purpose of extracting a preview.[1] Search engines generally frown on content-customization but Facebook can hardly complain. In the WebCore’s case, the default renderer now leaves off both the banner and footer of the page, generating only the page body, where the most important text is most likely to be.

[1] The download there is extremely out of date; download the latest version from the Mercurial repository instead.

To use the earthli Browser Detector, include the file in your PHP template and do something like the following:

$browser = new BROWSER();

if ($browser->is(Browser_previewer))
{
  // Render page for Facebook (and other previewers as they are supported)
}
else
{
  // Render page content for standard browsers
}

Of course, you can always do your own user-agent testing; you don’t have to use the browser detector, though it does offer many other useful capability checks and is rock-solid at browser detection.

Either way, customizing content for Facebook will go a long way to making links to your sites much easier and faster to create.