如何修复WordPress中的Facebook oEmbed嵌入问题插图

Facebook 已经不再支持未经验证的 WordPress 嵌入。因此,如果您在 WordPress 网站上嵌入 Facebook 和 Instagram 内容,它们就会崩溃。

更具体地说,旧的 Facebook oEmbed 端点将被需要通过 Facebook 验证的新端点所取代。由于 Facebook 拥有 Instagram,同样的要求也适用于 Instagram oEmbed 端点。

在这篇文章中,我们将介绍 WordPress 如何使用 Facebook 和 Instagram oEmbed 端点、更新了哪些内容,以及如何修复这些问题,从而使您的嵌入程序保持正常工作。

WordPress 如何使用 oEmbed 嵌入内容

oEmbed 是一种协议,允许网站仅通过一个 URL 就能嵌入其他第三方网站的内容。它主要是为了避免从其他网站复制粘贴 HTML 而设计的。WordPress 使用 oEmbed 来显示嵌入内容(如照片或视频)。

您只需将资源 URL 放在内容区域,WordPress 就会自动将其转化为嵌入式内容,并显示其实时预览。

如何修复WordPress中的Facebook oEmbed嵌入问题插图1

在 WordPress 中仅使用 URL 嵌入内容

在上面的例子中,我粘贴了一个 YouTube 视频链接,WordPress 自动将其转换为视频嵌入。oEmbed 协议是 WordPress 嵌入多种类型内容(如来自各种社交媒体平台的视频、图片、更新等)的支柱。

虽然 WordPress 允许您嵌入任何已注册的 oEmbed 提供商提供的经过净化的 iframe,但出于安全考虑,默认情况下不会嵌入所有这些内容。默认情况下,它只嵌入某些经认可的 oEmbed 提供商的 URL。

WordPress 信任的 oEmbed 提供商列表包括大多数流行的内容托管和社交网站,如Imgur、Facebook、Instagram、Tumblr、YouTube、Vimeo等。这些提供商可以嵌入任何内容,如视频、iframe、JavaScript 甚至随机 HTML。

Facebook 和 Instagram oEmbed 端点(传统)

Facebook 和 Instagram oEmbed 端点是在 WordPress 网站中嵌入 Facebook 和 Instagram 内容的支柱。

如何修复WordPress中的Facebook oEmbed嵌入问题插图2

WordPress 如何嵌入 Facebook 内容的示例

Facebook oEmbed端点允许WordPress不仅引入主要内容,还引入元数据,如页面名称和徽标、日期和时间、缩略图、点赞数、评论数和分享数,以及来源的URL。

如何修复WordPress中的Facebook oEmbed嵌入问题插图3

WordPress 如何嵌入 Instagram 内容的示例

嵌入 Instagram 的内容也是如此。你不仅可以看到嵌入的图片,还可以看到与之相关的重要元数据信息。

新的 Facebook 和 Instagram “oEmbed” 端点

Facebook 宣布从 2020 年 10 月 24 日起淘汰现有的 oEmbed 端点。他们现在称这些旧端点为传统 oEmbed 端点。

到 2020 年 10 月 24 日,开发人员在通过 UID、FB OEmbeds 和 IG OEmbeds 查询图形 API 的用户配置文件图片时,必须使用用户、应用程序或客户端令牌。通过 UID 或 ASID 查询个人资料图片时,开发人员应提供用户或应用程序令牌,但也支持客户端令牌。请访问我们的用户图片、Facebook OEmbed 和 Instagram OEmbed 更新日志,了解如何从今天开始调用这些 Graph API 端点。– Facebook for Developers

利用 Facebook OEmbed API 现在需要什么?

与 oEmbed 的开放 Web API 性质不同,新的 Facebook oEmbed API 有各种要求:

  • 您需要有一个 Facebook for Developer 帐户。
  • 然后,您需要注册一个 Facebook 应用程序,以生成一个唯一的应用程序 ID。
  • 然后,您必须为已注册的应用程序启用 oEmbed 产品。
  • 然后,您必须生成一个应用程序访问令牌或客户端访问令牌。
  • 最后,您必须将 Facebook 应用程序设置为实时模式。

为了满足这些新要求,WordPress 删除 Facebook 和 Instagram 作为可信的 oEmbed 来源。

WordPress 现在已经将包含这些更改。如果您正在使用 Gutenberg 插件,自 Gutenberg 9.0 版本已经移除了对它们的支持。

旧的 Facebook 和 Instagram 嵌入会怎样?

WordPress 会将 oEmbed 响应缓存到其数据库中的 post meta  或隐藏的 oembed_cache 帖子类型(目前仅用于小工具)下。

由于 WordPress 默认不清除这些值,嵌入的内容将继续存在于您的网站上。但如果您从数据库中手动删除它们,它们就会被清除。

因此,您在 2020年 10 月 24 日截止日期之前添加的任何 Facebook 或 Instagram 嵌入,即使在废弃日期之后也会继续存在。

如何嵌入 Facebook 和 Instagram 内容(2020 年 10 月 24 日之后)

如果您在 Facebook 或 Instagram 弃用传统 oEmbed 端点后尝试嵌入其内容,您和您的用户可能会收到 HTTP 400 错误作为响应。

