How to Fix Facebook and Instagram Embed Links in WordPress
Tags: wordpress
Published: 2020-10-26 02:48:56

Have you heard any news about WordPress yet? From 10/24/2020, WordPress users can't <strong>embed links from Facebook and Instagram</strong> into their websites by <strong>copying and pasting the links as usual</strong>. That's because WordPress decided to remove the link embedding feature from these two social networks.

<!--more-->

This change causes a lot of trouble for WordPress users because the existing content in all the Facebook and Instagram embedded links don't show up anymore. Searching for, deleting, and fixing all these links are extremely time-consuming. But don't worry because there's always a way, and it's right in this article!

First, let's find out the reason for all these troubles!

<h2>Facebook and Instagram Stop Supporting WordPress oEmbed</h2>

Normally, when you paste a Facebook or Instagram link into a post / page, it will be automatically converted to embedded content, also known as <strong>oEmbed</strong> (embedded link).

<img src="https://i.imgur.com/86CNyuE.png" alt="Paste Facebook link into WordPress website" width="1366" height="633" /> 

<img src="https://i.imgur.com/9qzwjDb.png" alt="Content of the embedded link is displayed on the front end" width="1366" height="657" /> 

However, Facebook and Instagram changed their API policy and dropped unauthenticated oEmbed support. From 10/24/2020, to embed links from Facebook and Instagram, users have to <strong>create a developer account</strong>, <strong>sign up for an app</strong>, <strong>and get a client token</strong>.

These changes caused a lot of difficulties for the WordPress team to deploy new projects. Therefore, <strong>WordPress decided to remove the link embedding feature from Facebook and Instagram</strong>. It means that all links embedded into WordPress websites from these two social networks will be turned into normal <strong>URLs</strong> (without displaying the content of the URLs).

<img src="https://i.imgur.com/wwdOhyb.png" alt="Facebook and Instagram Embedded links turn into plain URLs" width="1349" height="657" /> 

This doesn't sound good, especially for webmasters and web-owners. Imagine that on a beautiful day, you wake up, open your website, and then you're immediately stunned with tons of ugly links instead of beautiful images or posts from Facebook and Instagram, it's really a disaster, right? If you want to fix this issue in a blink of an eye, follow the below tutorial.

<h2>How to Fix Facebook and Instagram Embed Links Using Plugin</h2>

To meet the demands of users, some plugins have just been released or updated with new features to fix this oEmbed issue such as Jetpack, Smash Balloon Social Photo Feed (for Instagram), Smash Balloon Social Post Feed (for Facebook), and oEmbed Plus.

Using Jetpack plugin to fix this problem is very easy. Just <a href="https://gretathemes.com/install-wordpress-plugin/">install the plugin</a> and then the shortcode oEmbed module will be automatically activated, and you don't need to do anything else. If this is your first time using Jetpack, refer to <a href="https://gretathemes.com/using-jetpack/">this article</a> on how to set up and use it.

If you don't want to use Jetpack, try other plugins that I mentioned.

Smash Balloon Social Photo Feed, Smash Balloon Social Post Feed, and oEmbed Plus plugins are free and available on wordpress.org, you just need to install and activate them right on the <strong>Admin Dashboard</strong> as usual. After installing and customizing the plugins as below, the Facebook and Instagram oEmbed issue on your WordPress website will be fixed, and you can embed the links by <strong>copying and pasting them as usual</strong>. The following are the specific instructions for each plugin:

<h3>Fix Facebook Embeds Using Smash Balloon Social Post Feed Plugin</h3>

If you use <a href="https://wordpress.org/plugins/custom-facebook-feed/">Smash Balloon Social Post Feed</a> plugin, go to <strong>Facebook Feed</strong> &gt; <strong>oEmbeds</strong> and click <strong>Connect to Facebook and Enable oEmbeds</strong> to connect to your Facebook account and get the access token (client token).

<img class="aligncenter" src="https://i.imgur.com/fKG6HNP.png" alt="Fix oEmbed issue with Smash Balloon Social Post Feed Plugin" width="1037" height="657" />

Note that if you connect to a personal Facebook account, the access token will be valid for 60 days only. After 60 days, go to <strong>Facebook Feed</strong> &gt; <strong>oEmbeds</strong> and click <strong>Connect to Facebook and Recheck Access Token</strong>. However, that procedure is quite complicated. To save your time, you can connect to the Admin account of a group / page to get the access token that never expires.

