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

时间：2009-07-16 15:33:43

标签： facebook opengraph facebook-sharer

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

12 个答案:

答案 0 :(得分：587)

如何在分享页面时告诉Facebook使用哪个图像？

Facebook有一套open-graph meta tags，它会决定要显示哪个图像。

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像素×200像素，最大宽高比为3：1，并且在PNG中， JPEG或GIF格式。

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

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

我指定了相应的图片元标记。为什么Facebook不接受这些变化？

一旦共享了网址，Facebook的抓取工具（用户代理为facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)）将访问您的网页并缓存元信息。要强制Facebook服务器清除缓存，请使用Facebook Url Debugger / Linter Tool launched in June 2010来刷新缓存并解决页面上的任何元标记问题。

此外，页面上的图片必须可由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">

答案 1 :(得分：36)

当您分享Facebook时，您必须将html添加到head部分的下一个元标记中：

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

就是这样！

根据FB告诉你的内容，按照你的意愿添加按钮。

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

答案 2 :(得分：28)

截至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标签的样式。

答案 3 :(得分：13)

将以下标记放在head：

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

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

就缺少此标签而选择的默认值而言，我不确定。

答案 4 :(得分：12)

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

http://www.facebook.com/sharer.php?s=100&p[title]=THIS是我的所有权＆amp; p [摘要] =这是我的摘要＆amp; p [url] = http://www.MYURL.com&&p[images][0]=http://www.MYURL.com/img/IMAGEADDRESS

元标记可与Facebook的开发人员/发送按钮一起使用，其他Open Graph信息也是如此。因此，如果你使用Facebook的实际元素之一，如评论等，那将全部与Open Graph相关。

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

答案 5 :(得分：11)

旧方式，不再有效：

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

报道新方式，也行不通：

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

在我实施它的第一天，它随机地工作，从那以后一直没有工作。

Facebook linter页面，一个检查你的页面的实用程序，报告一切正确并显示我选择的缩略图......只是share.php页面本身似乎没有运行。必须是Facebook上的一个错误，他们显然不关心修复，因为我在他们的系统中看到的关于这个问题的每个错误报告都说解决或修复。

答案 6 :(得分：10)

要更改标题，说明和图片，我们需要在标题下添加一些元标记。

步骤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

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

完成了。

您可以在此处验证https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

在上面的网址中，u =您的网站链接

ENJOY !!!!

答案 7 :(得分：2)

用于安全HTTPS 

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

答案 8 :(得分：1)

这对我有用：我在标签后面的页面上放置了所需的缩略图，使其太小而无法看到.. 

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

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

似乎Facebook在您的网页上缓存缩略图并且并不总是检查新的缩略图。尝试将其添加到您网站上的其他网页，您会发现它有效。

答案 9 :(得分：1)

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

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

答案 10 :(得分：1)

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

答案 11 :(得分：0)

我无法让Facebook从特定帖子中选择正确的图片，所以我做了本页概述的内容：

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中，以便更改元内容以适应您为该帖子更改的内容。这是一个混乱的解决方案，但它的工作原理。

相关问题
最新问题