Facebook Share Dialog does not display thumbnails one first load

Question

I'm using the Facebook share dialog to share a specific url. The shared link contains an image which should be part of the sharing later on. The strange thing about this is that it works totally fine on mobile browsers. But desktop browser do not load the image at the first attempt. A simple reload of the sharing window fixes the missing image. Once this image shows up for at least one time it continues working in other browsers without additional reloads..

So my question is: Does anybody knows why the first call of this url does not show images?

Details

Link for opening the sharing dialog

Here is the output of the Facebook Debugger, which is free of errors and shows the image as well.

Facebook debugger output

Update

Seems to work with the Feed Dialog without any issues. But this is another way of sharing which I would like to prevent since it requires an App ID.

Answer 1

I have run into this issue as well and it turns out that Facebook has an undocumented "feature", likely implemented for optimization. It does not load your image during the first share.

The bug description can be found here: https://developers.facebook.com/bugs/657696104321030

In short, the solution is one of two possibilities.

1. The easiest is to include og:image:width and og:image:height as part of your ogtags describing the pixel width and height of the image. Strangely, this will (by design apparently) convince Facebook to scrape the site immediately, including image.

   <meta property="og:image" content="http://example.com/image.jpg"/ >

   <meta property="og:image:width" content="450"/>

   <meta property="og:image:height" content="298"/>

2. The second potential solution is to trigger a scrape manually via API. I have not tested this, but theoretically it is possible. See the relevant Stackoverflow discussion on this topic.

Answer 2

Facebook displays a cached image. It does so the first time the share is submitted or when Facebook crawler finds og:image tag on your page.

According to Facebook docs at https://developers.facebook.com/docs/sharing/best-practices#pre-cache-images

"Some of our Social Plugins render an image when someone is interacting with them. The image is based on the og:image on the page, or other images on the page if the og:image isn't set. Before the social plugin can render an image Facebook's crawler has to see the image at least once. For sites where pages change frequently (e.g. ecommerce) the first person who clicks on these plugins won't see a rendered image."

Answer 3

I found another way to force the facebook crawler to check the page before you click the share button: just include an hidden iFrame with the sharer facebook link.

Example:

<iframe src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com" style="width: 0px; height: 0px; margin: 0px; padding: 0px;"></iframe>

Answer 4

I finally I think I found the issue. The images I want to share are delivered by a PHP script instead of a plain file. It seems to be related to the way PHP delivers the images:

Bad:

echo readfile($image_thumb_file);

Good:

$fp   = fopen($image_thumb_file, "rb");
fpassthru($fp);

After doing this change my images finally appear in the Facebook debugger.

Answer 5

You also can check og:image:width and og:image:height properties.
This works for me.