24 Jun 2012

A short post for the benefit of those struggling with this as I was: the little parser that Facebook uses when you share a link is insane, don't trust it.

That parser is what creates thumbnails for links shared in Facebook. It reads the contents of a page and allows you to choose an image. The problem is that more often than not, it can't find the images. It's got a lot of limitations: image size, image position in the document and it also has a tendency to just randomly stop working.

It's particularly bad when you start adding images as CSS backgrounds since those are completely ignored, even if you have fallbacks for crawlers like google etc. So today I once again found myself with this problem, Facebook refusing to use my images anymore. So any link to a comic would not show the actual thumbnail of the comic, which I find extremely annoying.

That meant I finally needed to cave in and use their extensions: I created a thumbnail for each post and added a few tags at the top of the page so that Facebook can find the right image.

To fix it, Create a thumbnail for your images and add the following to your HTML document (head section):

<meta property="og:image" content="http://address.of/your.image_thumb.png">
<meta property="og:title" content="Optional text">

That's it. Want to check if it works? Use the Facebook URL debug page. It will tell you whether the tags were interpreted or not.

Note: for creating a thumbnail you can use Imagemagick, for instance using "convert -crop 300x300+0+0 image.png image_thumb.png".


(Follow me on Twitter, on Facebook or add this RSS feed) (Sígueme en Twitter, on Facebook o añade mi feed RSS)
details

Comments