Fatal编程技术网
  • facebook/
  • Facebook Sharer在共享我的URL时如何选择图像和其他元数据？

Facebook Sharer在共享我的URL时如何选择图像和其他元数据？

facebook

Facebook Sharer在共享我的URL时如何选择图像和其他元数据？,facebook,facebook-opengraph,facebook-sharer,Facebook,Facebook Opengraph,Facebook Sharer,当使用Facebook Sharer时，Facebook将为用户提供一个选项，即使用从源代码中提取的一些图像中的一个作为他们链接的预览。如何选择这些图像，以及如何确保页面上的任何特定图像始终包含在此列表中？在标题中添加以下标记： 从 至于它在没有此标记的情况下选择的默认值，我不确定。旧方法不再有效： 报告新方式，也不起作用： 在我实现它的第一天，它随机地断断续续地工作，从那以后就再也没有工作过 Facebook linter页面，一个检查你的页面的实用程序，报告一切都是正确的，并显示我选择的缩略

当使用Facebook Sharer时，Facebook将为用户提供一个选项，即使用从源代码中提取的一些图像中的一个作为他们链接的预览。如何选择这些图像，以及如何确保页面上的任何特定图像始终包含在此列表中？

在标题中添加以下标记：

从

至于它在没有此标记的情况下选择的默认值，我不确定。

旧方法不再有效：

报告新方式，也不起作用：

在我实现它的第一天，它随机地断断续续地工作，从那以后就再也没有工作过

Facebook linter页面，一个检查你的页面的实用程序，报告一切都是正确的，并显示我选择的缩略图。。。只是share.php页面本身似乎无法正常工作。必须是Facebook上的一个bug，他们显然不想修复，因为我在他们的系统中看到的每个关于这个问题的bug报告都说已解决或修复。

当你在Facebook上共享时，你必须将html添加到下一个元标记的标题部分：

就这样

根据FB告诉您的内容添加按钮

您需要的所有信息都在

中这对我来说很有用：我将所需的缩略图放在标签的正后方，使其太小而看不见

我还没有测试它的高度0和宽度0，但它可能仍然会工作。。这并不保证用户会选择此图像

此外，Facebook似乎会在你的页面上缓存缩略图，并不总是检查是否有新的缩略图。。尝试将此图片添加到您网站的另一个页面，您会发现它是有效的。

当我的页面被共享时，我如何告诉Facebook使用哪个图片？ 脸谱网有一套可以用来决定显示哪张图片的工具

Facebook图像的关键点之一是：

它应该出现在页面顶部的标签中

如果这些标记不存在，它将查找指定图像的旧方法：。如果两者都不存在，Facebook将查看您页面的内容，并从您的页面中选择符合其共享图像标准的图像：图像必须至少为200px x x 200px，最大纵横比为3:1，并且为PNG、JPEG或GIF格式

我可以指定多个图像以允许用户选择一个图像吗

是的，您只需要按希望的顺序添加多个图像元标记。然后将向用户显示一个图像选择器对话框：

我指定了适当的图像元标记。为什么Facebook不接受这些变化

一旦url被共享，Facebook的爬虫程序，它的用户代理为facebookexternalhit/1.1+https://www.facebook.com/externalhit_uatext.php，将访问您的页面并缓存元信息。要强制Facebook服务器清除缓存，请使用该服务器刷新缓存并解决页面上的任何元标记问题

此外，页面上的图像必须可供Facebook爬虫公开访问。您应该指定绝对url，而不仅仅是/yourmage.jpg

我可以用Javascript或jQuery之类的客户端代码更新这些元标记吗？ 不。就像搜索引擎爬虫一样，Facebook scraper不会执行脚本，因此当页面下载时，出现的任何元标记都是用于图像选择的元标记

添加这些标记会导致我的页面不再验证。我怎样才能解决这个问题

您可以将必要的Facebook名称空间添加到标记中，然后您的页面应通过验证：

用于安全HTTPS

