javascript Facebook 链接预览如何发生？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4767473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Facebook link preview happens?
提问by Keshan
When you type a URL into facebook, it automatically comes up with the "post a link" feature. With most websites, it automatically loads a selection of images it pulls from somewhere in the page to go alongside the link and description. does anyone have an idea of how to implement that same feature for our own site without any FB API etc.. just javascript or JQuery ?
当您在 facebook 中输入 URL 时，它会自动提供“发布链接”功能。对于大多数网站，它会自动加载从页面某处提取的一系列图像，与链接和描述放在一起。有没有人知道如何在没有任何 FB API 等的情况下为我们自己的网站实现相同的功能。只是 javascript 或 JQuery ？
回答by Victor Nicollet
Due to security restrictions, JavaScript cannot load any page from any server. Facebook actually asks the Facebook serversfor information about that page, and the servers in turn query the page to extract the information. You, too, will need a server-side implementation of this.
由于安全限制，JavaScript 无法从任何服务器加载任何页面。Facebook 实际上向Facebook 服务器询问有关该页面的信息，然后服务器依次查询该页面以提取信息。您也将需要一个服务器端实现。
Aside from that, it's fairly simple: use an HTTP client library for your language of choice to connect to the provided URL, then use an HTML parsing library to extract the titletag, identify a significant piece of text in the bodytag, and extract the imgtag sources that seem the most appropriate.
除此之外，它相当简单：使用您选择的语言的 HTTP 客户端库连接到提供的 URL，然后使用 HTML 解析库提取title标签，识别标签中的重要文本body，并提取img标签看起来最合适的来源。
Once your server is able to extract information about a page, it's a fairly simple exercise to call it through AJAX.
一旦您的服务器能够提取有关页面的信息，通过 AJAX 调用它是一个相当简单的练习。
回答by Leonardo Cardoso
@Keshan.
@克山。
I developed myself a Facebook Link Preview with PHP and jQuery that is on my website. Take a look... The source code is free... I didn't post the whole code here because they are many files... But if you prefer the code to be posted here, tell me and I'll post.
我在我的网站上使用 PHP 和 jQuery 为自己开发了一个 Facebook 链接预览。看一下...源代码是免费的...我没有在这里发布完整的代码，因为它们是很多文件...但是如果您希望将代码发布在这里，请告诉我，我会发布。
It's available on Github https://github.com/LeonardoCardoso/Facebook-Link-Preview
它可以在 Github https://github.com/LeonardoCardoso/Facebook-Link-Preview 上找到
回答by jahajee.com
I think following steps are involved
我认为涉及以下步骤
- Using Javascript find the links in the written text
- From the found links get the last link in the text (FB shows only for last link)
- Using AJAX send this link detail to a server side page (PHP/ASP/JSP etc.)
- The server side page gets the required data (from Meta tags) including
- Title (Preferably Open graph
og:titleif missing from<title> - Description (Preferably Open graph
og:descriptionif missing from<meta name="description" .... - Images (Preferably Open graph
og:imageif missing from<img src=....
- Title (Preferably Open graph
- In PHP you can get these datas either using
curlorfile_get_contentsand parse for required data detailed above. Not sure about other Language. - Show the result thus found in the AJAX request.
- 使用 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 请求中找到的结果。
Additionally I think FB stores the data, once found, in database and 1st queries there. This helps them to get faster result and hence same article shared and liked generate the image and details from the stored data.
此外，我认为 FB 将数据存储在数据库中，并在那里进行第一次查询。这有助于他们获得更快的结果，因此共享和喜欢的同一文章从存储的数据中生成图像和详细信息。
You will need Javascript to show this preview in runtime (while you write in the textarea). However if you only need it after posting of data it can be done with pure server side language (you can avoid javascript) and following above steps just remove AJAX call.
您将需要 Javascript 在运行时显示此预览（当您在 textarea 中编写时）。但是，如果您只在发布数据后需要它，则可以使用纯服务器端语言（您可以避免使用 javascript）来完成，并且按照上述步骤只需删除 AJAX 调用即可。
回答by Darren Street
Surprisingly there aren't that many services out there doing this. As the previous commenter posted, your browser can't do this without a server element.
令人惊讶的是，没有那么多服务可以做到这一点。正如之前的评论者所发表的那样，如果没有服务器元素，您的浏览器就无法做到这一点。
So, the workflow is really this:
所以，工作流程实际上是这样的：
- Parse the inserted text to test it's a valid URL
- Whiz that URL value via AJAX to a bespoke service or roll your own.
- The service (mine is written in .Net) loads up the page in memory and parses it with an DOM parser. I use the HTML Agility pack you could use AngleSharp etc.
- You need to extract the Open graph meta elements with (typically) fall back to standard Meta Title/ Description et all.
- Pack up all that OG goodness and return this model via AJAX
- Put the returned values on screen as a preview.
- If accepted write the logic to insert the values into your DB
- 解析插入的文本以测试它是一个有效的 URL
- 通过 AJAX 将该 URL 值设置为定制服务或推出您自己的服务。
- 该服务（我的是用 .Net 编写的）在内存中加载页面并使用 DOM 解析器对其进行解析。我使用 HTML Agility 包，你可以使用 AngleSharp 等。
- 您需要使用（通常）回退到标准元标题/描述等来提取开放图元元素。
- 打包所有 OG 优点并通过 AJAX 返回此模型
- 将返回的值作为预览显示在屏幕上。
- 如果接受，请编写将值插入数据库的逻辑
If you are not up to creating the server object, there are third-party services that can do the retrieval bits:
如果您不准备创建服务器对象，则有第三方服务可以执行检索位：
best of luck.
祝你好运。
