Facebook post link to wall - image is missing when it's fetched with script

Question

Hi! :)

I'm using following code using FB Javascript API to post link to wall:

 FB.ui({
    method: 'stream.publish',
    message: 'message text',
    target_id: null,   // friend id to post to; if null, posts to own wall
    attachment: {
       name: 'applcation name',
       href: 'http://whatever.com',
       description: 'description text',
       media: [{ type: 'image', src: 'http://something.com/image_file_1234.jpg', href: 'http://whatever.com' }]
    },
    user_message_prompt: 'Post to wall..'
 });

And it works fine - confirmation dialog shows up, image is in place. Perfect.

BUT, trouble starts when image src does not point to image file (real image file, physically stored on server as file). If I use URL pointing to script which echoes image to the browser (http://something.com/getimage.php?id=1234), there is no image in preview (nor post if I publish it). All headers I could think of are sent before image - starting with Content-Type and Content-Length to Last-Modified and Etag. Opens in browser normally, as image.

Ok, maybe FB doesn't like image files without appropriate extension, so I created rewrite rule which hides script under a '.jpg' file on server:

RewriteRule ^img(\d+)\.jpg$ getimage.php?id=$1 [L]

When i put http://something.com/img1234.jpg in browser's address bar it shows proper image. But thumbnail never shows up in confirmation dialog (nor post). Tried putting smaller image (up to 90px width and height, as i read somewhere) but it didn't help either.

I'm pretty much out of options here, that is - i'll have to start naming image files to have guessable names so i can use them directly and not request them through script.

Any ideas and suggestions in chasing this out on the open would be appreciated.

Cheers! :)

EDIT - Kartik (and other interested), this is PHP code:

header("Content-Type: image/jpeg");
header("Content-Length: " . filesize($file));
header("Last-Modified: " . gmdate("D, d M Y H:i:s", filemtime($file))." GMT");
header("Accept-Ranges: bytes");
header('Etag: '. md5_file($file));

here are headers produced by above code (taken from firebug):

Date            Mon, 18 Oct 2010 20:55:58 GMT
Server          Apache/2.2.14 (Ubuntu)
X-Powered-By    PHP/5.3.2-1ubuntu4.5
Content-Length  96705
Last-Modified   Mon, 18 Oct 2010 20:51:40 GMT
Accept-Ranges   bytes
Etag            d8da5fa5381a8325605d88d8fcb3f874
Keep-Alive      timeout=15, max=100
Connection      Keep-Alive
Content-Type    image/jpeg

and here are the headers received when image is requested directly (as file, so headers are set by web server):

Date            Mon, 18 Oct 2010 21:01:58 GMT
Server          Apache/2.2.14 (Ubuntu)
Last-Modified   Mon, 18 Oct 2010 20:51:40 GMT
Etag            "24c5cc-179c1-492ea57ce8f00"
Accept-Ranges   bytes
Content-Length  96705
Keep-Alive      timeout=15, max=100
Connection      Keep-Alive
Content-Type    image/jpeg

Answer 1

I think an easier approach would be to use the link meta tag facebook uses to fetch the thumbnail. The advantages of this approach are that if the link is shared on FB manually, fb knows where to grab the appropriate image. 2nd, yahoo uses these in their enhanced search monkey listings (dont know if this has changed since bing)

I add the following meta tag

You could use some sort of URL rewrite code to make sure the image you want is showing up for the appropriate page. Also remember fb caches these images, so if the image changed but the name remains the same, then fb will keep the old image, even for new links.

A workaround is to use urlrewite with a random and the image id, and then an http handler to load the image. something like this?

http://s.mysite.com/fbimage/temp#/imageid/fbimage.jpg/