Instagram to NFT service with Rarible Protocol. Part 1¶
In this tutorial, you're going to learn how you can build a CocoNFT clone. What is CocoNFT, you’d probably ask? It’s a service that allows you to mint your Instagram posts as NFTs.
Project is splitted into a 2 part series. Including everything into one article would feel overwhelming.
In the first part (the one you’re currently reading), we're going to explain how to let users Authorize their Instagram accounts on the app, so they can fetch their photos.
In the second part, we’re going to dive deeper into integrating the application with Metamask and many different wallets. This will allow users to interact with a bunch of different blockchains, such as Polygon, Ethereum, Flow, Tezos, to name a few. All of this will be done using Rarible Protocol APIs/SDK.
If you want to follow along with the finished code, here is the GitHub repo.
Create an Instagram App that can authorize a user¶
Since scraping websites like Facebook or Instagram is a daunting task, it’s much easier to just use their API, because, well… they provide it. First, you have to go to the Facebook for Developers website. There, you have to go to “My Apps”.
Click the big green button “Create an app” (no screenshot included here, because you won’t miss it for sure).
After that, you can choose an app type. There are quite a few different types here, but let’s select “Consumer”.
From here, we can set up more products. Since we’re focused on Instagram, click the “Set Up” button under the “Instagram Basic Display” option.
From now on, you should see Instagram’s Basic Display on the left sidebar. If you’re following this tutorial, you should also see a big red error. Don’t worry, we’re going to solve it now.
There is one more thing that we have to do while we are still on the Settings / Basic page: adding a platform. Localize a big “ Add Platform” button on the bottom, click on it, and you should see the following popup. Select the website option.
Add a website URL.
After we filled in all required URLs and added a platform, we are able to create a New App on Instagram Basic Display.
You’ll need to provide the correct URLs. This step is very important, because the Valid OAuth Redirect URI is an address where the Instagram Authorize window will redirect you with the Authorization Token as a query parameter. So in an ideal scenario, you would pass your backend API address here, save the token in the database, and then redirect the user to the proper page.
The next step is to add the following options to submission. They are required to allow us to fetch user data.
Okay, the setup step is already done… almost 🥰.
You also have to add an Instagram test user to be able to use the Instagram API in development mode. You can do it by going to Roles / Roles on the sidebar, and adding Instagram testers.
Finally… the last step. You have to agree on becoming a test user. You can do it by going to Instagram > Settings > Apps and Websites.
That’s the end of the 1st section. You’ve learned:
- How to create a Facebook App
- How to create an Instagram App
- How to invite a Test User
Get all necessary tokens needed to get user medias¶
When it comes to the tokens, we’ll need:
1. Authorization Token — The one we receive after informing we want to authorize our app. The Authorization Token is one-time usage only, but if you mess this step up don’t worry, you can always show it again.
2. Short-Lived Token — At this stage, we have an Authorization Token, which we can trade for the Short-Lived Token. It allows us to query the Instagram API for 60 minutes! That’s where its name came from. But we can also go one step further, and trade it for…
3. Long-Lived Token — After obtaining it, you’re able to use it for up to 60 days. You’re also able to extend it after 24 hours from creating it. What it means in practice, is that you will not have to ask a user for an Authorization again. Big UX win! 👊
Before we learn how we can obtain it, you should prepare the two values below. They will interchange in a lot of requests.
We can get both of them on the FB For Developers Instagram Panel.
In order to retrieve the Authorization Token, first, we have to prepare the following URL:
You’ll need a few parameters here.
redirect_uri, the scope of granted access. We talked about all of them earlier. After the URL creation, simply paste it to the browser. Then, the authorize page will pop up like it was shown earlier. Click on Authorization, and it will take you to the Redirect URI, which you’ve provided, but (and that’s the fun part) with an added code parameter. An example of a URL looks like this:
This is the code we require, so copy it and delete the last two characters, “#_” to be precise. They are always added, and you have to delete them.
In order to obtain this one, we’ll need to do a POST request with form data added. We’ll need:
CLIENT_ID— which you can grab on FB For Developers / Instagram Display Page, it’s called App ID on the page
CLIENT_SECRET— same as above, only it’s located to the right
REDIRECT_URI— redirection URI which you’ve provided
CODE— authorization token which we obtained in the previous step
If you’re using Postman, which I highly recommend for doing HTTP requests, your page should look similar to mine. Names in between curly braces are called Environment Variables. You can set them in global, and reuse them throughout the app.
After sending a successful request, you should see the following answer.
If you mess something up, just read the error description and repeat the step to obtain the Authorization Token. Remember that it can only be used once. Going back to response values,
access_token is our short-lived token, and
user_id is, well, our user ID. It doesn’t change at all, so you can also store it in the Global Vars on Postman.
Congratulations! You’re now able to fetch user data! For now, it’s valid only for 60 minutes, so let’s work on that right now.
In order to change the Short-Lived Token into the Long-Lived one, you’re going to have to do a GET request to this address:
In exchange, you’ll get a self-explanatory response. Grab an access_token value, and you’re good to go. You have a Long-Lived Token, now!
Fetch media details¶
We’ve come a long way, but we’re finally here! After creating an Instagram App and getting a Long-Lived Token, we’re now ready to do some coding.
Since we don’t really have an HTTPS on localhost, we’ll just use an
access_token straight from the code. If you’d like to go live with that, you just need to change a few things. Maybe create some sort of backend API, replace the Instagram Redirect URI to your website’s one, and take it from there. This is just for tutorial purposes, so I won’t do that here. Of course, there are a lot of different ways to achieve the same goal, so it’s better to focus on concepts here.
The URLs which you’ll need in order to get those data are:
1. Fetch IDs of user media
Ids are the
2. Fetch media URL, using previously obtained IDs
MEDIA_ID are the IDs fetched earlier.
Finally, — here comes my favourite part:
To the code soldiers! 🥳
Compared to the work that we’ve already done, it will be pretty quick.
1. Fetch IDs of users’ media
2. Fetch portion of retrieved posts
Since there is an API requests rate limit, which equals 200 requests per hour per token, I prefer to fetch posts in portions when a user actually wants to fetch more than X. Thanks to that, we’re saving our requests rate, as well as internet throughput.
3. Display fetched media
In the final step, you just have to map the media details array and use
media_url as an image source.
Summing it up¶
We know that the article was quite big, but look how much you've done. You’ve created an Instagram App, set it up, authorized a user, created a long-lived token, fetched IDs of users’ media, got media URLs, and in the final step, displayed it.
Feel free to read it again, especially the token creation part, just to understand better how the flow works.
In the second part, you'll implement the NFT creation out of Instagram posts.