Facebook 链接预览是如何发生的？答案

【问题标题】：How Facebook link preview happens?Facebook 链接预览是如何发生的？
【发布时间】：2017-06-14 19:18:05
【问题描述】：

当您在 facebook 中输入 URL 时，它会自动出现“发布链接”功能。对于大多数网站，它会自动加载从页面某处提取的一系列图像，以与链接和描述并排。有没有人知道如何在没有任何 FB API 等的情况下为我们自己的网站实现相同的功能。只有 javascript 或 JQuery？

【问题讨论】：

【解决方案1】：

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

除此之外，它相当简单：使用您选择的语言的 HTTP 客户端库连接到提供的 URL，然后使用 HTML 解析库提取 title 标记，在body 标签，并提取看起来最合适的 img 标签源。

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

【讨论】：

【解决方案2】：

@克山。

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

【讨论】：

谢谢！！我去看看。
事实上。但它们并不是少数代码。它也可以在 Github github.com/LeonardoCardoso/Facebook-Link-Preview 上找到，很多人都已经分叉了。尽管我的网站提供了有关此插件的完整说明，但我并没有尝试生成到那里的访问流。

【解决方案3】：

我认为涉及以下步骤

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

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

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

【讨论】：

【解决方案4】：

令人惊讶的是，这样做的服务并不多。正如之前的评论者所发布的，如果没有服务器元素，您的浏览器将无法执行此操作。

所以，工作流程实际上是这样的：

解析插入的文本以测试它是一个有效的 URL
通过 AJAX 将该 URL 值发送到定制服务或滚动您自己的服务。
该服务（我的服务是用 .Net 编写的）将页面加载到内存中并使用 DOM 解析器对其进行解析。我使用 HTML Agility 包，您可以使用 AngleSharp 等。
您需要使用（通常）回退到标准 Meta Title/Description 等来提取 Open graph 元元素。
打包所有 OG 的优点并通过 AJAX 返回此模型
将返回的值作为预览显示在屏幕上。
如果接受，则编写将值插入数据库的逻辑

如果您无法创建服务器对象，可以使用第三方服务进行检索：

祝你好运。

【讨论】：