Embed.ly 介绍与实践──让内容嵌入变得简单

胡巍 喜马拉雅技术博客 2020年07月23日 15:08

前段时间，公司的 pm 说要让我们的站外播放器支持一下 Embed.ly，一时间有点懵逼，Embed.ly 是什么？听都没听过，只是大概知道可以通过它让我们在 Medium 中输入一段url就能轻松地嵌入我们的站外播放器，并能播放声音。

那么，Embed.ly 到底是什么呢？我们一步一步往下看。

Embed.ly 是什么?

Embed.ly 官网: https://Embed.ly

官方给出的定义是：

Embedly is a platform for converting URLs into embeddable content. Build rich and engaging applications through Embedly’s APIs. Sites with embeddable media increase time on site by 250 percent. Keep your audience engaged with video, images, audio and more.

翻译成中文就是：

Embedly 是一个用于将URL转换为可嵌入内容的平台。通过 Embedly 的 API 构建功能丰富且引人入胜的应用程序。带有可嵌入媒体的网站将网站停留时间增加了 250％。让您的观众与视频，图像，音频等保持互动。

原来如此，果然产品要做这东西还是有点用的，点开官网链接，发现目前已有 700 多家内容提供商接入 Embed.ly 了，看上去还是挺有名气的，仔细搜了搜，发现国内也有公司在用，比如优酷。

如果大家有时间，可以点开官网链接四处翻翻，这个网站提供的内容还挺丰富的，从嵌入规则介绍到如何一步一步成为提供商，各类嵌入 Api 和技术文档，还有方便调试的工具，如果在接入过程中遇到困难，还能在线联系他们，寻求技术支持，不得不说，这是个良心网站。

了解了 Embed.ly 之后，我们来看看为什么那么多人要使用嵌入。

为什么嵌入变得越来越重要？

• 提高内容创作效率
  单位经济学上有个概念叫投资回报率（投资时间与所关注结果的比率），不论是发布文章，图片，视频，还是音频，投资回报率都很重要。嵌入是为内容创作者显著提高该比率的一种方法。
• 网络饱和
  海量的应用已经瓜分用户大量的时间，新产品想要走到用户身边，不再可能独自传播。
  人们在已经访问过的网站和应用中看到我们的内容次数越多，注册我们的网站几率就越大（提高知名度）。仅仅看到内容可能还不够，让用户每次都能看到内容的同时获得差异化的价值，并把体验和我们的品牌联系起来。
• 提供价值
  即使只有一个人在用，我们的产品也需要提供价值，有价值，才能让更多的人选择我们。
  嵌入也是在创业阶段所需要的功能，如果竞品有这个功能，而我们没有，就丧失了竞争力。

上图截自于embed.ly官网，可以看到嵌入的优势很明显。

嵌入式协议

oEmbed官网: https://oembed.com/

 

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.（oEmbed 官网）

oEmbed是一种格式，允许在第三方站点上嵌入URL表示形式。使用简单的API，当用户发布指向该资源的链接时，网站可以显示嵌入的内容（例如照片或视频），而不必直接解析该资源。

随手又从 oEmbed 官网搞来了一段介绍，这是一种开放式协议。这还不够，我们结合着下面这张图一起看看
 

原来 oEmbed 就是我们提供一个接口，根据不同的 Url 参数返回一段结构化的数据，数据的格式要遵循 oEmbed 协议，比如包含 version 、type 、width 等字段，消费者拿到数据就能准确无误地生成嵌入内容。

可见，使内容可嵌入的最佳方式，就是实现 oEmbed。

嵌入内容注意点

如果我们遵循嵌入式协议实现了 oEmbed 服务，还要注意以下两个问题。

1. 速度
   呈现内容要尽可能快，如果加载过慢，则用户可能不会使用我们的嵌入。iFrame获取数据和呈现内容所花费的时间少于300毫秒为佳，越快越好。
