分享我的url时,Facebook Sharer如何select图片和其他元数据?

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

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

Facebook有一组开放graphics元标签 ,用于决定要显示哪个图像。

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会查看您网页的内容,并从您的网页中select符合其共享图片标准的图片:图片必须至less为200像素,200像素,最大宽高比为3:1,在PNG中, JPEG或GIF格式。

我可以指定多个图像以允许用户select图像吗?

是的,您只需按照您希望显示的顺序添加多个图像元标记即可。用户将看到一个图像select器对话框:
Facebook图片选择器

我指定了适当的图片元标记。 Facebook为什么不接受更改?

一旦URL被共享,Facebook的抓取工具将会访问你的页面并caching元信息,这个用户代理是facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) 。 为了强制Facebook服务器清除caching,请使用他们在2010年6月推出的Facebook Url Debugger / Linter工具来刷新caching并解决页面上的所有元标记问题。

此外,页面上的图片必须可以被Facebook抓取工具公开访问。 您应该指定绝对url,例如http://example.com/yourimage.jpg,而不仅仅是/yourimage.jpg&#x3002;

我可以用Javascript或jQuery等客户端代码更新这些元标记吗? 与search引擎抓取工具非常相似,Facebook抓取工具不会执行脚本,因此,下载页面时出现的任何元标记都是用于图像select的元标记。

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

您可以将必要的Facebook名称空间添加到您的标记,然后页面应该通过validation:

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

当你分享Facebook的时候,你必须把你的html添加到头部分meta标签:

 <meta property="og:title" content="title" /> <meta property="og:description" content="description" /> <meta property="og:image" content="thumbnail_image" /> 

而就是这样!

根据FB告诉你的情况添加button。

所有你需要的信息在www.facebook.com/share/

截至2013年,如果你使用的是facebook.com/sharer.php(PHP),你可以简单地做任何button/链接,如:

 <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原始链接。 以任何您想要的方式来deviseA标签。

把下面的标签放在head

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

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

至于它在没有这个标签的情况下select的默认值,我不确定。

根据我的经验, http://www.facebook.com/sharer.php不使用元标记&#x3002; 它使用你传递的string。 见下文。

http://www.facebook.com/sharer.php?s=100&p%5Btitle%5D=这是我的标题&p [summary] =这是我的概要&p [url] = http://www.MYURL.com && [图片] [ 0] = HTTP://www.MYURL.com/img/IMAGEADDRESS

meta标签可以和Facebook的开发者一样使用/发送button,其他Open Graph信息也一样。 所以,如果你使用Facebook的实际元素之一,如评论等,这些都将打开graphics的东西。

更新:有两种方法可以使用sharer *注意查询string中的值与值之间的关系
1 ==> STRING: http : //www.facebook.com/sharer.php?s +从上面的内容
~~>会从string中提取信息。
2 ==> URL: http : //www.facebook.com/sharer.php? u=url其中url等于一个实际的url
~~>会刮在url值中提供的页面
你可以在这里testing这些值: https : //developers.facebook.com/tools/debug

旧的方式,不再工作:

 <link rel="image_src" href="http://yoururl/yourimage"/> 

报道了新的方式,也是行不通的:

 <meta property="og:image" content="http://yoururl/yourimage"/> 

它在我实施它的第一天随机地工作,一直没有工作。

Facebook的linter页面,一个检查你的页面的工具,报告一切正确,并显示我select的缩略图…只是share.php页面本身似乎不起作用。 一定是在Facebook上的一个bug,一个他们显然不在意修复,因为每个关于这个问题的错误报告,我已经看到他们的系统都说已解决或修复。

要更改标题,描述和图像,我们需要在头标签下添加一些元标签。

步骤1 :
在头标下添加元标记

 <html> <head> <meta property="og:url" content="http://www.test.com/" /> <meta property="og:image" content="http://www.test.com/img/fb-logo.png" /> <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" /> <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." /> 

下一步 :
点击下面的链接
https://developers.facebook.com/tools/debug

在您提到标签的文本框中添加您的url(例如http://www.test.com/ )。 点击DEBUGbutton。

完成。

你可以在这里validationhttps://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

在上面的url中,你=你的网站链接

请享用 !!!!

为了安全的HTTPS

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

我遇到了这个问题,并用manuel-84的build议来解决这个问题。 使用400×400像素的图像效果很好,而我的小图像从来没有出现在共享器中。

请注意,Facebook推荐使用至less200px的方形图片作为og:image标记: https : //developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

这对我来说很有效:我在标签后面的页面上放置了所需的缩略图图像,并使其太小而无法看到。

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

我还没有testing它与高度0和宽度0,但它可能仍然工作..这并不能保证用户将select此图像..

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

我无法让Facebook从特定的post中select正确的图片,所以我做了这个页面上概述的内容:

https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts

换句话说,像这样的东西:

 <b:if cond='data:blog.url == "http://urlofyourpost.com"'> <meta content='http://urlofyourimage.png' property='og:image'/> </b:if> 

基本上,你将要硬编码一个if语句到你的网站的HTML中,以使它改变元的内容,无论你为那篇文章改变了什么。 这是一个混乱的解决scheme,但它的工作原理。

使用Facebook供稿对话框而不是共享对话框来显示自定义图像

例:

 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