Facebook Open Graph 未加载图片

Question

我已经建立了一个微型网站，让用户装饰一棵树以在 facebook/twitter/etc 上共享......

http://jajo.net/odditree/share.php?file=u/1418759317.png

一些 php 魔术会创建并上传他们的图像，然后设置一个要在最后一页上检索的变量。

$file = $_GET["file"];
$url = "http://www.jajo.net/odditree/" . $file;

除了 Facebook 共享对话框外，一切正常。

起初，我尝试使用 URL 来共享图像：

<a class="btn fb" href="" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[url]=<?echo $url?>&p[images][0]=<?echo $url?>&p[title]=Jajo - Holiday Odditree=', 'newwindow', 'width=600, height=250'); return false;"><span class="icon"><i class="icon-facebook"></i></span> Share on Facebook</a>

有时这会加载描述，有时会加载图像。 从来没有。

在努力完成这项工作后，我承认了 Facebook 的意愿并创建了一个应用程序。

在遵循开发文档后，我将其放在一起：

<a style="cursor:pointer;" onclick="window.open('https://www.facebook.com/sharer/sharer.php?app_id=823686387676926&u=http%3A%2F%2Fwww.jajo.net%2Fodditree&display=popup&ref=plugin' , 'newwindow', 'width=600, height=250'); return flase;">Facebook Again</a>

该网站现在依赖 Facebook 来完成繁重的工作，我需要做的就是提供开放的图形数据。

这是它的样子：

<meta property="og:title" content="Jajo Holiday Odditree">
<meta property="og:site_name" content="Jajo Holiday Odditree"> 
<meta property="og:url" content="http://www.jajo.net/odditree/">
<meta property="og:description" content="<?if ($url) {?>Behold my @Jajo Holiday #Odditree! Share your own Odditree creation. http://jajo.net/odditree<?}else{?>Create your own Odditree. http://jajo.net/odditree<?}?>">
<meta property="og:image" content="<?php echo $params['image']; ?>">
<meta property="fb:app_id" content="823686387676926">
<meta property="og:type" content="website">

据我所知，一切都在它需要的地方，它甚至在我查看源时正确地回显数据。 然而分享按钮只显示这个：

当它被共享时，它拉到那里的标志图像就会消失，在我的时间线上它只是一个空白框。 而不是开放图形图像：

我已经多次调试和报废，但我的 og:image 总是空的。 https://developers.facebook.com/tools/debug/og/object/

我在这里不知所措。

如果有人可以帮助我解决此问题，我将不胜感激。

===更新=== 在涉及几个人，进行了长时间的聊天，并拔掉了头发......我们无法及时完成这项工作，以便网站启动。 所以我们放弃了 facebook 的东西，它变成了一个 twitter 活动。

毕竟说了又做了，我最好的猜测是它与图像大小有关。

Answer 1

我之前遇到过问题，无论我做什么，它都会在图像上提供选项以与左/右箭头一起使用。 在网上阅读一些东西。 一种建议在页头中使用image_src标签。

<link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / >

但这似乎是旧方式，而不是开放图方式。 看到了其他听起来更有希望的东西，清除 FB 的缓存。

要强制 Facebook 刷新其缓存以便您的更改反映在 Facebook 上，您必须强制您的页面被“抓取”。 当页面管理员单击“赞”按钮或将 URL 输入到 Facebook URL Linter 时，页面会被抓取。

来自这篇文章： http : //www.hyperarts.com/blog/how-to-control-facebook-image-thumbnail-text-popup-dialogs/

好奇如果你添加第二个og:image会发生什么。

Answer 2

抱歉你没有及时赶到。

我只是有自己令人沮丧的时间，我的解决方案可能是你的。 我会把它贴在这里给任何跟在我们后面的人。 Facebook OG：图像未显示。 啊！！！ 我简直不敢相信我昨晚和今天在这件事上浪费了多少时间。 这太令人抓狂了！ 我跟踪了每个兔子的踪迹，Facebook 继续忽略我的 og:image 属性（我什至在我的 web.config 中删除了 ssl 的 url 重定向并重新编码了站点，以便我可以拥有不安全和安全的图像版本）。 一切对我来说都是正确的，但它一直忽略财产。

然后...

我去了这里：

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

这是您要使用的工具，而不是这个：

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

资源管理器为您提供共享调试工具没有的详细错误消息，特别是在我的情况下：

我的图像文件名中有未经过 url 编码的空格。 在你的文件名中有一个空格，它会浏览得很好，但它会被 Facebook 拒绝共享调试器页面上的属性，没有任何错误消息（不知道为什么他们称它为调试器，资源管理器是真正的调试器）。 （如果我能从中拯救一个人，那么我的痛苦是值得的）。

哦，是的...资源管理器的链接位于“调试器”页面（名为 Scrape Via API）的最底部。