Facebook开放图谱无法加载图片。

3
我已经制作了一个微型网站,让用户可以装饰一棵树并分享到Facebook/Twitter等社交媒体平台...

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">

据我所知,所有东西都在它应该的地方,当我查看源代码时,它甚至正确地回显数据。然而分享按钮只显示这个:

fb dialog box

当分享时,那里拉取的标志图片消失了,在我的时间轴上只是一个空白框。而不是开放图像。

the source

我已经进行了多次调试和刮取,但我的og:image始终为空。 https://developers.facebook.com/tools/debug/og/object/ 我很迷茫。
如果有人能帮我解决这个问题,我会非常感激。
===更新=== 经过多方参与、长时间的交流和折腾...我们无法在网站上线前使其正常工作。所以我们放弃了Facebook,并将其变成了一个Twitter活动。
最后,我的最佳猜测是与图像大小有关。

我认为这里的问题在于你在单独的/share.php?file=xxxx URL上的og:url标签指向了http://www.jajo.net/odditree/ - 这会将Facebook的爬虫重定向到该URL以获取元数据 - 你应该在调试工具输出中看到这一点,显示它遍历哪些URL以获取输入URL的元数据。 - Igy
2个回答

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,会发生什么呢?

添加第二行时出现了一些意外情况...有了这个,它开始出现早期问题,即显示图像或描述,但不是两者都有...非常令人困惑。 - mdcrtv
回应您之前的评论,是的。缓存肯定已经被清除了。 - mdcrtv
抱歉,我不知道。你的标记看起来很好,但也许可以将它 pastebin 上,以便更仔细地检查错误。也许在 PHP 中转义/回显不当,导致无效并默认为你所得到的结果? - ficuscr
这是一个包含页眉和页脚的分享页面的Pastebin链接:http://pastebin.com/x4ejsgL8。感谢您今天抽出时间来帮助我。 - mdcrtv
不记得如何在这里开始聊天了...无论如何,我们看到的是一样的吗?http://imagebin.ca/v/1ksSngKv1xhF 实际上已经发布到我的动态中,看起来像我认为你想要的那样。 - ficuscr
显示剩余3条评论

1

抱歉,你来晚了。

我刚刚度过了自己的沮丧时光,而我的解决方案可能也适用于你。我会在这里发布它,供后来者参考。Facebook OG:图像无法显示。天啊!我简直不敢相信我昨晚和今天浪费了多少时间在这上面。真是让人发疯!我跟着每一个线索走,但Facebook继续忽略我的og:image属性(我甚至删除了web.config中的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的分享调试器页面上被拒绝,而不会显示任何错误消息(不知道为什么他们称之为调试器,探险家才是真正的调试器)。 (如果我能帮助甚至只有一个人避免这种情况,那么我的痛苦就值得了)。
哦,对了...探险家的链接在“调试器”页面的最底部(标题为通过API进行刮擦)。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接