A recent API change has broken Instagram feed on Websites all over the internet. We experienced it first hand on our own website, and observed the issue on a good chunk of client websites as well. A broken Instagram feed can turn into a larger problem quickly when your website depends on the feed loading to continue loading other assets to your site. Dependent on how your website is coded, it could easily stop the whole site from loading.
No worries, though. Once we saw the issue, we found the root of the problem and put a solution in place, outlined below. You're free to use our solution to fix your broken Instagram feed as well.
Why Your Website Instagram Feed is Broken
As Instagram has grown, like most social media providers their API's have changed along the way. A few years ago, you may have grabbed some open-source code (like instafeed.js, insta-stream, or any one of the loads of others out there) and got it working no problem.
More recently, Instagram API changes have taken effect - and your widgets may be broken or a plugin may be bugging out. Specifically, if you created an API client to use with your plugin before November 17, 2015 - new API behavior kicked in on June 1st, and brings with it some major changes.
Here's how to fix your broken Instagram Feed
Here's what the interface where you manage your API clients now looks like:
So, here are a few common issues, gotchas, and things you may need to look out for when troubleshooting an Instagram API plugin/library...
Sandbox Mode
If you log in to the Instagram developer portal, you may notice that the API clients you have created are in "Sandbox Mode". This imposes lower rate limits (500 requests/hr rather than 5000), and only allows access to the 20 most recent media items for any user. This will work just fine for most website feeds, but if your use case is different - this mode may be the reason your feed is not working.
Instagram now requires that your "app" be approved to use the API outside of sandbox mode.
Related Reading:
How to Add and Manage Multiple Instagram Accounts
Stricter Permissions
For a variety of reasons, the access token that you generated when you set up your Instagram feed may no longer have API access. There are a few things you can try here:
- If you are getting a user's feed, then you will need to either generate the access token using their client id, or they must invite you to be a "sandbox user" for that API client.
- Your access token may need to be generated with a specified "scope" - more here: https://www.instagram.com/developer/authorization/
Either way, you will want to regenerate an access token, making sure that the client id and the scope parameters are set correctly for the access that you need.
Implicit OAuth Flow is Disabled
Under the "security" tab when you are editing an API client, you'll see a checkbox for "Disable Implicit OAuth". If this option is checked, then certain methods of generating your access token (like this step-by-step tutorial) will not work.
The simplest fix is to uncheck that option so that implicit OAuth is allowed. Otherwise, you will want your access token to be generated through the server side (explicit) flow.
More About the Instagram Update
For a full explanation of API changes, and a list of the newer documentation regarding some of the changes, be sure to check out Instragram's "Preparing for the Platform Update" page.
Join the Discussion