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?
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.