Facebook Sharer 在共享我的 URL 时如何选择图像和其他元数据？

StackOverflow https://stackoverflow.com/questions/1138460

题

使用 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 将查看您页面的内容，并从您的页面中选择符合其共享图像标准的图像：图片必须至少为 200 像素 x 200 像素，最大长宽比为 3:1，并且采用 PNG、JPEG 或 GIF 格式。

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

是的，您只需按照您希望它们出现的顺序添加多个图像元标记即可。然后，用户将看到一个图像选择器对话框：
Facebook Image Selector

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

一旦 URL 被共享，Facebook 的爬虫（其用户代理为 facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), ，将访问您的页面并缓存元信息。要强制 Facebook 服务器清除缓存，请使用 Facebook URL 调试器/Linter 工具 他们 2010年6月推出 刷新缓存并解决页面上的任何元标记问题。

此外，页面上的图像必须可供 Facebook 爬虫公开访问。您应该指定绝对网址，例如 http://example.com/yourimage.jpg 而不仅仅是 /yourimage.jpg。

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

添加这些标签会导致我的页面不再验证。我怎样才能解决这个问题？

您可以将必要的 Facebook 命名空间添加到您的标签中，然后您的页面应该通过验证：

<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告诉你添加的按钮。

所有您需要的信息是 www.facebook.com/share/

截至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原始链接。 风格的标签在你想要的任何方式。

将下面的标签在head：

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

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

至于是什么选择，如没有此标签的默认，我不知道。

根据我的经验， http://www.facebook.com/sharer.php 不使用元标记。它使用您传递的字符串。见下文。

http://www.facebook.com/sharer.php?s=100&p[title]=这个 这是我的标题&p[summary]=这是我的摘要&p[url]=http://www.MYURL.com&&p[图片][0]=http://www.MYURL.com/img/IMAGEADDRESS

元标签与 Facebook 的开发人员点赞/发送按钮配合使用，其他开放图谱信息也是如此。因此，如果您使用 Facebook 的实际元素之一（例如评论等），那么它们都将与开放图谱相关。

更新：有两种使用共享器的方法 * 注意查询字符串中的 ?s 与 ?u 值
1 ==> 字符串： http://www.facebook.com/sharer.php?s + 以上内容
~~> 将从字符串中提取信息。
2 ==> 网址： http://www.facebook.com/sharer.php?u=url 其中 url 等于实际 url
~~> 将抓取 url 值中提供的页面
~~> 您可以在这里测试这些值： https://developers.facebook.com/tools/debug

老办法，将不再有效：

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

报告的新途径，也不起作用：

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

有随机的工作和关闭期间的第一天我实现它，也没有在所有工作以来

在Facebook的页面棉短绒，即检查你的网页，报告说，一切是正确的，不显示我选择的缩略图......刚才那个share.php页面本身似乎并没有被运行的实用程序。必须有一个错误在实处，一个他们显然不在乎修复，因为每个bug报告关于这个问题，我已经看到了在他们的系统都这么说解决或固定的。

要更改标题，描述和图片，我们需要添加在头部标记一些meta标签。

步骤1：搜索 添加在head标签meta标签

<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

添加您的网址在文本框（如 http://www.test.com/ ），您提到标签。 点击DEBUG按钮。

其完成。

您可以验证此 HTTPS：/ /www.facebook.com/sharer/sharer.php?u=http://www.test.com/

在上面的URL，U =你的网站链接

享受!!!!

有关安全的HTTPS 

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

我遇到了这个问题并按照 manuel-84 的建议修复了它。使用 400x400 像素的图像效果很好，而我的较小图像从未出现在共享器中。

请注意，Facebook 建议使用最小 200 像素的方形图像作为 og:image 标签： https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

这是对我工作：我把所需的缩略图页面上的标记之后，并使其太小，看.. 

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

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

此外，它看起来像Facebook这样的缓存页面并犯规上的缩略图经常检查它新的..尝试在您的网站添加此到另一个页面，你会看到，它的作品。

使用的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

我不能让Facebook的从一个特定的职位挑选合适的形象，所以我做了什么网页中列出：

https://webapps.stackexchange.com/questions/18468 /添加-元标签对个人博主-职位

在换句话说，是这样的：

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

基本上，你要硬编码的if语句到你的网站的HTML得到它改变任何你已经更改为一个职位元的内容。这是一个混乱的解决方案，但它的工作原理。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top