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

如何修复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 中仅使用 URL 嵌入内容

在 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 内容的示例

WordPress 如何嵌入 Facebook 内容的示例

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

Instagram-oEmbed-WordPress-Embed-Example

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 端点添加了一个参数来模拟错误。我进行了测试,结果如下。

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

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

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

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

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

使用传统 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 插件 oEmbed Plus 

WordPress 插件 oEmbed Plus

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

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

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

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

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

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

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

Facebook 开发者 "App ID" 和 "App Secret"

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

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

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

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

配置 oEmbed Plus 插件设置

配置 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 FeedSocial Post Feed,也增加了对新 Facebook oEmbed 端点的支持。

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

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

小结

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

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

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

评论留言