2. 响应能力
   嵌入的内容应该在尽可能多的设备上完美展示（PC、Mobile），避免给用户带来困扰。（体验与品牌联系）

提供者与消费者

• 提供者：
  简单来说，提供者就是想要将自己的内容被嵌入到别的平台的一方，比如被嵌入到 Reddit，Medium 等站点中。
• 消费者：
  消费者就是想要获得嵌入内容的一方，比如 Reddit，Medium，Confluence 等之类的站点，允许其用户在其平台内嵌入第三方的内容。

所以提供者与消费者的关系就是被嵌入和嵌入的关系。

那么 Embed.ly 在这其中充当的角色就是：提供者和消费者的中间人。提供者只需要与 Embed.ly 完成对接（剩下的事情都交给 Embed.ly）即可实现将自己的内容被嵌入到别的平台，这样对提供者来说非常方便，因为不需要去和每个消费者联调。与此同时，消费者通过 Embed.ly 官网查找自己想要嵌入的内容以及嵌入的链接格式，就可以轻松获取丰富的嵌入内容（因为这些内容提供方都已与 Embed.ly 完成了对接）。这也是大多数主流嵌入式提供者和消费者都在使用 Embed.ly 的原因。

在这里，我们是要成为一个提供者。

说了这么多，想必大家对嵌入的大部分概念已有所掌握，接下来我们一起看看整个嵌入的过程。

嵌入的过程

从上图，可以看出整个嵌入的过程，主要分为下面四步：

1. 嵌入式（oEmbed）消费者平台上的用户执行的操作将触发在该平台内创建嵌入（比如 Medium 作者将 URL 粘贴到他们正在撰写的新博客文章中）。
2. 嵌入式消费者平台检查该 URL 是否在其 Embed.ly 提供程序的缓存列表中。如果是，则该站点使用 URL 向 Embed.ly 发出请求。
3. Embed.ly通过请求的 URL 向我们网站上的 oEmbed_url（我们提供的oEmbed接口）发出请求，并获得 JSON 响应（呈现嵌入所需的所有信息）。
4. Embed.ly将此JSON响应返回给嵌入式消费者，然后嵌入式消费者网站使用此响应来创建 IFrame，呈现内容。

好了，说了这么多，下面我们就一起来实现这一功能。

让我们成为提供者

和嵌入相关的概念与规则有很多，但是真的要成为提供者，只需要做三件事情。

 

1. 提供一个遵循 oEmbed 协议的接口（通常是一个 GET 请求，参数包含 url、format等，返回值是一段 JSON）

比如我们提供的接口：

https://www.himalaya.com/services/oembed?url=https://www.himalaya.com/physics-podcasts/asa-dalam-ruang-1970159（以id为1970159的专辑页面为例）

我们访问这个接口
 

没错，这个接口就是为 Embed.ly 准备的。

2. 提交 Embed.ly 申请资料。

在提交资料之前，我们要仔细阅读成为 Embedly 提供者的所有条件（如果嵌入是 IFrame,则不用满足全部条件）。
链接：https://Embed.ly/providers/new

确认满足 Embed.ly 的条件后，就可以提交申请资料了，链接：https://Embed.ly/providers/form
根据提示一步一步填完表单，接下来就是耐心等待处理，如果顺利，1周左右就会审批通过。
这是我们提交的资料：
 

我们可以通过这个链接：https://support.Embed.ly/hc/en-us/requests 查看审核状态 。如果你比较着急，也可以给他们发邮件，后续有需求，比如更改上面提交资料的一部分，也可以继续给 Embedly 提 Requests，他们收到后会帮我们更新集成。可以看到上面提交的资料中很多链接都是UAT 环境的（一开始出于测试目的，想测试通过后再提交生产环境的链接）后来也给 Embed.ly 提了新的 Request,已经将这些 UAT 链接换成了正式链接https://www.himalaya.com

