Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
556 views
in Technique[技术] by (71.8m points)

image - Facebook Share Dialog does not display thumbnails one first load

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...