为了帮助我们测试嵌入尝试在 2020 年 10 月 24 日之后将如何显示,Facebook 为传统 oEmbed 端点添加了一个参数来模拟错误。我进行了测试,结果如下。

如何修复WordPress中的Facebook oEmbed嵌入问题插图4

使用传统 Facebook oEmbed 端点的模拟嵌入

Facebook 的后备嵌入会以小段摘录(最多 120 个字符)的形式出现在块引号中。它还会包含作者和原始来源的链接,除此之外再无其他内容。

除链接外,甚至不会提及 Facebook,点击链接即可进入 Facebook。

如何修复WordPress中的Facebook oEmbed嵌入问题插图5

使用传统 Instagram oEmbed 端点进行模拟嵌入

相比之下,Instagram 的后备嵌入要好得多,嵌入结构基本保持不变。

尽管如此,这只是一个暂时的问题。一旦 WordPress 从其核心中移除 Facebook 和 Instagram oEmbed 端点,传统的 oEmbed 端点将不再是问题。

届时,嵌入 Facebook 和 Instagram 内容的唯一方法就是遵守 Facebook 的要求。您将在下一节了解如何做到这一点。

如何修复 WordPress 中的 Facebook 和 Instagram oEmbed 问题

在 WordPress 中恢复 Facebook 和 Instagram 嵌入的最简单方法是使用 Ayesh Karunaratne 提供的免费 oEmbed Plus 插件。它可以帮助你实现新的 Facebook oEmbed 端点,在区块编辑器中重新启用 Facebook 和 Instagram 嵌入。

如何修复WordPress中的Facebook oEmbed嵌入问题插图6

WordPress 插件 oEmbed Plus

要开始使用,首先安装并激活该插件。

注:oEmbed Plus 需要 PHP 7.3 或更高版本才能运行。如果您当前的 WordPress 托管还不支持 PHP 7.3 或更高版本,我们强烈建议您寻找新的托管。

接下来,如果您还没有 Facebook for Developers 账户,请创建一个。然后,创建一个应用程序。在我的例子中,我将我的应用程序命名为 “WordPress Site”,但您也可以根据自己的喜好来命名。

如何修复WordPress中的Facebook oEmbed嵌入问题插图7

在 Facebook for Developers 门户中创建应用程序

创建 App 会自动生成一个 App ID

您可以进入应用程序控制面板下的 Settings → Basic 面板查看 App IDApp Secret。记下这两个值,因为您稍后会用到它们。

如何修复WordPress中的Facebook oEmbed嵌入问题插图8

Facebook 开发者 “App ID” 和 “App Secret”

在这里,您还需要设置 隐私政策 URL,因为这是使应用程序上线的必要条件。建议使用适当的隐私政策,这样您的应用程序就不会被列入黑名单。

默认情况下会自动启用 oEmbed 产品,因此可以保持原样。

接下来,进入 WordPress 面板中的设置 → 撰写界面,搜索 Facebook and Instagram Embed Settings 部分。在此,输入您之前记下的 App IDApp Secret 值。

如何修复WordPress中的Facebook oEmbed嵌入问题插图9

配置 oEmbed Plus 插件设置

您也可以在 wp-config.php 文件中添加 App IDApp Secret。以下是您需要使用的代码片段:

define('OEMBED_PLUS_FACEBOOK_APP_ID', '7168...app.id...789');  
define('OEMBED_PLUS_FACEBOOK_SECRET', '20e5...app.secret...890xyz');

别忘了把上面显示的值改成你的值!完成后,保存文件。

如果你编辑 wp-config.php 文件来配置 oEmbed Plus,它会自动禁用 WordPress 仪表盘中的 App IDApp Secret 表单字段。这样,您就可以对其他用户保密您的应用程序凭据。

差不多就是这样!

所有新的 Facebook 和 Instagram 嵌入现在都使用新的身份验证 API 在 WordPress 网站中嵌入内容。

其他专门的社交媒体插件,如 Instagram Feed 和 Social Post Feed,也增加了对新 Facebook oEmbed 端点的支持。

不过,这些插件捆绑了许多功能,因此对于您的网站来说,它们可能是不必要的臃肿。不过,如果您已经在使用它们,那么您可以查看一下。

目前,Facebook 对其新 API 的速率限制比较宽松。他们允许你每天最多发出 500 万个请求。由于 WordPress 会在数据库中缓存 oEmbed API 的响应,因此除了第一次请求之外,嵌入不会触发任何其他请求。更多信息,请参阅 Facebook 更新的 oEmbed 文档。

小结

WordPress 是当今最流行的内容管理系统。同样,Facebook 和 Instagram 也是最流行的社交媒体平台。因此,这一变化可能会影响数百万个网站。

在 WordPress 中嵌入社交媒体内容可为网站访问者提供更独特的体验。从 2020 年 10 月 24 日开始,许多不知情的用户会发现嵌入 Facebook 和 Instagram 内容令人沮丧。希望本文能帮助您解决 WordPress 中的 Facebook oEmbed 问题。

如果您仍然面临 Facebook 和 Instagram 嵌入问题,请在评论中告诉我们!