Starting October 24, Facebook has dropped support for unauthenticated WordPress embeds. Thus, if you’re embedding Facebook and Instagram content on your WordPress site, they’ll break.
More specifically, the old Facebook oEmbed endpoints are being replaced by new ones that require authentication via Facebook. As Facebook owns Instagram, the same requirements apply for Instagram oEmbed endpoints too.
In this article, we’ll cover how WordPress uses Facebook and Instagram oEmbed endpoints, what’s been updated, and how you can fix things so your embeds keep working as they should.
Let’s get ready!
How WordPress Uses oEmbed to Embed Content
oEmbed is a protocol that allows sites to embed content from other third-party sites with just a URL. It’s designed primarily to avoid the need to copy-paste HTML from other sites. WordPress uses oEmbed to display embedded content (like photos or videos).
All you need to do is place the resource URL in the content area, and WordPress will automatically turn it into an embed and show a live preview of it.
In the example above, I pasted in a YouTube video link and WordPress automatically converted it to a video embed. The oEmbed protocol is the backbone of WordPress to embed many types of content such as videos, images, updates, and more from various social media platforms.
While WordPress allows you to embed sanitized iframes from any registered oEmbed provider, it doesn’t embed all of them by default for security reasons. It embeds only URLs of certain sanctioned oEmbed providers by default.
The list of WordPress’ trusted oEmbed providers includes most of the popular content hosting and social networking sites such as Imgur, Facebook, Instagram, Tumblr, YouTube, Vimeo, and many more. These providers can embed any content, such as videos, iframes, JavaScript, and even random HTML.
Facebook and Instagram oEmbed Endpoints (Legacy)
Facebook and Instagram oEmbed endpoints are the backbone for embedding Facebook and Instagram content in WordPress sites.
Facebook oEmbed endpoints allow WordPress to pull in not just the main content, but also metadata such as the page name and logo, date and time, thumbnail, number of likes, comments, and shares, and the URL to the source.
The same holds true for embedding content from Instagram. You can see not only the image in the embed, but also important metadata information related to it.
The New Facebook and Instagram “oEmbed” Endpoints
Facebook announced to deprecate their existing oEmbed endpoints starting on October 24, 2020. They’re calling these old endpoints now as Legacy oEmbed endpoints.
By October 24, 2020, developers must leverage a user, app, or client token when querying Graph API for user profile pictures via UID, FB OEmbeds and IG OEmbeds. Developers should provide a user or app token when querying for profile pictures via a UID or ASID, though client tokens are supported as well. Please visit our changelog for User Picture, Facebook OEmbed and Instagram OEmbed for details on how to start calling these Graph API endpoints today.
– Facebook for Developers
What You Need Now to Take Advantage of the Facebook oEmbed API
Going against the open web API nature of oEmbed, the new Facebook oEmbed API has various requirements:
- You need to have a Facebook for Developer account.
- Then you need to have a registered Facebook App to generate a unique App ID.
- Next, you must enable the oEmbed Product for your registered App.
- Then you must generate an App Access Token or a Client Access Token.
- Finally, you must set the Facebook App to Live mode.
Responding to these new requirements, WordPress is removing Facebook and Instagram as trusted oEmbed sources.
We expect the next major WordPress update to include these changes. If you’re using the Gutenberg plugin, the latest Gutenberg 9.0 release has removed support for them already.
What Happens to Old Facebook and Instagram Embeds?
WordPress caches oEmbed responses in its database under the post meta or the hidden oembed_cache post type (currently only used in widgets).
As WordPress doesn’t purge these values by default, the contents of the embeds will continue to exist on your website.
But they’ll be purged if you delete them manually from the database. Therefore, any Facebook or Instagram embeds you’ve added before the October 24th deadline will persist even after the deprecation date.
How to Embed Facebook and Instagram Content (After October 24th)
If you try embedding Facebook or Instagram content after they deprecate the legacy oEmbed endpoints, you and your users may receive HTTP 400 errors as a response.
To help us test how embed attempts will show up after October 24th, 2020, Facebook has added a parameter for the legacy oEmbed endpoints to simulate the error. I tested it out and the results are below.
Facebook’s fallback embeds will appear as small excerpts (120 characters max) within blockquotes. It’ll also include links to the author and the original source, but nothing else beyond that.
Not even a reference to Facebook, except for the links, clicking which will take you to Facebook.
In comparison, Instagram’s fallback embeds are much better with the embed structure pretty much intact.
With that being said, this is a temporary issue. Once WordPress removes Facebook and Instagram oEmbed endpoints from its core, the legacy oEmbed endpoints will cease to be a problem.
The only way to embed Facebook and Instagram content will be then to comply with Facebook’s requirements. You’ll learn how to do exactly that in the next section.
How to Fix the Facebook and Instagram oEmbed Issue in WordPress
The easiest way to restore Facebook and Instagram embeds in WordPress is to use the free oEmbed Plus plugin by Ayesh Karunaratne. It helps you to implement the new Facebook oEmbed endpoints to re-enable Facebook and Instagram embeds in the block editor.
To get started with it, first install and activate the plugin.
Note: oEmbed Plus requires PHP 7.3 or higher versions to work. If your current WordPress host doesn’t support PHP 7.3+ versions yet, we strongly encourage you to seek new hosting.
Next, create a Facebook for Developers account, if you don’t have one already. Then, create an App. In my case, I’m naming my App “WordPress Site,” but you can name it whatever you prefer.
Creating an App will auto-generate an App ID for it.
You can view both your App ID and App Secret by going to the Settings → Basic panel under your App dashboard. Note these two values down as you’ll need them later.
While you’re here, set the Privacy Policy URL too as it’s required to make the App go Live. It’s recommended to use a proper privacy policy so that your App doesn’t get blacklisted.
The oEmbed Product is enabled automatically by default, so you can leave it as is.
Next, go to the Settings → Writing screen in your WordPress dashboard and search for the Facebook and Instagram Embed Settings section. Here, enter the App ID and App Secret values you noted down earlier.
Alternatively, you can add the App ID and App Secret to your wp-config.php file. Here’s the code snippet that you need to use:
define('OEMBED_PLUS_FACEBOOK_APP_ID', '7168...app.id...789');
define('OEMBED_PLUS_FACEBOOK_SECRET', '20e5...app.secret...890xyz');Don’t forget to change the values shown above to yours! Once done, save the file.
If you edit the wp-config.php file to configure oEmbed Plus, it’ll automatically disable the App ID and App Secret form fields in your WordPress dashboard. Thus, you can keep your App credentials a secret from other users.
That’s pretty much it!
All new Facebook and Instagram embeds now use the new authentication API to embed content in your WordPress site.
Other dedicated social media plugins, like Instagram Feed and Social Post Feed, are also adding support for the new Facebook oEmbed endpoints.
However, these plugins come bundled with many features, so they may be unnecessary bloat for your site for this specific use case. If you’re already using them though, then you can check them out.
Facebook is generous with the rate limits for their new API, for now. They allow you to make up to 5 million requests per day. As WordPress caches the oEmbed API responses in the database, an embed won’t trigger any further requests beyond the first one. You can refer to Facebook’s updated oEmbed documentation for more information.
Summary
WordPress is the most popular CMS in use today. Likewise, Facebook and Instagram are the most popular social media platforms. Therefore, this change potentially affects millions of sites.
Embedding social media content in WordPress offers a more unique experience to your site visitors. Starting October 24, 2020, many unaware users will find it frustrating to embed Facebook and Instagram content. We hope this article helps you rectify the Facebook oEmbed issue in WordPress.
If you’re still facing problems with Facebook and Instagram embeds, let us know in the comments!
Does this update affect pages built with Page Builders since it’s supposed to only affect WordPress core stuff? We’re having a hard time really understanding if this applies to WordPress sites using WordPress themes, or if it includes WordPress sites using 3rd party builders like Elementor, Beaver or Divi.
Hi Ronda, you’ll want to check with your theme provider of page builder developer to check if they are using oEmbed. Generally speaking, this is not something that only affects WordPress Core, so I’d recommend looking into it ASAP.