I was considering enhancing the liveliness of my ecommerce page with an Instagram Feed. Given that the posts on Instagram are my own, to be hosted on my own website, this sounds like a straightforward case. Unfortunately there are mostly paid options (shopify), and even for the developer, there are numerous steps to jumps through.
Use case: To display one’s own Instagram feed on their personal website.
Visit Instagram’s website and they allow you to embed a single post (from anyone) but not the feed. Google for Instagram Feed and it comes up with a bunch of third party websites which you need to log in to and a wordpress plugin. Stackoverflow also comes up short. So what gives?
Imagine an industry of content copying websites stuffed with ads whenever you search for a celebrity. We get a mirrored hall of social media posts.
The root of the problem is authorisation. All social media companies don’t know who you are when you are requesting for your data unless you explicitly authorise it. Let’s explore the options for doing so: They could allow you to log in and generate the widget aka configuration code for a feed, to be placed on your personal website. That custom code could be easily copied by someone else, and placed on another website. So that front-end code definitely wouldn’t have the authorisation token inside it.
Another option would be a whitelist, the logged-in user would be able to submit a list of personal websites that they wanted to post the feed on. The social media source could then manage the origin access of the feeds via a mapping to the whitelist. This could be quite feasible if not for the host having to build the whitelisting feature on their platform.
In our case, Instagram takes a more developer centric approach, if you want to do it yourself (and not pay). In the form of the basic display api which is … kind of alright if you are a developer. You have to setup:
- A Facebook developer account, create a project, add an Instagram app.
Then build the endpoints for OAuth authentication flows:
2. Retrieve a short-lived token,
3. Exchange the short-lived token for a long-lived one.
Finally build the actual api calls:
4. Query the api for Feed, to get list of images.
As this is just a spike for feasibility I won’t be building the actual endpoints but just authenticating and testing the APIs. So let’s get started.
1. Setting up the Account
I had to log in to my facebook developer account. Enter the Facebook app, create an Instagram app, and set some redirect URIs.
Added a instagram test user.
2. Retrieving a Short-Lived Token
I gathered the instagram app id (not facebook app id), redirect uri and attempted the login…
It redirects to our own website
3. Query API for Feed and Images
With the request token, it’s time to switch over to postman
The access token has an expiry of 1 hour, and that’s enough for testing. Time to get the lists of posts on ig
The media endpoint lists the top 25 posts, and that’ll be more than enough. However, there’s no info on the image of each 😫.
The media detail endpoint retrieves the type IMAGE, and url. Look’s like we’ll have to loop over each of the entries 😴. Also what does the VIDEO look like?
Turns out the VIDEO does have an image, in the form of a thumbnail 🙂.
4. Exchange the short-lived token for a long-lived one.
Exchanging the access token was fine.
Expires in 5184000 / 60 / 60 / 24 = 60 days. Not too bad, and it can be refreshed.
5. Test the api again
This went along fine 👍
To recap, this spike was to find the feasibility of putting the ig feed on our own website. The api looks doable — our backend could proxy the calls to retrieve the feed into a list of images and links.
Edit:
I’ve added a log of how I reduced the speed of loading my Instagram feed by 3x using caching. Node.js: Instagram feed (B2C) on website (Part Two)