Embedding social content is a simple yet effective way to make your WordPress site more engaging. However, Facebook has announced a change to its API that could potentially break all your website’s embedded Instagram and Facebook content.
If your website features any Facebook or Instagram embeds, then the upcoming oEmbed Application Programming Interface (API) change will affect your website. Luckily, there are steps you can take to ensure this update doesn’t leave you with empty pages.
In this post, we’ll discuss what this controversial API change is, and what it means for WordPress. We’ll then share how you should be embedding Facebook and Instagram content moving forward, and how to protect your site’s existing social content. Let’s jump right in!
Understanding the Upcoming Facebook oEmbed API Change
When you’re writing a blog post, designing a landing page, or building an e-commerce store, you may want to embed content from other websites. This can include posts or entire feeds from your favorite social media sites, such as Facebook and Instagram.
For instance, if you’re building an online store, then you might want to embed the positive review a customer has left on Facebook. Or, perhaps you’re blogging about the latest shocking twist in a popular TV show and want to include fan reactions from across social media.
The oEmbed API is one way to embed content from Facebook and Instagram. Previously, it was possible to embed content by copying the post’s URL and then pasting it to a new location. Thanks to oEmbed, the post would then render, and appear in its new context.
Traditionally, a significant part of oEmbed’s appeal was that it didn’t require authentication. However, on 24 October 2020, Facebook plans to drop tokenless oEmbed support. Since Instagram is owned by Facebook, this change will impact both platforms.
While it’s still possible to embed Facebook and Instagram content, after 24 October the process will become more complicated. Instead of copying and pasting the post’s URL, you’ll need to obtain developer credentials. This requires you to log into the Facebook for Developers console and generate an App ID.
This change will make the embedding process more complex, particularly for less tech-savvy users. However, requiring authentication will improve privacy and security for 2.7 billion Facebook users and 1 billion Instagram users.
What The Facebook oEmbed API Change Means for WordPress
If your WordPress website features any embedded Instagram or Facebook content, then this API change has the potential to break your embeds. If you continue to use any of the legacy endpoints after 24 October, then your website may experience intermittent HTTP 400 errors.
This change may be frustrating for the WordPress community. However, when an API’s provider decides to turn off its endpoint, there’s very little that third parties such as WordPress can do about it.
“oEmbed is a great feature and should be open, not requiring authentication,” said core WordPress team member Marcus Kazmierczak. “Regardless, it is not our API to decide.”
In response to Facebook’s API change, WordPress has already removed the Facebook and Instagram blocks from Gutenberg 9.0. This change will be included in the upcoming WordPress core 5.6 release.
WordPress also plans to remove Facebook as an oEmbed provider in an upcoming core release. This has the potential to break a significant amount of content (but don’t worry too much, as we’ll be sharing a workaround later in this post.)
For WordPress users, one solution might be to take a screenshot of the Instagram or Facebook content that you want to embed. You can then add this image to your page instead. However, this screenshot will be static, so you’ll miss important context such as the number of likes, shares, and comments the post has received.
Readers may also want to engage with embedded content. For example, they might leave comments on the original Instagram post, or share it via their own Facebook accounts.
By embedding a screenshot, you remove the connection between the original post and the version of it that’s visible on your site. This can have a negative impact on User Experience (UX) and doesn’t help encourage audience participation.
How to Embed Social Media Content in WordPress After the Facebook API Change (In 2 Steps)
No matter what your opinion of social media, it can add some variety to your WordPress content. Fortunately, you don’t have to give up embedding Facebook and Instagram content just yet. Here’s how you can continue to do so, even after the API change.
Step 1: Become a Facebook Developer
In order to authenticate your embeds, you’ll now need to have a Facebook Developer account. You can sign up on the Facebook homepage or via the Facebook Developer page.
Then you’ll need to log into your Facebook for Developers console and use your credentials to generate an App ID. Fortunately, you should only need to complete this process once for all your Facebook and Instagram embeds:
To create your App ID, select Manage Business Integrations. Complete the subsequent form and click on Create App ID:
Next, find the oEmbed card, and click on Set Up. Facebook for Developers will generate your App ID and App Secret. You can find this information by navigating to Settings > Basic:
You can also use your developer credentials for other Facebook-related tasks, such as restoring any broken legacy embeds, which we’ll cover shortly. For now, we’ll continue with the new embed process.
Step 2: Access Facebook or Instagram Embed Code
If you’ve ever embedded social content using an embed code, the rest of this process should come very naturally to you. When you find a piece of Facebook content that you want to embed, click on its three-dot icon and select Embed:
On the subsequent page, click on Get code. In the popup that appears, select the IFrame tab:
Open the Choose your App ID dropdown and select the Facebook application that you created in the previous step.
You can now copy the iframe code and paste it into a Custom HTML block in WordPress. Your chosen Facebook content will then appear embedded in your page:
The steps are much the same for Instagram. Click on the post’s three-dot icon. You can then select Embed:
When Instagram displays the embed code, select Copy Embed Code. Next, switch over to WordPress and use the block editor to insert a Custom HTML block:
You can then paste the embed code into this block and save your changes. Your chosen Instagram post will appear embedded in your WordPress website.
How to Restore Your Previously Embedded Social Media Content After the Facebook API Change
The above technique is useful for embedding new Instagram and Facebook content after the oEmbed API change but won’t repair broken legacy embeds. If you have a long history of incorporating Facebook and Instagram content on your site, then the prospect of having to manually update every post can be daunting.
Thankfully, there’s a WordPress plugin that promises to provide support for Facebook and Instagram embeds. The oEmbed Plus plugin claims to implement the new API and while preserving your legacy embeds.
This plugin requires you to log into your Facebook for Developers console and generate an App ID and App Secret. Then, install and activate oEmbed Plus via your WordPress dashboard.
You can then select Settings > Writing. You should see a section where you can enter your Facebook App ID and App Secret.
Once you’ve entered this information, click on Save Changes. All of your existing Facebook and Instagram embeds should then be protected against the upcoming API change.
Conclusion
The oEmbed API change has the potential to disrupt your embedded Instagram and Facebook content, but it doesn’t have to spell disaster for your website. By using tools such as the oEmbed Plus plugin, you should have no issues preserving your existing embedded content.
If you want to continue enhancing your posts with Facebook and Instagram content, this post showed you how to do so in just two steps. Once you register as a Facebook Developer, you can simply copy the required embed code and paste it into a Custom HTML block in WordPress.
Do you have any questions about the Facebook API change? Ask away in the comments section below!
