Facebook’s integration which allows you to post a page to Facebook is really clever.

A bit too clever in fact.

The integration allows you to pass the url and title though to the sharing window. The sharing window then goes and take s a look at the page and selects the first few images it finds as likely candidates to use as thumbnail options.

However there’s no functionality built in there to tell Facebook which images you’d like it to use.

The Facebook Developers documentation suggests specifying the image in a meta tag

<link rel="image_src" href="http://media.clickonf5.org/image/logo.png" />

However it seems that the sharing window doesn’t actually pay any attention to this, and certainly doesn’t allow you to specify multiple images.

I discovered this problem recently when I wanted to allow users to post a link to Facebook, but none of the images on the page were relevant to use as thumbnails.

The solution I ended up using was to look at the the header information before the page loaded, and if the client requesting the page was the Facebook sharer page, I present just a page with the thumbnails I want to choose from. Then exist the script as the sharer doesn’t need to see any more of the page.

if (strstr($_SERVER['HTTP_USER_AGENT'], 'facebookexternalhit')) {
?>
<img decoding="async" src="http://mysite.com/images/facebookimage1.gif" alt="" />
<img decoding="async" src="http://mysite.com/images/facebookimage2.gif" alt="" />
<!--?php <br ?--> exit();
}