根据我的经验，没有使用meta标记。它使用您传递的字符串。见下文

是我的标题&p[summary]=这是我的摘要&p[url]=

meta标签与Facebook的开发者类/发送按钮配合使用，其他打开的图形信息也是如此。因此，如果你使用Facebook的一个实际元素，比如评论之类的，那么这些都会与开放式图表相关

更新：有两种方法可以使用sharer*注意查询字符串中的？s与？u值 1==>字符串：+上面的内容 ~~>将从字符串中提取信息。 2==>URL：其中URL等于实际URL ~~>将删除url值中提供的页面
~~>您可以在这里测试这些值：

我遇到了这个问题，并根据manuel-84的建议解决了它。使用400x400px的图像效果很好，而我的较小的图像从未出现在共享器中

请注意，Facebook建议至少使用200px的正方形图像作为og:image标签：

从2013年开始，如果您使用的是Facebook.com/sharr.php，您只需制作如下任何按钮/链接：

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
很简单：您不需要任何js或其他设置。只是一个HTML原始链接。
用任何你想要的方式来设计标签。

我无法让Facebook从特定的帖子中选择正确的图片，所以我做了什么 在这一页上：

换句话说，类似这样的事情：

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>
基本上，你要将一个if语句硬编码到你的站点的HTML中，让它改变你为那篇文章所做的任何改变的元内容。这是一个混乱的解决方案，但它是有效的

要更改标题、描述和图像，我们需要在head标签下添加一些元标签

步骤1： 在head标签下添加meta标签

<html>
<head>
    <meta property="og:url" content="http://www.test.com/" />
    <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
    <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
    <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
下一步： 点击下面的链接

在文本框中添加您的URL，例如您提到的标签。 单击调试按钮

完成了

你可以在这里验证

在上面的url中，u=您的网站链接

享受吧

使用facebook提要对话框而不是共享对话框来显示自定义图像

例如：

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
当使用meta属性时，它确实可以工作，但是它是无效的html，我觉得这很奇怪！尝试通过验证器运行它，您将看到。让我困惑的是，他们究竟为什么不能用有效的html实现这一点？请参阅提示-在进行更改后。。在linter中运行你的页面，facebook将更新缩略图，等等。对于该页面，我发现下面的文章也非常有用：它看起来的另一个地方：这就是它如何得到这样的结果image@Yarin我不确定那是真的。StackOverflow具有image_src属性集，它正在使用该属性集。apple touch图标的文件名不同，未被使用。我可以选择图像的顺序吗？在我的例子中，另一个图像出现在meta标记的图像之前。最小图像大小现在是200x200px.Woot！我已经将img的大小设置为300px，现在它似乎可以工作了。谢谢@Tr1stanI我也有这个问题。linter没有报告错误并正确显示我的图像，但当我单击网站上的共享按钮时，共享界面中绝对没有图像。image_src不再适用于Facebook，但一些服务仍然使用它向客户端发送电报，等等。有没有合法的方法在另一个网站上使用该共享器从url获取内容？我对FacebookAPI和其他东西了解不多…尝试使用URL选项。如果页面上有OG标签，FB会将其刮除。在这里测试您想要使用的页面：p[images][0]正是我所需要的。og标签用于共享同一个图像，但我需要共享同一页面中的多个图像。这应该是新的“公认答案”-如此简单明了。谢谢你，伙计。安东尼奥，你有关于上面所显示内容的源链接吗？我正试图在developers.facebook.com上查找此内容，但除此之外，我什么也找不到。“请帮忙！”格林先生，就这样。此功能已被“弃用”，但现在又回到了官方文档中。无论如何，我相信我的答案涵盖了它工作的基本设置。@AntonioMax请解释一下你的帖子中s=100是什么？在标签之后-你的意思是：在主体标签之后？是的，我相信这就是他们的意思。很久以前我在一个网站上做过这个，但是使用了style=display:none；而不是将其设置为1x1像素。调试器很有帮助。 
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description