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链接预览版.看看......源代码是免费的...我没有在这里发布整个代码,因为它们是很多文件...但是如果您更喜欢在这里发布代码,请告诉我,我会发布.

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调用.