CODEWITHSUNDEEP
facebookfacebook-sharer
digijim
digijim

Reputation: 686

Thumbnail only appears in Facebook Share dialog after refreshing the page

I've added a FB share button to a page on my site, using this method: https://developers.facebook.com/docs/reference/plugins/share-links/

Source code looks like this:

<a href="https://www.facebook.com/sharer/sharer.php?
    u=https://[subdomain].mysmilecentral.com/public/show?link_code=[access code for individual's photo]" target="_blank">
    <img src="https://[our S3 bucket]/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>

I've got the FB Javascript SDK loading asynchronously, and am using OG meta tags:

<meta property="og:url" content="https://[subdomain].mysmilecentral.com/public/show?link_code=[access code for individual's photo]" />
<meta property="og:title" content="Order Pictures of [child's name] at [studio name]'s MySmileCentral!" />
<meta property="og:description" content="View images and/or order pictures of [child's name]." />
<meta property="og:image" content="https://[our S3 bucket]/[path to JPEG image]" />

Facebook's Object Debugger finds everything without a problem.

However, the Share Dialog doesn't show the thumbnail image defined in my og:image tag until I refresh the page. Every subsequent time that image is shared the thumbnail properly displays without needing a page-refresh.

What's the issue here?

Upvotes: 0

Views: 3365

Answers (3)

digijim
digijim

Reputation: 686

For anyone revisiting this issue, as of approximately Nov. 11, 2014, Facebook has provided a better solution than previously mentioned. According to this FB bug report:

If your site provides both og:image, og:image:width and og:image:height, that image will be used even for the first share created. Failing to provide these means that you will need to wait for our crawlers to fetch and analyze the images first.

See http://ogp.me/#structured for an example of how this can be done.

Upvotes: 2

Artem Vasilev
Artem Vasilev

Reputation: 2211

I faced similar issue, submitted a bug to Facebook: https://developers.facebook.com/bugs/354887144656001 The first share issue appeared to be known bug to them, and there they suggest a workaround (submitting the new page to FB Debugger programmatically right after page creation).

Upvotes: 1

glautrou
glautrou

Reputation: 3198

Can you confirm that your image is valid:

og:image – This is an image associated with your media. We suggest that you use an image of at least 200x200 pixels. However, bigger is better, so if you have a 1500x1500 image that you can use, please use it. We'll downsample and crop it for for people using smaller-resolution devices but will use it on a larger device. The larger this image is, the more likely it will be used when sharing stories on Facebook. (Note: image sizes must be no more than 5MB in size.)

From Facebook: Maximizing Distribution for Media Content

EDIT:

Clear the cache of your browser.

Upvotes: 1

Related Questions