20

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.

Sven Bluege
  • 1,418
  • 1
  • 10
  • 19

5 Answers5

25

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.

Community
  • 1
  • 1
Aron
  • 3,419
  • 3
  • 30
  • 42
  • 2
    This fixed the issue for me. Can't believe how fragile the whole Facebook sharing setup is. Even in 2015. Sigh... – Form Mar 28 '15 at 19:01
  • 1
    Thanks @Aron I just put width and height and it worked, weeeird :O – Adrian Jul 05 '15 at 16:03
  • Amazing dude! I waisted days on this thing, it was driving me crazy. I would've never thought that adding width and height would've solved the problem. – Dario Barrionuevo Jun 18 '16 at 02:34
  • Sorry, I tried with your code but not working. Have any change at this time? Thanks. – Ave Feb 10 '17 at 08:08
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."

SoHo
  • 639
  • 1
  • 7
  • 19
0

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.

Sven Bluege
  • 1,418
  • 1
  • 10
  • 19
0

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>
Dan
  • 3,329
  • 2
  • 21
  • 28
  • 1
    The solution you suggest might help to fill the scraper cache but will also double your server load. – Sven Bluege Dec 05 '16 at 12:17
  • You are right @sven It depends what is your purpose: for example in this website: http://www.daysoldage.com/ every result is different. For a blog I don't suggest to use this trick. – Dan Dec 05 '16 at 14:46
0

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

zx485
  • 28,498
  • 28
  • 50
  • 59
Pablo Barbie Fumarola
  • 70
  • 3