刷新页面后，缩略图仅出现在 Facebook 分享对话框中答案

【问题标题】：Thumbnail only appears in Facebook Share dialog after refreshing the page刷新页面后，缩略图仅出现在 Facebook 分享对话框中
【发布时间】：2013-07-24 18:05:04
【问题描述】：

我在我网站上的一个页面上添加了一个 FB 分享按钮，使用这种方法：https://developers.facebook.com/docs/reference/plugins/share-links/

源代码如下：

<a href="https://www.facebook.com/sharer/sharer.php?
    u=https://[subdomain].mysmilecentral.com/public/show?link_code=[access code for individual's photo]" target="_blank">
    <img src="https://[our S3 bucket]/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>

我已经异步加载了FB Javascript SDK，并且正在使用OG 元标记：

<meta property="og:url" content="https://[subdomain].mysmilecentral.com/public/show?link_code=[access code for individual's photo]" />
<meta property="og:title" content="Order Pictures of [child's name] at [studio name]'s MySmileCentral!" />
<meta property="og:description" content="View images and/or order pictures of [child's name]." />
<meta property="og:image" content="https://[our S3 bucket]/[path to JPEG image]" />

Facebook 的对象调试器可以毫无问题地找到所有内容。

但是，在我刷新页面之前，共享对话框不会显示在我的 og:image 标记中定义的缩略图。以后每次共享该图像时，缩略图都会正确显示，而无需刷新页面。

这里有什么问题？

【问题讨论】：

您是否在分享页面前尝试清除缓存？并尝试同步加载 SDK？
我假设您的意思是通过使用对象调试器进行调试来清除 Facebook 对页面的缓存。不我没有。我不明白 Facebook 是如何在第一次共享页面时首先缓存该页面的。也很好奇同步加载 SDK 会如何产生影响。你能详细说明一下吗？
同意您不需要同步加载 SDK，因为它不会影响元标记。我的意思是刷新你的浏览器缓存。如果按 F5 时它可以正常工作，则说明 Facebook 内部缓存没有问题。
那行得通。感谢您的帮助！

标签： facebook facebook-sharer

【解决方案1】：

对于重新访问此问题的任何人，截至 2014 年 11 月 11 日左右，Facebook 提供了比之前提到的更好的解决方案。根据this FB bug report：

如果您的网站同时提供 og:image、og:image:width 和 og:image:height，该图像将用于第一次分享创建的。未能提供这些意味着您将需要等待我们的爬虫首先获取和分析图像。

请参阅http://ogp.me/#structured 了解如何做到这一点的示例。

【讨论】：

【解决方案2】：

您能否确认您的图片有效：

og:image – 这是与您的媒体相关联的图像。我们建议您使用至少 200x200 像素的图像。但是，越大越好，所以如果您有可以使用的 1500x1500 图像，请使用它。我们将为使用较小分辨率设备的人进行下采样和裁剪，但将在较大的设备上使用它。这张图片越大，在 Facebook 上分享故事时就越有可能使用它。（注意：图片大小不得超过 5MB。）

来自Facebook: Maximizing Distribution for Media Content

编辑：

清除浏览器的缓存。

【讨论】：

图片有效，是的。浏览器缓存是问题所在。把它作为你的答案，我会为你投票。 :)
完美，谢谢。通常当我遇到此类问题时，我会在一个新的私人（隐身）窗口中进行测试。
昨天清除缓存后，我仍然看到这个问题。适用于私人浏览，但仍需要刷新。我什至让一位同事在另一台计算机上使用完全不同的子域测试该功能：在她刷新之前没有缩略图，也是。这是您可以测试的示例页面：“demo.mysmilecentral.com/public/show?link_code=demogirl2012”（单击她的一张图片下方的“订购”，然后您会在右上角看到“分享”按钮）。它对你有用吗？
更新：隐私浏览也遇到了同样的问题。尝试分享不同的图片，但在我刷新之前没有缩略图。
抱歉，该链接应该是 demo.mysmilecentral.com/public/show?link_code=demogirl2012 - 但我无法编辑评论来修复它。

【解决方案3】：

我遇到了类似的问题，向 Facebook 提交了一个错误：https://developers.facebook.com/bugs/354887144656001 第一个共享问题似乎是他们已知的错误，他们在那里提出了一种解决方法（在页面创建后立即以编程方式将新页面提交给 FB 调试器）。

【讨论】：

就像你在 FB 错误报告中所说的那样，FB 提供的解决方法需要用户已经登录到 FB。但是使用 OpenGraph API 可以避免这种情况。我现在以编程方式发布到 OpenGraph API，所有新共享都第一次显示图像。