Facebook链接预览如何发生？

当您在Facebook中键入URL时，它会自动提供“发布链接”function。 对于大多数网站，它会自动加载从页面某处拉出的一系列图像，以与链接和描述一起使用。 有没有人知道如何为我们自己的网站实现相同的function，没有任何FB API等..只是javascript或JQuery？

Answer 1

由于安全限制，JavaScript无法从任何服务器加载任何页面。 Facebook实际上要求Facebook服务器提供有关该页面的信息，然后服务器依次查询页面以提取信息。 您也需要服务器端实现此function。

除此之外，它非常简单：使用HTTP客户端库为您选择的语言连接到提供的URL，然后使用HTML解析库提取title标记，识别body标记中的重要文本，并提取似乎最合适的img标记源。

一旦您的服务器能够提取有关页面的信息，通过AJAX调用它是一个相当简单的练习。

Answer 2

@Keshan。

我在我的网站上开发了一个带有PHP和jQuery的Facebook链接预览版。 看看……源代码是免费的…我没有在这里发布整个代码，因为它们是很多文件…但是如果您更喜欢在这里发布代码，请告诉我，我会发布。

它可以在Github上获得https://github.com/LeonardoCardoso/Facebook-Link-Preview

Facebook链接预览 – PHP + jQuery

Answer 3

我认为涉及以下步骤

• 使用Javascript查找书面文本中的链接
• 从找到的链接获取文本中的最后一个链接（FB仅显示最后一个链接）
• 使用AJAX将此链接详细信息发送到服务器端页面（PHP / ASP / JSP等）
• 服务器端页面获取所需数据（来自Meta标签），包括
  • 标题（最好是打开图表og:title如果缺少
  • 描述（最好是打开图表og:description如果从丢失了
  • 图像（最好是打开图形og:image如果从
• 在PHP中，您可以使用curl或file_get_contents获取这些数据，并解析上面详述的所需数据。 不确定其他语言。
• 显示在AJAX请求中找到的结果。

另外我认为FB一旦找到数据就存储在数据库和第一次查询中。 这有助于他们获得更快的结果，因此同一篇文章共享和喜欢从存储的数据生成图像和细节。

您将需要Javascript在运行时显示此预览（当您在textarea中写入时）。 但是，如果您在发布数据后只需要它，可以使用纯服务器端语言（您可以避免使用javascript）来完成，并按照上述步骤删除AJAX调用。

Answer 4

令人惊讶的是，那里没有那么多服务。 正如之前的评论者发布的那样，如果没有服务器元素，您的浏览器就无法做到这一点。

所以，工作流程就是这样的：

1. 解析插入的文本以测试它是否是有效的URL
2. 通过AJAX将URL值转换为定制服务或自己滚动。
3. 该服务（我的是用.Net编写）将页面加载到内存中并使用DOM解析器解析它。 我使用HTML Agility包你可以使用AngleSharp等。
4. 您需要提取Open图元元素（通常）回退到标准元标题/描述等。
5. 收拾所有OG善良并通过AJAX返回此模型
6. 将返回的值作为预览放在屏幕上。
7. 如果接受，则写入逻辑以将值插入数据库

如果您不打算创建服务器对象，则可以使用第三方服务来执行检索位：

http://unfurl.oroboro.com/

https://guteurls.de/

祝你好运。