多个og:图像标签未通过共享对话框或更新状态框显示

时间:2013-03-20 21:31:33

标签: javascript facebook-javascript-sdk facebook-opengraph facebook-sharer

我目前正在开发一项新功能,允许用户在Facebook上共享页面时选择他们想要使用的缩略图。用户应该能够使用Facebook小部件,如发送对话框或共享按钮,以及简单地将URL剪切并粘贴到Facebook上的udpate状态对话框中。

我已经阅读了很多文档,这似乎表明我只需要在共享的页面中添加多个og:image标签。我已经完成了这个并通过linter运行页面,因此缓存得到更新。

直接将页面传递给share.php时,有效地删除了我的客户端代码并让对话框显示正在抓取的内容,我看到该页面中有3张图片可供使用。

我不确定我在这里做错了什么。

以下是linter resultgraph objectsharer.php linkthe page。任何人都有关于我可能做错的想法吗?

我已确认共享对话框至少遵守og:title标记。我还测试了图像的大小,并包含了如下所示的文件扩展名。

我知道这很有效,因为buzzfeed具有我想要的确切功能。我把我的例子减少到了我认为应该工作的核心部分。您可以找到full source here

6 个答案:

答案 0 :(得分:4)

它可能是顶级HTML标记中的XML命名空间吗?

在BuzzFeed文章中,它是:

xmlns:og="http://opengraphprotocol.org/schema/"

在你的页面中:

xmlns:og="http://ogp.me/ns#"

答案 1 :(得分:3)

在Buzzfeed文章中,og:image链接中的内容属性指向命名的.jpg文件,而不是最后没有文件名/扩展名的链接。

可能需要在链接中包含文件名,特别是如果它是基于文件扩展名的图像检测。

EG:

来自Buzzfeed:

<meta property="og:image" content="http://s3-ak.buzzfeed.com/static/campaign_images/webdr02/2013/3/18/11/10-lifechanging-ways-to-make-your-day-more-effici-1-2774-1363621197-4_big.jpg" />

此致:

<meta property="og:image" content="http://statics.stage3.cheezdev.com/mediumSquare/3845/4AC356E3/1"/>

答案 2 :(得分:1)

经过一些测试,我猜这是caching issue

看起来共享者正在缓存图表,使用og:url作为密钥,因此共享者中的不同查询字符串不会绕过缓存,如果它们不影响og:url价值 显然,调试工具不使用这样的缓存。

如果我是对的(这只是一个见解),您可以等待缓存条目过期或尝试使用其他og:url。此外,为了简化测试,请将新og:url保持等于新的网页位置。

答案 3 :(得分:1)

如此有趣的故事,我是BuzzFeed的开发人员,并试图弄清楚为什么我们的分享对话框突然停止显示缩略图选择器。

看起来Facebook禁用了该功能。它在2014年1月14日简要地重新出现,但他们引入了一个错误,阻止了任何定义了多个og:image标签的页面的共享。 (见:https://developers.facebook.com/bugs/1393578360896606/

他们修复了这个错误,但截至2014年1月22日,它仍然看起来像缩略图选择器被禁用。

答案 4 :(得分:-2)

据我所知,Facebook网站上的Sharer.php脚本不支持所有OG标记。图像是从页面内容本身中删除的,因此如果您希望三个图像出现在Sharer.php脚本中,请将它们包含在您的内容中。

答案 5 :(得分:-2)

Sharer.php已被Facebook正式弃用,因此如果某些功能无效,我也不会感到惊讶。虽然它仍然有效,但它始终是最简单的选项,我猜他们从未构建从og项目中抓取的链接图像。

我能够找到this article,,其中显示了一种可以准确指定sharer.php共享页面可用图像的方法。您可以指定一个(或多个)图像与URL结构共享,如下所示:

http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection
&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary