Facebook链接预览如何发生？

Question

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

Answer 1

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

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

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

Answer 2

@Keshan。

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

可在Github https://github.com/LeonardoCardoso/Facebook-Link-Preview

上找到

Facebook Link Preview - PHP + jQuery

Answer 3

我认为涉及以下步骤

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

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

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

Answer 4

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

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

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

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

http://unfurl.oroboro.com/

https://guteurls.de/

祝你好运。