Facebook no longer supports unverified WordPress embedding. Therefore, if you embed Facebook and Instagram content on a WordPress site, they will crash.
more specifically, the old Facebook oEmbed endpoints will be replaced by new endpoints that need to be validated by Facebook. Because Facebook has Instagram, the same requirements apply to Instagram oEmbed endpoints.
in this article, we will show how WordPress uses Facebook and Instagram oEmbed endpoints, what has been updated, and how to fix these problems to keep your embedded program working.
WordPress embeds content
oEmbed using oEmbed is a protocol that allows websites to embed content from other third-party sites through only one URL. It is mainly designed to avoid copying and pasting HTML from other websites. WordPress uses oEmbed to display embedded content, such as photos or videos.
you simply place the resource URL in the content area, and WordPress automatically converts it into embedded content and displays its real-time preview.
only uses URL to embed content
in WordPress. In the above example, I pasted a YouTube video link, and WordPress automatically converted it to video embedding. The oEmbed protocol is the backbone of WordPress embedding many types of content, such as videos, pictures, updates, etc., from a variety of social media platforms.
although WordPress allows you to embed purified iframe provided by any registered oEmbed provider, all of this content is not embedded by default for security reasons. By default, it embeds only the URL of certain approved oEmbed providers. The list of
WordPress trusted oEmbed providers includes most popular content hosting and social networking sites, such as Imgur, Facebook, Instagram, Tumblr, YouTube, Vimeo, etc. These providers can embed any content, such as video, iframe, JavaScript or even random HTML.
Facebook and Instagram oEmbed endpoints (traditional)
Facebook and Instagram oEmbed endpoints are the pillars of embedding Facebook and Instagram content in WordPress sites. An example
Facebook oEmbed endpoint of how
WordPress embeds Facebook content allows WordPress to introduce not only the main content, but also metadata, such as page name and logo, date and time, thumbnails, likes, comments and shares, and the URL of the source. The same is true of how
WordPress embeds Instagram content as an example of how
is embedded in Instagram content. You can see not only the embedded image, but also the important metadata information related to it.
‘s new Facebook and Instagram “oEmbed” endpoints
Facebook announced the phase-out of existing oEmbed endpoints from October 24, 2020. They now call these old endpoints traditional oEmbed endpoints.
by October 24, 2020, developers must use user, application, or client tokens when querying user profile pictures for graphical API through UID, FB OEmbeds, and IG OEmbeds. When querying profile pictures through UID or ASID, the developer should provide a user or application token, but also support client tokens. Visit our user images, Facebook OEmbed and Instagram OEmbed update logs to learn how to invoke these Graph API endpoints starting today. -what does Facebook for Developers
need to take advantage of Facebook OEmbed API now?
is different from oEmbed’s open Web API nature, and the new Facebook oEmbed API has various requirements:
- you need to have a Facebook for Developer account.
- then you need to register a Facebook application to generate a unique application ID.
- then you must enable the oEmbed product for the registered application.
- then you must generate an application access token or a client access token.
- finally, you must set the Facebook application to real-time mode.
to meet these new requirements, WordPress removes Facebook and Instagram as trusted oEmbed sources.
WordPress will now include these changes. If you are using Gutenberg plug-ins, support for them has been removed since Gutenberg version 9.0. What happens to
‘s old Facebook and Instagram embedding?
WordPress caches oEmbed responses underpost metaor hiddenoembed_cachepost types in its database (currently only for gadgets).
because WordPress does not clear these values by default, embedded content will continue to exist on your site. However, if you manually delete them from the database, they will be cleared.
therefore, any Facebook or Instagram embedding that you added before the October 24, 2020 deadline will continue to exist even after the obsolete date. How
embeds Facebook and Instagram content (after October 24, 2020)
if you try to embed content after Facebook or Instagram deprecates traditional oEmbed endpoints, you and your users may receive HTTP 400s in response. To help us test how the embedding attempt will display after October 24, 2020,
added a parameter to the traditional oEmbed endpoint to simulate the error. I conducted the test, and the results are as follows.
Fallback embedding of analog embedded
Facebook using traditional Facebook oEmbed endpoints appears in block quotation marks as small excerpts (up to 120 characters). It also contains links between the author and the original source, but nothing else.
does not even mention Facebook except for links. Click on the link to enter Facebook.
uses traditional Instagram oEmbed endpoints to embed
. By contrast, the backup embedding of Instagram is much better, and the embedded structure remains basically the same.
, however, this is only a temporary problem. Once WordPress removes Facebook and Instagram oEmbed endpoints from its core, traditional oEmbed endpoints will no longer be a problem.
at that time, the only way to embed Facebook and Instagram content is to comply with Facebook requirements. You will learn how to do this in the next section. How
fixes Facebook and Instagram oEmbed problems in WordPress the easiest way for
to restore Facebook and Instagram embedding in WordPress is to use the free oEmbed Plus plug-in provided by Ayesh Karunaratne. It can help you implement new Facebook oEmbed endpoints and re-enable Facebook and Instagram embedding in the Block Editor. To get started with the
WordPress plug-in oEmbed Plus
, first install and activate the plug-in.
Note: oEmbed Plus requires PHP 7.3 or later to run. If your current WordPress hosting does not support PHP 7.3 or later, we strongly recommend that you look for a new hosting.
next, if you don’t already have a Facebook for Developers account, please create one. Then, create an application. In my example, I named my application “WordPress Site”, but you can also name it as you like.
creates an application in the Facebook for Developers portal,
creates App, and automatically generates an App ID.
you can go to the Settings → Basic panel under the application control panel to view App ID and App Secret. Make a note of these two values because you will use them later.
Facebook developers “App ID” and “App Secret”
are here, and you also need to set the privacy policy URL, as this is a necessary condition for bringing the application online. It is recommended that you use an appropriate privacy policy so that your application is not blacklisted.
automatically enables oEmbed products by default, so you can leave them as is.
next, go to the set → composing interface in the WordPress panel and search for the Facebook and Instagram Embed Settings section. Here, enter the App ID and App Secret values you wrote down earlier.
configure oEmbed Plus plug-in Settings
you can also add App ID and App Secret to the wp-config.php file. The following is the code snippet 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 value shown above to your value! When you are finished, save the file.
if you edit the wp-config.php file to configure oEmbed Plus, it automatically disables the App ID and App Secret form fields in the WordPress dashboard. This way, you can keep your application credentials secret from other users.
, that’s pretty much it!
all new Facebook and Instagram embedding now embed content in the WordPress site using the new authentication API.
‘s other specialized social media plug-ins, such as Instagram Feed and Social Post Feed, have also added support for new Facebook oEmbed endpoints.
however, these plug-ins are bundled with a lot of functionality, so they may be unnecessarily bloated for your site. However, if you are already using them, you can check them out.
currently, Facebook has a looser rate limit for its new API. They allow you to make up to 5 million requests a day. Because WordPress caches oEmbed API’s response in the database, embedding does not trigger any requests other than the first request. For more information, see the oEmbed documentation updated by Facebook.
summary
WordPress is the most popular content management system today. Similarly, Facebook and Instagram are the most popular social media platforms. As a result, this change could affect millions of websites.
embeds social media content in WordPress to provide a more unique experience for website visitors. Starting from October 24, 2020, many unwitting users will find embedding Facebook and Instagram content frustrating. I hope this article will help you solve the Facebook oEmbed problem in WordPress.
if you are still facing Facebook and Instagram embedding problems, please let us know in the comments!
