5

我在使用 Facebook 时遇到了一个奇怪的问题。当我在 MSIE 9 中共享我的内容时，它会在我第一次共享 URL 时成功加载缩略图，但如果我再次共享它，缩略图不会加载（并且永远不会再次加载）。它只显示他们的动画“加载”图像几秒钟，然后消失，缩略图选项也是如此。

您可以通过单击 MSIE 9 中的这些 Facebook 共享链接自行查看。

示例 1 示例 2

相同的共享功能在其他浏览器中运行良好，并且每次从同一个 MSIE 9 共享其他页面（例如 Youtube 视频）都运行良好。

运行Facebook 的调试器并不能解决问题，也不会报告我页面上的 OpenGraph 标记有任何问题。它甚至显示有问题的缩略图。

查看 Facebook 中开发人员工具的网络选项卡显示，每次我共享内容时都会加载缩略图。

更新

我发现 MSIE 9 将在以下条件下显示图像： - 如果我的缓存中已经有图像 - 如果浏览器没有向服务器请求图像来自的 safe_image.php URL .

我一直在搞乱这个测试页面：http ://www.facebook.com/sharer/sharer.php?u=http://c2a-v3-staging.s3.amazonaws.com/sparks%2Fspark_5079%2Findex_test .html

如果刷新页面，我将无法加载图像，因为这会向服务器请求 safe_image.php。不管响应是 200 还是 304，图像都不会显示。但是，如果我然后转到位置栏并按 Enter，那是“导航”事件而不是“刷新”，不会对图像发出请求，并且会显示（从缓存加载后）。

我尝试从另一个域提供图像，添加 og:image:secure_url 标签，让 Facebook 在不同域上抓取 HTML，这是迄今为止我能做的最好的。不幸的是，它毫无用处，因为这意味着任何用户的第一个共享永远不会正常工作。

4

3 回答 3

2

facebook 不再支持 fb 的共享功能，您应该使用 javascript api 的提要对话框部分：https ://developers.facebook.com/docs/reference/dialogs/feed/

还要确保您的 og 元标记包含可能是您的问题的正确信息http://ogp.me/，图像大小是元标记，图像至少应为 200x200，以优化 og 元数据的抓取

您还可以检查元数据从https://developers.facebook.com/tools/debug得到的错误

于 2012-12-11T01:39:36.750 回答
2

解决了！奇怪的是，问题在于图像的尺寸。如果我减小 og:image 的尺寸以适合 255x255 像素框，则共享在 MSIE9 中完美运行！稍大的尺寸（如 262x262）不起作用。

当然，我必须通过 Facebook 调试工具运行 URL 以清除我们的缓存。

于 2012-12-20T19:41:54.917 回答
1

I have another answer to your Question.

Reference: https://sparkengine.call2action.com/sparks/5186/live

The above webpage you want to share doesn't have the Facebook Opengraph protocol for the webpage's thumbnail to be used when sharing links with Facebook.

Here's what that metatag should look like:

<meta property="og:image" content="https://sparkengine.call2action.com/assets/c2a_logo_white-6396a6a536d065359780af683e66dd2a.png"/>

Read more about using this propery name HERE.

In Facebook's debugger tool, it could just be showing a thumbnail that's rendered in the debugger but not necessarily associated with the shared link process.

Although you do see a thumbnail image in the Network Tab, it's not necessarily the case that this will be used in the shared link process, hence the Facebook Opengraph protocol solves this problem, and allows further customization.

EDIT:
It appears at the moment of this writing, your webpage's template has changed. I now notice that the only previously seen og metatag names of:

og:video
og:video:height
og:video:width

now includes the og:image metatag, along with other newly added og metatag properties.

Current image file provided for og:image metatag:

https://c2a-v3.s3.amazonaws.com/sparks/spark_5186/media/thumbnails/spark_5186_09_28_2012_WgZN50Q.jpg

In Firefox web browser, but not in IE8, accessing the og:image directly in the browsers address bar produced this download box:

enter image description here

What also struck me odd about that download is that it's identified as a flash movie. To be sure, no issues were seen in IE8.

I then tested that image thumbnail link directly in Chromes web browser, and that caused an automatic download of that image, but it did not display in the browser, treating it like a downloaded mime type file.

This was true for both thumbnails in both your examples. Perhaps the server-side flash-to-thumbnail is saving the images with incorrect mime file-type information. Once downloaded and analyzed in IfranView, no errors were reported with the .jpg image, as IrfanView will check the file header to ensure it matches it's file-type extension automatically. I would look into how these thumbnails are created on the back-end.

DIGGING DEEPER:

I now understand that you'll have no control on how these thumbnails are made, since it's a service/process done by Amazon s3 Web Servers.

Digging deeper, I see that the main domain for this image files URL is for an XML File:

Reference: https://c2a-v3.s3.amazonaws.com

Google to the rescue. I typed in amazon thumbnail opens as file and this article mentioned to drop the protocol http://www. or https://www. when using a URL for og metatags.

The Facebook Debugger shows no errors when dropping the https:// too, even though it will be report as http:// protocol.

Try: 

<meta content='sparkengine.call2action.com/sparks/5186/live' property='og:url'>
<meta content='c2a-v3.s3.amazonaws.com/sparks%2Fspark_5186%2Fmedia%2Fthumbnails%2Fspark_5186_09_28_2012_WgZN50Q.jpg' property='og:image'>

Note any Facebook user can force HTTPS requests via there settings, otherwise HTTP is assumed here.

Resulting Shared Link Generated:

http://www.facebook.com/sharer.php?u=http%3A%2F%2Fsparkengine.call2action.com%2Fsparks%2F5186%2Flive
于 2012-12-14T00:07:12.493 回答