2

I try to share the article or web page but the story does not show the image when sharing for the first time but when i share for the next time, image is coming.

Checked in FB Debugger Also, same result.image not coming for the first time , next time it is coming.

<html class="no-js" lang="ar" dir="rtl" data-ng-app="mApp" xmlns:fb="http://ogp.me/ns/fb#">
<meta property="og:title" content="mytitle"/>
<meta property="og:url" content="http://mytest.com"/>
<meta property="og:image" content="http://mytest.com/1-773128.jpg"/>
<meta property="og:description" content="ffff2024"/>
<meta property="og:site_name" content="ggggggg"/>
<meta property="og:type" content="ARTICLE"/>
<meta property="fb:app_id" content="2444444444444"/>
Mohamed Hussain
  • 7,433
  • 14
  • 55
  • 85

2 Answers2

4

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.

I struggled to find a solution for this facebook bug (adding og:image:width and og:image:height was not enough).

Finally I came up with a workaround 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 and, when you click facebbok share button in the first time you can see the shared image!

Example:

<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
  • +1 I really hate to pollute the DOM with an invisible iframe. However, after hours (days) of debugging and trying to get `og:image:width` and `og:image:height` to work with no avail, this turned out to be the simplest and easiest solution. – Leo Galleguillos Jan 28 '17 at 07:39
  • Yes... me too... this iFrame can load your server too. But is the only way I found for this 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 Jan 31 '17 at 11:07
  • I think instead of polluting the DOM, what we might do is add the invisible iframe to the DOM when the share button is clicked. Then, once the invisible iframe is done loading, we proceed with the share button functionality, and then remove the iframe. It's ugly, but it should work. – Leo Galleguillos Feb 02 '17 at 02:05
3

https://developers.facebook.com/docs/sharing/best-practices#precaching lists ways to avoid this problem, by either

  • scraping new articles upfront via API, or

  • specifying the image dimensions via OG meta tags as well.

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • @Dustin can you list exact set of `og:` tags that you have defined? There is a lot of people that has specified image size but problem still exist – Ivan Samovar Sep 22 '17 at 14:47