当使用Facebook Sharer时,Facebook将为用户提供使用从源中提取的几个图像中的一个作为他们的链接预览的选项。如何选择这些图像,以及如何确保页面上的任何特定图像始终包含在此列表中?


当前回答

当我的页面被分享时,我如何告诉Facebook使用哪张图片?

Facebook有一组开放图元标签,它通过查看这些标签来决定展示哪张图片。

Facebook图片的关键是:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

它应该出现在页面顶部的<head></head>标签内。

如果这些标记不存在,它将查找它们指定图像的旧方法:<link rel="image_src" href="/myimage.jpg"/>。如果两者都不存在,Facebook将查看您的页面内容,并从您的页面中选择符合其共享图像标准的图像:图像必须至少200px * 200px,最大纵横比为3:1,格式为PNG、JPEG或GIF。

我可以指定多个图像以允许用户选择一个图像吗?

是的,你只需要按你想要它们出现的顺序添加多个图像元标记。然后用户将看到一个图像选择器对话框:

我指定了适当的图像元标记。为什么Facebook不接受这些改变?

一旦一个url被共享,Facebook的爬虫(它有facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)的用户代理)将访问你的页面并缓存元信息。要强制Facebook服务器清除缓存,请使用Facebook Url调试器/ Linter工具,该工具于2010年6月推出,用于刷新缓存并解决页面上的任何元标签问题。

此外,页面上的图像必须对Facebook爬虫公开访问。你应该指定绝对的url,比如http://example.com/yourimage.jpg,而不是/yourimage.jpg。

我可以用Javascript或jQuery等客户端代码更新这些元标签吗? 不。就像搜索引擎爬虫一样,Facebook scraper不执行脚本,所以当页面被下载时,无论出现什么元标签,都是用于图像选择的元标签。

添加这些标记会导致我的页面不再有效。我该如何解决这个问题?

你可以添加必要的Facebook名称空间到你的标签,然后你的页面应该通过验证:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">  

其他回答

使用facebook feed对话框而不是共享对话框来显示自定义图像

例子:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description

安全HTTPS

<meta property="og:image:secure_url" content="https://image.path.png" />

把下面的标签放在头部:

<link rel="image_src" href="/path/to/your/image"/>

从http://www.facebook.com/share_partners.php

至于它在没有这个标记的情况下选择什么作为默认值,我不确定。

截至2013年,如果你使用facebook.com/sharer.php (PHP),你可以简单地创建任何按钮/链接:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

链路查询参数:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

这很简单:你不需要任何js或其他设置。只是一个HTML原始链接。 以任何您想要的方式样式A标记。

这对我来说是有用的:我把想要的缩略图放在标签的右边,让它太小而看不见。

<img src="imagename.jpg" width="1" height="1" />

我还没有测试它的高度为0和宽度为0,但它可能仍然可以工作。这并不保证用户将选择此图像..

此外,似乎Facebook缓存的缩略图在你的页面,并不总是检查它的新。尝试将此添加到您网站的另一个页面,您将看到它工作。