Facebook Open Graph No Image First Time

Question

I'm trying to configure a share/send button with a link. I've properly configured the open graph image tags on a page, but when opening the share/send dialog for the first time, the image doesn't show. Without refreshing the page, opening the share/send dialog for the second time, the image will show. The URL of the page and the images are all in HTTP (instead of HTTPS).

I can't simply use the URL-Linting tool as the page will have a unique URL. The website is about sending virtual flowers to people and so the page to be shared is freshly generated.

Would really appreciate some help :)

Answer 1

Found the problem. Somehow this problem happens if you don't set your open graph tags properly.

Incorrect:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />

Correct:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:secure_url" content="https://asdfg.com/<%= videoId %>/image" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />

Answer 2

UPDATE

This solution with iframe is not working anymore! Worked since yesterday 06 February 2017. Facebook just set X-Frame-Options as DENY so you cannot load the sharer url in an iFrame.

---

I added og:image:width and og:image:height, checked all my property tags and the problem was still there.

I found a workaround for this facebook bug that worked: I added an hidden iFrame with the sharer link in the page footer; in this way the facebook crawler check the page once is loaded.

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