如何展示特别的图像作为缩略，同时实施分享在Facebook?

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

  •  22-08-2019
  •  | 
  •  

题

我是在努力实施分享这一方法。我使用的代码如下

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

现在Facebook是表示它显示出一些缩略在左侧。这些图像是从我的网站。我怎么能选择一个特定的图像作为缩略或至少停止它显示出缩略?

你可以检查它与我的 博客的地址.

有帮助吗？

解决方案

本博客文章似乎有你的答案： <击> http://blog.capstrat.com/articles/facebook-share -thumbnail图像/

具体地，使用一个标签如下所示：

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

的图像的名称必须是相同的如实施例。

点击 “确保预览工程”

注意：标签可以是正确的，但只Facebook的刮擦每24小时，根据它们的文档。使用Facebook页面皮棉以获取图像到Facebook上。

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

其他提示

从Facebook的规格，使用这样的代码：

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

来源： Facebook分享

我的标签是正确的，但Facebook的只是擦伤，每24小时，根据自己的文档。使用Facebook页面皮棉了图像到Facebook的。

在此输入您的网址和FB将更新从您的网页中的元数据：

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

Facebook使用 og:tags 和 打开线图协议 破译什么样的信息，以显示预览时，你的网址在一个 分享对话 或在新闻上facebook.

的 og:tags 包含的信息，例如：

  • 标题页
  • 这种类型的网页
  • URL
  • 该网站的名字
  • 一个说明页面
  • 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会查看你的URL通过使用 Facebook调试器.调试工具也将突显的任何问题发现的 og:tags 在网页上或没有。

有一点要记住的是，facebook 做 做一些高速缓存这方面的信息，因此为了使修改生效，你的网页将有可能 刮 正如在文件：

编辑元标记

你可以更新的属性页，更新页面的 标记。注意og：标题和og：类型是唯一可编辑 最初之后你的页面接收50喜欢的标题变成固定的， 和之后你的页面接收10 000名喜欢的类型变为固定的。这些属性都是固定的，以避免令人惊讶的用户都很喜欢 该网页。修改标题或类型的标签后的这些限制 达到什么也不做，你页上保留了原来的标题和 类型。

为改变将反映在Facebook，你必须强迫你页 被擦伤。该网页是刮当管理员的页面点击量 这样的按钮或当的网址是进入 Facebook URL 棉绒 Facebook调试器...

我看到，所提供的所有答案都正确。然而，一个重要的细节被忽略了：图片的大小必须至少为200×200像素，否则Facebook将替代缩略图，同时满足网页上的标准的第一个可用图像。另一个事实是，所需的最小是包括3个METAS，Facebook的需要用于OG：图像生效：

<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

我有同样的问题，并且相信我已经解决它。我使用的链接meta标签这里提到指向我想要的图像，但关键的是，如果你这样做FB不会拉其他任何图像作为选择。此外，如果你的图片太大，你不会有任何选择的。

下面是我如何固定我的网站 http://gnorml.com/blog/facebook-链路缩略图/

这里就是这个作品：

  1. 你需要的能力，访问HTML上的特别网页你们共享。它可能会工作的网站广泛太如果你使用一个共同标题的文件。我还没有尝试过，但这应工作。你只是得到同样的图像用于所有网页，如果你这样做虽然。

  2. 你需要添加这些HTML元的标签进入网页。它不会工作如果你把它放在。确定每你a)图像，b)描述，c)网址，并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工具。它看起来更令人讨厌的。它告诉你什么Facebook是看到当你发表在URL分享。

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

大尖端..确保"引号"是相同的，在你的超文本标记语言(它们应该看起来像2觉标记并没有曲线...有时候，方案改变这些不同的字体，它粗心了代码。

共享在Facebook:如何改善你的结果，通过定制的图像、标题和案文

从上面的链接。为尽可能最好分享，你会想要建议3件中的数据HTML：

  • 标题
  • 简短的说明
  • 图像

这通过下，放置内部的'头'标记的：

  • 标题： <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编辑器。

如果你使用CMS喜欢推，可以自动执行它的很多(见上文链接)。如果你使用搜，你也许可以实现类似的东西使用推例作为指南。我希望你找到这些有用的。

最后，你总是可以手动编辑分享员额。看看 这个例子插图.

我也有一个网站我是工作在上周的一个问题。我实现了一个样箱和测试的样箱。然后，我继续给图像添加到我的头部（OB：图像元）。仍然是正确的形象并没有在我的Facebook通知显示出来。

我什么都试过了，来到每一个执行一个类似按钮的被缓存的结论。所以我们可以说，你的时钟上网址的喜欢按钮，然后你在标题中指定的图像和你再次点击网址A卢克按钮，你将看不到图像作为页面缓存测试。图像将显示出来，当你点击第B的Like按钮。

要重置缓存，您必须使用真实上述皮棉调试工具和验证那些缓存中的所有网址......这只是为我工作的事情。

我发现Facebook的开放图谱设置为每隔的Joomla文章最简单的方法，在com_content /条/如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标记在头部与从当前文章的信息。

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