<img class="aligncenter" src="https://i.imgur.com/0KsL16E.png" alt="Recheck the Facebook client token " width="1202" height="657" />

<h3>Fix Instagram Embeds Using Smash Balloon Social Photo Feed Plugin</h3>

As for <a href="https://wordpress.org/plugins/instagram-feed/">Smash Balloon Social Photo Feed</a> plugin, do the same as above. Go to <strong>Instagram Feed</strong> &gt; <strong>oEmbeds</strong> and click <strong>Enable Instagram oEmbeds</strong> to fix the issue. However, Instagram doesn't require you to recheck the access token.

<img class="aligncenter" src="https://i.imgur.com/Fo6yjdH.png" alt="Fix oEmbed issue with Smash Balloon Social Photo Feed Plugin" width="1041" height="657" />

<h3>Fix Facebook and Instagram Embeds Using oEmbed Plus</h3>

The three plugins above have many other features that aren't related to oEmbed fixing. If you don't need these irrelevant features, try another dedicated plugin - <a href="https://wordpress.org/plugins/oembed-plus/">oEmbed Plus</a>.

To use the oEmbed Plus plugin, you need to register for a Facebook app and activate the oEmbed feature as follows:

<strong>Step 1</strong>: Go to <a href="https://developers.facebook.com/">developer.facebook.com</a>, connect to a Facebook account. After that, go to <strong>My Apps</strong> section and click <strong>Create App</strong>.

<img class="aligncenter" src="https://i.imgur.com/JSvAczf.png" alt="Register a new Facebook app" width="1349" height="657" />

In the <strong>Create an App</strong> dialog, enter the name of the app (whatever name you want) and your email, then click <strong>Create App</strong>.

<img class="aligncenter" src="https://i.imgur.com/a4hqLvo.png" alt="Create a new app to fix oEmbed issue" width="1319" height="657" />

<strong>Step 2</strong>: After creating the app, the oEmbed feature will be activated by default. It's located in the <strong>My Products</strong> section.

<img class="aligncenter" src="https://i.imgur.com/vyZ14i8.png" alt="Turn on the oEmbed feature on the Facebook app" width="1312" height="657" />

Next, go to <strong>Settings</strong> &gt; <strong>Basic</strong> to get the <strong>App ID</strong> and <strong>App Secret</strong>.

<img class="aligncenter" src="https://i.imgur.com/44m70qc.png" alt="Get the App ID and App secret to fix oEmbed issue" width="1315" height="657" />

<strong>Step 3</strong>: Turn back your WordPress website, on the <strong>Admin Dashboard</strong>, go to <strong>Settings</strong> &gt; <strong>Writing</strong> &gt; <strong>Facebook and Instagram Embed Settings</strong>. Then, copy and paste the <strong>App ID</strong> and <strong>App Secret</strong> into this section, and click <strong>Save Changes</strong>.

<img class="aligncenter" src="https://i.imgur.com/znEyaWu.png" alt="Enter the App ID and App secret in the oEmbed Plus plugin" width="1350" height="657" />

After following all the above steps, the oEmbed feature on your WordPress site will be restored. Now you can embed Facebook and Instagram links as usual.

For example, here are Facebook and Instagram links embedded into my WordPress website before I use plugins to fix the issue:

<img class="aligncenter" src="https://i.imgur.com/wwdOhyb.png" alt="The Facebook and Instagram embedded links are broken" width="1349" height="657" />

And here is the result after fixing the issue:

<img class="aligncenter" src="https://i.imgur.com/lKACLh4.png" alt="The embedded links are fixed using plugins" width="704" height="657" />

As you can see, the links are fixed and the content is displayed.

<h2>Last Words</h2>

In conclusion, Jetpack is the easiest way to fix the oEmbed issue, but it's a multipurpose plugin that comes with many other features and you may not want to use them. Smash Balloon Social Photo Feed and Smash Balloon Social Post Feed plugins are quite easy to set up and use, but they're two separate plugins. Meanwhile, oEmbed Plus plugin takes a bit of time to set up, but it can fix both Facebook and Instagram embedded links. Just choose a plugin that is suitable for your website and your needs.

As you can see, fixing the oEmbed issue is not difficult at all. However, not every website owner knows about this issue to act promptly, especially for those who don't regularly update news. So, don't forget to share this information with other website owners!

In addition, you may like our article on <a href="https://gretathemes.com/fix-post-display-on-facebook/">how to fix post display on Facebook using Facebook Debugger</a>.