Share on Facebook - Thumbnail not showing for the first time

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?

Answers


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"/>

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.


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>

  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


Need Your Help

Reduce flicker with GDI+ and C++

c++ windows gdi+

I'm using GDI+ in a C++/MFC application and I just can't seem to avoid flickering whenever the window is resized.