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

发布于 2024-07-15 13:34:49 字数 325 浏览 8 评论 0原文

我正在尝试实现分享这个方法。我使用的代码如下，

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

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

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

原文

I am trying to implement share this method. I am using the code as follows

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

Now when Facebook is showing it showing some thumbnails at left side. These images are picked from my website. How can I pick a particular image as thumbnail or at least stop it showing thumbnail?

You can check it with my blog address.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深海少女心 2024-07-22 13:34:49

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

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

来源：Facebook Share

From Facebook's spec, use a code like this:

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

Source: Facebook Share

回复收藏 0 原文

场罚期间 2024-07-22 13:34:49

这篇博文似乎有你的答案：
~~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 的文档，标签可能是正确的，但 Facebook 仅每 24 小时抓取一次。使用 Facebook Lint 页面将图像导入 Facebook。

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

This blog post seems to have your answer:
~~http://blog.capstrat.com/articles/facebook-share-thumbnail-image/~~

Specifically, use a tag like the following:

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

The name of the image must be the same as in the example.

Click "Making Sure the Preview Works"

Note: Tags can be correct but Facebook only scrapes every 24 hours, according to their documentation. Use the Facebook Lint page to get the image into Facebook.

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

回复收藏 0 原文

烟雨扶苏 2024-07-22 13:34:49

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

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

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

回复收藏 0 原文

短叹 2024-07-22 13:34:49

Facebook 使用 og:tags 和开放图谱协议来解读预览时要显示的信息分享对话框中的网址
或者在 Facebook 的新闻提要中。

og:tags 包含以下信息：

页面标题
页面类型
URL
网站名称
页面描述
页面管理员的 Facebook user_id（位于facebook ）

以下是一些 og:tags 的示例（取自 facebook 文档）

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

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

编辑元标签
您可以通过更新页面的属性来更新页面的属性
标签。请注意，og:title 和 og:type 只能编辑
最初 - 当您的页面收到 50 个赞后，标题就会固定，
当你的页面收到 10,000 个赞后，类型就固定了。
这些属性是固定的，以避免让喜欢的用户感到惊讶
页面已经。在这些限制之后更改标题或类型标签
已到达不执行任何操作，您的页面保留原始标题并且
类型。
为了使更改反映在 Facebook 上，您必须强制您的页面
被刮掉。当页面管理员点击时，页面会被抓取
点赞按钮或将 URL 输入到 Facebook URL 中时
Linter Facebook 调试器...

回复收藏 0 原文

甜柠檬 2024-07-22 13:34:49

我看到提供的所有答案都是正确的。然而，一个重要的细节被忽视了：图像的大小必须至少为 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

I see that all the answers provided are correct. However, one important detail was overlooked: The size of the image MUST be at least 200 X 200 px, otherwise Facebook will substitute the thumbnail with the first available image that meets the criteria on the page. Another fact is that the minimum required is to include the 3 metas that Facebook requires for the og:image to take effect:

<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" />

Debug your page with Facebook debugger and fix all the warnings and it should work like a charm!
https://developers.facebook.com/tools/debug

回复收藏 0 原文

莫相离 2024-07-22 13:34:49

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

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

回复收藏 0 原文

独行侠 2024-07-22 13:34:49

其工作原理如下：

您需要能够访问您正在共享的特定网页上的 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/< /a>

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

Here’s how this works all:

You need the ability to access the HTML on the particular webpage you are sharing. It'll probably work site wide too if you use a common header file. I have not tried this, but it should work. You'll just get the same image for all pages if you do this though.
You need to add these HTML meta tags into page in the . It will not work if you put it in the . Make sure to customize per your a) image, b) description, c) URL, and d) title.

A Real Example.

<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" />

Save
Open a fresh Facebook post, and retry the page you wanted to share.
If you are having trouble… you can debug it with this Facebook tool. It looks more geeky than it is. It tells you what Facebook is seeing when you post in the URL to share.

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

Big Tip.. make sure the “quote marks” are the same in your HTML (they should look like 2 straight marks and no curves… sometimes programs change these to different fonts and it goofs up the code.

回复收藏 0 原文

何时共饮酒 2024-07-22 13:34:49

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

来自上面的链接。为了获得最佳的共享效果，您需要在 HTML 中建议 3 条数据：

标题
简短描述
图片

这可以通过以下内容完成，放置在 HTML 的“head”标签内：

标题：< ;title>插入帖子标题
图片：
说明：

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

如果您使用 Drupal 之类的 CMS，您可以将很多工作自动化（参见上面的链接）。如果您使用 WordPress，您可能可以使用 Drupal 示例作为指导来实现类似的东西。我希望您发现这些有用。

最后，您始终可以手动编辑您的分享帖子。请参阅此示例带插图。

回复收藏 0 原文

梦情居士 2024-07-22 13:34:49

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

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

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

回复收藏 0 原文

Hello爱情风 2024-07-22 13:34:49

我发现为每篇 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;

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

The easiest way I found to set Facebook Open Graph to every Joomla article, was to place in com_content/article/default.php override, next code:

$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;

This will place meta og tags in the head with details from current article.

回复收藏 0 原文

~没有更多了~