在Facebook上实现共享时如何将特定图像显示为缩略图？

98

我正在尝试实现共享此方法。我正在使用以下代码

http://www.facebook.com/share.php?u=my_website_url

现在，当Facebook显示时，在左侧显示一些缩略图。这些图像是从我的网站上挑选的。如何选择特定图像作为缩略图或至少停止显示缩略图？

您可以使用我的博客地址进行检查。

facebook  sharethis 
— 坦莫伊
source
— user94154

Answers:

80

这篇博客文章似乎有您的答案：http : //blog.capstrat.com/articles/facebook-share-thumbnail-image/

具体来说，请使用如下所示的标签：

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

图像名称必须与示例中的相同。

单击“确保预览作品”

注意：标签可能是正确的，但Facebook根据其文档仅每24小时抓取一次。使用Facebook Lint页面将图像导入Facebook。

http://developers.facebook.com/tools/lint/

— 格德林
source
6
Facebook自己指出，使用link rel属性并不总是对某些人有用。我发现meta属性=“ og：image”更可靠。下面的答案应该是正确的。
— Dwayne Charrington
最好同时使用这两种选择
— Yosef
6
在这种情况下，图片类型应为“ image / gif”，不是吗？
— 金·罗伯斯
98

根据Facebook的规范，使用如下代码：

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

资料来源：Facebook分享

— Efektiivsus Saavutamine
source
这似乎只适用于较新的api，而不适用于旧的share.php链接
— chrismarx 2011年
22

当使用共享对话框 或在Facebook上的新闻提要中预览URL时，Facebook使用og:tags和Open Graph协议来解密要显示的信息。

将og:tags包含如下信息：

  • 页面标题
  • 页面类型
  • 网址
  • 网站名称
  • 页面说明
  • 页面管理员的Facebook user_id（在facebook上）

这是一些例子（取自facebook文档）og:tags

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

一旦实现了正确的标记og:tags并设置了它们的值，就可以使用Facebook Debugger测试facebook如何查看您的URL 。调试器工具还将突出显示og:tags该页面上发现的或缺少的任何问题。

要记住的一件事是，facebook 确实对该信息进行了一些缓存，因此为了使更改生效，请按照文档中的说明刮掉页面：

编辑元标记

您可以通过更新页面的标签来更新页面的属性。请注意，og：title和og：type最初只能进行编辑-在您的页面收到50个喜欢的页面后，标题变为固定，而在页面收到10,000个喜欢的页面之后，该类型变为固定。固定这些属性是为了避免使已经喜欢该页面的用户感到惊讶。在达到这些限制后更改标题或类型标签无济于事，您的页面将保留原始标题和类型。

为了使更改反映在Facebook上，必须强制您的页面被剪贴。当该页面的管理员单击“赞”按钮或将该URL输入到Facebook URL Linter Facebook Debugger中时，该页面将被抓取 ...

— 利克斯
source
1
我使用了以下标记：<meta property =“ og：url” content =“ 72.5.167.17:8003/”; /> <meta property =“ og：image” content =“ 72.5.167.17:8003/img/header-logo.png”; /> <meta property =“ og：title” content =“这是我的标题” /> <meta property =“ og：description” content =“这是我的描述” />标题和描述成功更改，但是图像仍然不来
— Gaurav123
11

我看到所有提供的答案都是正确的。但是，一个重要的细节被忽略了：图片大小必须至少为200 X 200 px，否则Facebook将用满足页面标准的第一张可用图片替换缩略图。另一个事实是，要求的最低要求是包括Facebook才能使og：image生效的3个meta：

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

使用Facebook调试器调试页面并修复所有警告，它应该像魅力一样工作！ https://developers.facebook.com/tools/debug

— x
source
上面的文字被提议（错误地）作为对另一个答案的修改。随后被拒绝，但似乎包含重要信息，因此我将编辑移到了这里。
— chux x 2013年
2

我遇到了同样的问题，并且相信我已经解决了。我使用了这里提到的链接元标记来指向我想要的图像，但是关键是，如果执行此操作，FB将不会提取任何其他图像作为选择。同样，如果您的图像太大，则根本没有任何选择。

这是我固定网站http://gnorml.com/blog/facebook-link-thumbnails/的方式

— 抢
source
2

这是所有方法的工作方式：

  1. 您需要能够访问要共享的特定网页上的HTML。如果使用公共头文件，它也可能在整个站点范围内工作。我没有尝试过，但是应该可以。如果这样做，您将为所有页面获得相同的图像。

  2. 您需要将这些HTML元标记添加到中的页面中。如果将其放入，它将无法正常工作。确保根据您的a）图片，b）描述，c）URL和d）标题自定义。

一个真实的例子。

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />
  1. 保存
  2. 打开新的Facebook帖子，然后重试要共享的页面。
  3. 如果您遇到问题...，可以使用此Facebook工具进行调试。看起来比它更令人讨厌。它告诉您在URL中发布要共享时Facebook看到的内容。

https://developers.facebook.com/tools/debug/og/object/

大技巧..确保HTML中的“引号”是相同的（它们看起来应该像2个直线，没有曲线…有时程序会将它们更改为不同的字体，并且使代码混乱。

— 阿米努尔伊斯兰教
source
1

在Facebook上分享：如何通过自定义图像，标题和文本来改善结果

从上面的链接。为了获得最佳共享，您将建议在HTML中建议3条数据：

  • 标题
  • 简短的介绍
  • 图片

这是通过以下操作完成的，将其放置在HTML的'head'标签内：

  • 标题： <title>INSERT POST TITLE</title>
  • 图片： <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
  • 描述： <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

如果您的网站是静态HTML，则必须使用HTML编辑器在每个页面上执行此操作。

如果您使用的是像Drupal这样的CMS，则可以自动执行很多操作（请参见上面的链接）。如果您使用wordpress，则可以使用Drupal示例作为准则来实现类似的功能。希望您觉得这些有用。

最后，您随时可以手动编辑您的分享信息。参见带有示例的此示例。

— 里克曼努瑞斯
source
0

上周我在一个网站上也遇到了问题。我实现了一个like box，并测试了like box。然后，我继续将图像添加到标题（ob：image meta）。正确的图像仍然没有显示在我的Facebook通知中。

我进行了所有尝试，得出的结论是，对like按钮的每个实现都进行了缓存。假设您在网址A上点赞按钮，然后在标题中指定图片，然后再次在网址A上点击Luke按钮对其进行测试。当页面被缓存时，您将看不到该图片。当您单击第B页上的“赞”按钮时，将显示该图像。

要重置缓存，您必须使用上面提到的lint调试器工具，并为所有已缓存的Url验证所有Urls ...这是唯一对我有用的方法。

— 杰拉德
source
0

我发现为每条Joomla文章设置Facebook Open Graph的最简单方法是放在com_content / article / default.php覆盖下，下一个代码：

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

这会将meta og标签和当前文章的详细信息放在头部。

— 达芬方
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.