3. 审核通过后，对嵌入功能进行验证。
首先我们需要验证我们的服务是否已经集成到 Embed.ly。
最简单的方式就是打开这个地址：https://Embed.ly/providers （寻找 Provider ）搜一下，如果能寻找到自己，就说明服务已经集成到 Embed.ly。

比如搜 himalaya:

显然，我们已经在集成中了。点击搜索结果，我们就能看到我们的 Url Schemes：
 

也就是说，只要消费者贴入的 URL 符合这个规则，就有可能获得嵌入内容，目前我们实现了专辑页、声音页、playlist 页，比如：

专辑：

https://www.himalaya.com/music-podcasts/prince-official-podcast-1506818
声音：

https://www.himalaya.com/music-podcasts/prince-official-podcast-1506818/up-all-nite-with-prince-episode-1-the-atrium-98776277
playlist:

https://www.himalaya.com/playlists/listening-recommendations-41066

这些url显然都是符合这个 Url Schemes的，当然如果你输入: https://www.himalaya.com/about 是不能获得嵌入内容的，因为我们没有处理，也不需要。
当然如果你想直观的看到嵌入结果，可以访问这个链接：https://Embed.ly/code，我们贴入上面的例子，就能直接看到嵌入结果。
到这里，我们验证了服务已经成功集成到 Embed.ly。这还不够，接下来我们去消费者平台验证嵌入结果。

这里以Medium为例，我们打开Medium官网：https://medium.com/，如果你已经有 Medium 账号了（没有需要注册一个）那么登录之后去创建一篇文章。光标聚焦后，我们点击 + 号，选择嵌入一个链接，这时候就可以将我们某个专辑页的地址贴进去，如果网络好的话，很快就会出来结果。
这是我们贴入了一个专辑地址获得的内容：

同样，贴如声音页地址，我们获得声音的内容：

看上去效果还不错，到这一步，我们的测试都很顺利，可以说达到了目的。接下来，就是通知消费者（想要获得嵌入内容的一方）去嵌入我们的内容了。通常可以通过站内信或者 Email 的方式通知我们的主播和听众先去使用，相信随着使用的人多了，我们的知名度会越来越高。（我把对大家有用的链接都列了出来，放在文章的最后。）

总结

嵌入确实是一个很有用的功能，无论是对于内容提供者，还是内容消费者来说，都极大的提高了接入效率，与此同时，也让我们的网页变得丰富多样。现在，回到文章开头，Embed.ly 到底是什么？想必大家都有了答案。

最后，我们来梳理一下 Embed.ly 存在的意义：

对提供者：

1. 极大的提高了内容提供者的接入效率，无需内容提供者分别去与各个内容消费者对接。
2. 在将每个提供者的站点列入白名单之前，先对其进行测试，以确保它们正确实施了规范。保证了嵌入的质量。
3. 缓存提供者的 JSON 响应。
4. 通过window.postMessage API 嵌入后，为 IFrame 提供了一种标准化的方式来调整其样式，比如高度等等。

对消费者：

1. 能快速查找自己想要嵌入的内容的站点和 Url Scheme, 很轻松的嵌入各类丰富的内容到自己的网页中。极大的提高了内容创作者的效率。
2. 无需和提供者对接，只需要知道嵌入的 Url 是否在 Embed.ly 的集成中。
    

常用链接

• 成为 Embed.ly 提供者条件 链接：https://Embed.ly/providers/new
• 提交申请 链接：https://Embed.ly/providers/form
• 查看审核处理状态 链接：https://support.Embed.ly/hc/en-us/requests（后续有需要，也可以继续给 Embed.ly 提 Requests，请求他们帮我们更新集成）
• 测试嵌入结果 链接：https://Embed.ly/code（如果展示的结果正是自己 oEmbed 服务返回的内容，那么已经完成集成）
• 寻找 Provider 链接：https://Embed.ly/providers（如果能寻找到自己，也说明服务已经集成到 Embed.ly）