Facebook分享对话框在首次加载时不显示缩略图

Question

我正在使用Facebook分享对话框来分享特定的URL。共享链接包含一个图像，这个图像应该是后来分享的一部分。奇怪的是，在移动浏览器上它完全正常工作。但是桌面浏览器在第一次尝试时不会加载图像。简单地重新加载共享窗口可以修复缺失的图像。一旦这个图像至少出现一次，它就会在其他浏览器中继续工作，而不需要额外的重新加载。

所以我的问题是：有人知道为什么第一次调用此URL不显示图像吗？

详情 打开共享对话框的链接 以下是Facebook Debugger的输出，其中没有错误并且也显示了图像。 Facebook调试器输出 更新

似乎在Feed对话框中工作没有任何问题。但这是另一种我想要阻止的分享方式，因为它需要一个应用程序ID。

- Sven Bluege

---

嗨，这可能是由于用作缩略图分享的图像大小引起的问题。 - Jothi Kannan

你有关于那个的任何细节吗？ - Sven Bluege

嗨，请看这里：http://stackoverflow.com/questions/16846871/facebook-share-dialog-image-doesnt-show - Jothi Kannan

请查看官方文档：https://developers.facebook.com/docs/reference/dialogs/feed/ - Jothi Kannan

正如我所说，Feed对话框运行良好。即使这听起来很奇怪，我目前认为分享对话框没有等待足够长的时间来获取页面上图像的初始查询结果。 - Sven Bluege

Answer 1

我也遇到了这个问题，结果发现Facebook有一个没有记录在案的“特性”，可能是为了优化而实施的。在第一次分享时不会加载你的图片。

这里可以找到错误描述： https://developers.facebook.com/bugs/657696104321030

简而言之，解决方案有两种：

1. 最简单的方法是将og:image:width和og:image:height作为你的og标签的一部分包含进去，描述图像的像素宽度和高度。奇怪的是（很明显是设计如此），这将使Facebook立即抓取网站，包括图像。

   <meta property="og:image" content="http://example.com/image.jpg"/ >

   <meta property="og:image:width" content="450"/>

   <meta property="og:image:height" content="298"/>

2. 第二个潜在的解决方案是通过API手动触发抓取。我没有测试过，但在这个话题上理论上是可能的，请参见相关的Stackoverflow讨论。

- Aron

---

这为我解决了问题。无法相信整个Facebook分享设置是如此脆弱，即使在2015年也是如此。唉... - Form

谢谢@Aron，我只是加了宽度和高度就好了，好奇怪哦 :O - Adrian

太神了！我在这个问题上浪费了好几天，简直快把我逼疯了。我从来没想到加上宽度和高度居然解决了问题。 - Dario Barrionuevo

抱歉，我尝试了您的代码但没有起作用。这次有任何更改吗？谢谢。 - Ave

Answer 2

Facebook会显示缓存的图片。这是在第一次提交分享或Facebook爬虫在您的页面上找到og:image标记时执行的操作。

根据Facebook文档（https://developers.facebook.com/docs/sharing/best-practices#pre-cache-images），“我们的一些社交插件在某人与它们进行交互时会呈现一张图片。该图片基于页面上的og:image，如果未设置og:image，则使用页面上的其他图片。在社交插件呈现图片之前，Facebook的爬虫必须至少看到该图片一次。对于页面经常更改的网站（例如电子商务），首次单击这些插件的人将看不到已呈现的图片。”

- SoHo

Answer 3

我找到了另一种方法来强制 Facebook 爬虫在您点击分享按钮之前检查页面：只需包含一个带有共享器 Facebook 链接的隐藏 iFrame。

示例：

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

- Dan

---

您提出的解决方案可能有助于填充刮刀缓存，但也会使服务器负载翻倍。 - Sven Bluege

你是对的@sven，这取决于你的目的：例如在这个网站上： http://www.daysoldage.com/ 每个结果都不同。 对于博客，我不建议使用这个技巧。 - Dan

Answer 4

我终于认为我找到了问题所在。我想要分享的图片是通过一个PHP脚本提供的，而不是一个普通的文件。这似乎与PHP提供图像的方式有关：

不好的：

echo readfile($image_thumb_file);

好的：

$fp   = fopen($image_thumb_file, "rb");
fpassthru($fp);

在进行了这个更改之后，我的图片终于出现在 Facebook 调试器中了。

- Sven Bluege

Answer 5

您还可以检查og:image:width和og:image:height属性。
这对我很有效。

- Pablo Barbie Fumarola