Question

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

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

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

您可以使用我的blog address进行检查。

Answer 1

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

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

来源：Facebook Share

Answer 2

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

Answer 3

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

在此输入您的网址，FB会更新您网页的元数据：

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

Answer 4

Facebook使用og:tags和Open Graph Protocol来解析在share dialog中预览网址时要显示的信息或者在facebook上的新闻Feed中。

og:tags包含以下信息：

页面标题
页面类型
网址
网站名称
页面描述
Facebook user_id的页面管理员（在Facebook上）

以下是一些og:tags

的示例（取自facebook documentation）

<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如何查看您的网址。调试器工具还将突出显示它在页面上找到的og:tags或者缺少的任何问题。

要记住的一件事是，facebook 确实对此信息进行了一些缓存，因此为了使更改生效，您的网页将被抓取所述在文件中：

编辑元标记

您可以通过更新页面来更新页面的属性    标签。请注意，og：title和og：type只能编辑   最初 - 在您的页面收到50个喜欢后，标题变得固定，   并且在您的页面收到10,000个喜欢后，该类型将被修复。   这些属性是固定的，以避免令人惊讶的用户喜欢   页面已经。在这些限制之后更改标题或类型标签   达不到任何东西，您的页面保留原始标题和   类型。

要在Facebook上反映更改，您必须强制页面   被刮。页面管理员点击该页面时会抓取该页面   喜欢按钮或将URL输入 ~~Facebook URL   Linter~~ Facebook Debugger ......

Answer 5

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

<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

Answer 6

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

以下是我修复网站http://gnorml.com/blog/facebook-link-thumbnails/

的方法

Answer 7

以下是这一切的效果：

您需要能够访问您共享的特定网页上的HTML。如果您使用通用头文件，它也可能在网站范围内工作。我没试过这个，但它应该有效。如果你这样做，你只会为所有页面获得相同的图像。
您需要将这些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" />

保存
打开一篇新的Facebook帖子，然后重试您要分享的页面。
如果您遇到问题......可以使用此Facebook工具进行调试。它看起来比它更令人讨厌。它告诉您当您在要分享的URL中发布时Facebook正在看到什么。

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

大提示..确保HTML中的“引号”相同（它们应该看起来像2个直线标记，没有曲线......有时程序会将这些更改为不同的字体，这会使代码变得更糟。

Answer 8

Sharing on Facebook: How to Improve Your Results by Customizing the Image, Title, and Text

从上面的链接。为了获得最佳分享效果，您需要在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示例作为指南实现类似的东西。我希望你发现这些有用。

最后，您可以随时手动编辑共享帖子。请参阅this example with illustrations。

Answer 9

我上周在工作的site也遇到了问题。我实现了一个类似的盒子并测试了类似的盒子。然后我继续向我的标题添加图像（ob：image meta）。仍然没有在我的脸书通知上显示正确的图像。

我尝试了所有内容，并得出结论，缓存了类似按钮的每个实现。因此，假设您在URL A上按下Like按钮，然后在标题中指定一个图像，然后通过再次单击URL A上的Luke按钮来测试它。当页面被缓存时，您将看不到图像。单击第B页上的“赞”按钮时，图像将显示。

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

Answer 10

我发现将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;

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

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

10 个答案:

编辑元标记