logo标签列表

使用Facebook Sharer分享多张图片

facebookfacebook-opengraphfacebook-sharer
3
我正在尝试实现页面上多张图片分享至Facebook的功能，就像这篇StackOverflow文章中所述。该文章指出，要分享多张图片，需要包含多个og:image标签。我按照这些说明操作了，您可以从此页面中看到。

如果查看页面源代码，您会看到我已经包含了三个og:image标签，一个用于页面的每个图像：

<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg"/>
     <meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg"/>
     <meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg"/>

每个页面上的图像都有自己的Facebook链接。由于我指定了三个og:image标签，我本以为无论您点击哪个链接，都可以选择页面上的三个图像之一。但事实是，您没有选择权；只提供了三个图像中的第二个。
我认为这可能是缓存问题，因此我使用了Facebook Sharing Debugger tool来查看Facebook的视角。 Link Preview仅显示一个图像，而og:image类别仅列出一个图像，这使我感到怀疑。然而，当我点击Show All Raw Tags链接时，我发现Facebook确实拾取了我的所有三个og:image标签： 

<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg" />
<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg" />
<meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg" />

然后我点击了页面底部的通过API爬取链接，这是我得到的内容：

{
  "url": "https://senatorforaday.emkinstitute.org/senator/ePT4B0td/joe-levinger",
  "type": "website",
  "title": "Senator Joe Levinger | Edward M Kennedy Institute for the United States Senate",
  "image": [
    {
      "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg"
    },
    {
      "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg"
    },
    {
      "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg"
    }
  ],
  "description": "Visit the EMK Institute",
  "site_name": "Edward M Kennedy Institute for the United States Senate",
  "updated_time": "2016-07-11T19:51:09+0000",
  "id": "1101245249919459"
}

正如您所看到的，image键由我在og:image标签中指定的三个图像数组组成，因此似乎应该可以工作，但事实并非如此。

您有什么想法来使用户能够从页面上显示的三个图像中选择一个图像吗？

你好Joe，我正在尝试达到同样的目标。你有成功吗？ - Firoz Sabaliya
1个回答
0
1
这很有道理！谢谢你的解释，Zack。我无权更改图像的宽高比，所以我想我会尝试另一种方法：在网页中嵌入三个_iframe_，每个_iframe_包含相应图像的_og:image_标签。我假设Facebook会裁剪每个图像以符合其规格，但那是可以接受的。如果我的想法可行，我会告诉你的。 - Joe Levinger
每个社交媒体平台都有不同的图片要求，例如Google+、LinkedIn、FaceBook和Twitter等，因此更改针对每个平台的图像是很常见的。 - Zack
我尝试使用FB共享对话框做同样的事情，但它总是选择第一个og:image。我在我的弹出窗口中找不到图像选择器选项。最新的FB API是否允许在共享对话框上使用图像选择器？ - batMask
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接