17

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 :)

Freeman
  • 1,201
  • 1
  • 11
  • 20
  • Possible duplicate of [Share on Facebook - Thumbnail not showing for the first time](http://stackoverflow.com/questions/17226392/share-on-facebook-thumbnail-not-showing-for-the-first-time) – rogerdpack Apr 26 '17 at 17:51

7 Answers7

43

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" />
Freeman
  • 1,201
  • 1
  • 11
  • 20
  • 1
    Had the same issue, setting the type, width and height fixed it. Thanks! – Sophivorus Jan 16 '15 at 22:54
  • 5
    +1, thanks! By the way, in my own testing, I found that setting width and height is sufficient; setting type is unnecessary. – asadovsky Feb 15 '15 at 20:08
  • Wow... setting width and height solved the ussue. Tnx. – deanpodgornik Mar 09 '15 at 09:12
  • 5
    Please note, that your original tag WAS set properly, as facebook defines width and height as OPTIONAL. So it still should be regarded as a facebook bug. – aaimnr Apr 25 '15 at 17:28
  • 3
    Didn't work for me. Not sure if anything has changed on the Facebook end. – benb Jul 27 '15 at 10:13
  • Worked for me as of 8/30/2015. It's annoying working with Facebook related stuff because answers are irrelevant weeks later. – Justin Skiles Aug 30 '15 at 17:08
  • First testing the link with the [Debugger](https://developers.facebook.com/tools/debug/) also works, but that is annoying and this answer is better. – ACJ Dec 12 '15 at 17:19
  • Worked for me on 7/13/16 - boy it sure would be nice if Facebook would document this :) – leepowers Jul 14 '16 at 02:40
  • 3
    This is not working for me. I've added every single tag listed and it still doesn't pick it up. – Whit Jan 27 '17 at 16:38
  • 1
    2017-02-06 - did not work for me, added all the tags, still no image load on first share. – GTCrais Feb 06 '17 at 14:29
  • I've tried every single answer here, none of them make the image load on the first share attempt. –  Dec 28 '17 at 13:21
3

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>
Dan
  • 3,329
  • 2
  • 21
  • 28
  • This hack totally works, after adding the og:image:width/height nothing would work but this. One note is to add border:0 and position:absolute or some browsers will show a space for the iframe. Final code would be: `` Of course don't forget to replace `http%3A%2F%2Fwww.example.com` with the url of the page you are trying to share. – Brian Jenkins Feb 02 '17 at 14:54
  • Thanks for the fix. Note that this hack can load your site... but this is the only way I found for this (facebook) bug. I don't suggest to use this solution in blogs. I suggest you to use it when you have a page result always different (eg: www.nametest.com or www.daysoldage.com ) – Dan Feb 02 '17 at 15:07
2

This might help someone.

I found that Facebook did not like the square image I used (1000px x 1000px),
so I cropped it to 660px x 315x and Facebook accepted it.

Setting og: width and height did not help and it was literally about the image dimensions.

zx485
  • 28,498
  • 28
  • 50
  • 59
Paulina Simkute
  • 21
  • 1
1

One more possible answer that worked for me - make sure you have the og:image meta tag set before all the other tags, otherwise it still doesn't work!

Jonathan Plackett
  • 2,346
  • 2
  • 20
  • 33
1

You should provide the image link correctly in the og:image property. If you still not get the thumbnail, add image height and width like this:

<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="298" />
MichielB
  • 4,181
  • 1
  • 30
  • 39
Mahesh
  • 93
  • 1
  • 8
  • this is the working solution! more about this i found here: https://medium.com/web-design-web-developer-magazine/facebook-share-dialog-box-not-showing-image-the-first-time-you-share-a-story-ed19d0f3ad36 – davey Dec 15 '17 at 06:22
0

Perhaps, it will help someone. No idea why, but after removing this from my 'head' block

<link rel="image_src" href="{MY_IMAGE_URI_HERE}" />

The problem has been solved.

Here's my meta tags

...
<meta property="fb:app_id" content="{APP_ID}"/>
<meta property="og:image" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:secure_url" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:width" content="450" /> 
<meta property="og:image:height" content="236" />
<meta property="og:url" content="{PAGE_URI}"/>
<meta property="og:title" content="{PAGE_TITLE}"/>
<meta property="og:description" content="{PAGE_DESC.}"/>
...

I'm using 'https' in both meta tags (og:image & og:image:secure_url), because the website is using ssl.

Boris
  • 531
  • 5
  • 12
0

If you're still having problems, you may also need to add the MIME type property, like this:

<meta property="og:image:type" content="image/jpeg">

NOTE: that's image/jpeg not image/jpg — (you gotta have the e in there)

FB crawler accepts image/gif, image/jpeg, image/png

Rowe Morehouse
  • 4,451
  • 3
  • 28
  • 28