Images in Facebook Share Links Posted on: 2011-03-29

One of my pet peeves is how facebook allows you to specify a url and description when using the like button (or the old sharer.php url), but not a link to the image you would like to be displayed when the link is displayed on the user's profile. This has especially come into play when loading the item to share using ajax and there not being enough content to warrant building a whole new template just for that small bit of content.

In such a case, I usually load up the content when the link is shared via a hashtag in the url. This however means nothing in terms of what facebook sees as the content would be loaded up using Javascript. Thus I've had to come up with a rather hacky solution which is to append a parameter to the end of the url that you can use when facebook crawls the link for the image to use and then if that parameter is present, output the image tag that facebook looks for.

The best way to explain this is probably by example, so here goes:

Let's say I wanted to share http://example.com... I would pass the url to facebook as follows: http://example.com?fb_image=http://example.com/url/to/image.jpg#content=id then in the header of the site, use the following snippet of code:

<?php if (!empty($_REQUEST['fb_image'])): // The image we want facebook to see when sharing links. ?>
    <meta property="og:image" content="<?php $_REQUEST['fb_image']; ?>" />
<?php endif; ?>

You can even go a step further and make the link a bit.ly link if you want to hide the extra parameter.

There are still some other problems with this work-around, but provided the only facebook link you would ever share on a particular page would be ajax-loaded content, then it should work just fine.