28

https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.frcc.us%2F1197%3Fv%3D3422%26f%3D5

You should see it has thumbnail now. But every time I post a new link from my website (configured like the above example), the thumbnail won't show up for the first time. I have to refresh, and then the thumbnail shows.

I should include valid og tags. When I test my links on https://developers.facebook.com/tools/debug

Sometimes it gives me error saying og:image should be bigger. Then I just have to debug it again and then the error is gone.

og:image for all my links is the same. I have provided largest image 1500x1500. There is no redirect when link to the image.

Why?

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
user2503176
  • 291
  • 1
  • 3
  • 5
  • I'm having the same problem. I do notice however that if you click "Post" it may add the image to the post even if it didn't show it in the "preview" prior to posting. – Dobes Vandermeer Nov 19 '14 at 20:51
  • Also of note is that sharing using Pinterest pin URL has the same issue - first time around I don't get an image in the preview, but it does show up after I click "Post". – Dobes Vandermeer Nov 19 '14 at 20:54

4 Answers4

40

The reason is that FB behind the scenes is still scraping your page and caching the image. The next time, in fact, you have also the image. How to solve it? Manual pre caching: https://developers.facebook.com/docs/sharing/best-practices#precaching

or simply add

<meta property="og:image:width" content="450"/>
<meta property="og:image:height" content="298"/>
rogerdpack
  • 62,887
  • 36
  • 269
  • 388
Kzar
  • 802
  • 9
  • 12
9

According to this bug in the Facebook bug tracker:

This is by design, we do not guarantee that the correct image is picked up immediately when you share a link for performance reasons.

Right now, if you want to ensure the right image is used before you post, make sure you trigger a scrape either via the debugger, or simply by loading the preview pane twice (once to trigger a scrape, then once to preview the fully scraped share).

From next week on (11/11), you can also ensure the right image is picked up immediately by describing the image using og:image. Both a width and a height needs to be defined for this to be used.

Community
  • 1
  • 1
Dobes Vandermeer
  • 8,463
  • 5
  • 43
  • 46
0

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'm figuring out another workaround.

Unfortunately adding og:image:width and og:image:height didn't work for me.

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.

Example of the hidden iFrame:

<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
  • In the website http://www.daysoldage.com there is a great example Try to calculate the age and check the source code of the result page: in the line 275 you can see the hidden iFrame that force the Facebook crawler. – Dan Sep 01 '16 at 20:02
  • This answer wont work because 'X-Frame-Options' is set to 'DENY' on facebook.com, meaning you can't open any facebook pages inside iframe on your own site. – Alexey Feb 07 '17 at 08:40
  • Thanks a lot Alexy to let me know! Since yesterday this solution worked fine. They add the option X-Frame-Options=DENY just today. – Dan Feb 07 '17 at 14:51
0
  1. Go here
  2. Enter your YouTube video's URL
  3. Click "Fetch New Scrape Information"
  4. Go back to Facebook
  5. Reload the page
  6. Enter the URL again

And it should work just fine

DJK
  • 8,924
  • 4
  • 24
  • 40
james
  • 9
  • 1