99

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

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

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

你可以通过我的博客地址查看。

4

10 回答 10

98

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

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

资料来源：脸书分享

于 2011-01-21T11:30:00.603 回答
81

这篇博文似乎有你的答案： 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/

于 2009-03-27T11:01:19.130 回答
34

根据他们的文档，我的标签是正确的，但 Facebook 每 24 小时才刮一次。使用 Facebook Lint 页面将图像导入 Facebook。

在此处输入您的 URL，FB 将更新您页面中的元数据：

https://developers.facebook.com/tools/debug（更新链接）

于 2010-12-14T15:52:34.437 回答
22

Facebook 使用Open Graph Protocol来破译在共享对话框 或 Facebook 上的新闻提要中 预览您的 URL 时要显示的信息og:tags。

包含信息，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"/>

一旦您实现了正确的标记并设置了它们的值，您就可以使用Facebook Debuggerog:tags测试 facebook 如何查看您的 URL 。调试器工具还将突出显示它在页面上发现或缺少的任何问题。 要记住的一件事是，facebook确实对此信息进行了一些缓存，因此为了使更改生效，您的页面将不会被刮掉，如文档中所述：og:tags



编辑元标签

您可以通过更新页面的标签来更新页面的属性。请注意，og:title 和 og:type 最初只能编辑 - 在您的页面收到 50 个赞后，标题变为固定，在您的页面收到 10,000 个赞后，类型变为固定。这些属性是固定的，以避免让已经喜欢该页面的用户感到惊讶。达到这些限制后更改标题或类型标签没有任何作用，您的页面将保留原始标题和类型。

要使更改反映在 Facebook 上，您必须强制抓取您的页面。当页面的管理员单击“赞”按钮或将 URL 输入Facebook URL Linter Facebook 调试器时，该页面被抓取...

于 2012-01-16T23:27:38.460 回答
11

我看到提供的所有答案都是正确的。但是，一个重要的细节被忽略了：图像的大小必须至少为 200 X 200 像素，否则 Facebook 将用符合页面标准的第一个可用图像替换缩略图。另一个事实是，至少需要包含 Facebook 要求的 3 个元数据才能使 og:image 生效：

<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

于 2013-09-15T20:45:18.733 回答
2

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

这是我修复网站的方法http://gnorml.com/blog/facebook-link-thumbnails/

于 2010-09-20T01:38:42.010 回答
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 个直线标记，没有曲线……有时程序会将它们更改为不同的字体，这会弄乱代码。

于 2016-11-02T12:06:57.697 回答
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 示例作为指导来实现类似的东西。我希望你发现这些有用。

最后，您始终可以手动编辑您的分享帖子。参见这个带有插图的例子。

于 2011-05-24T01:00:49.007 回答
0

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

我尝试了所有方法，得出的结论是，每个赞按钮的实现都被缓存了。因此，假设您为 url A 上的 Like 按钮计时，然后在标题中指定一个图像，然后通过再次单击 url A 上的 Luke 按钮对其进行测试。当页面被缓存时，您将看不到图像。当您单击页面 B 上的“Like”按钮时，该图像将显示。

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

于 2012-01-16T21:20:50.840 回答
0

我发现将 Facebook Open Graph 设置为每篇 Joomla 文章的最简单方法是放在 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;

这会将元 og 标记放在头部，其中包含当前文章的详细信息。

于 2015-07-15T09:23:18.370 回答