Want your Instagram feed on your project? 
Tags: react, codenewbie, instafeed
Published: 2021-04-16 05:46:24

This blog will be a step-by-step process on getting the access token needed in utilizing [Instafeed.js](https://instafeedjs.com/#/?id=instafeedjs).

First, I'm not going to take credit for all of this Instagram API workaround. Thank you to [ishithemes](https://www.youtube.com/channel/UCP5LqUylO8P4z48Sn-4ElTg) on Youtube who showed me the way how to make this happen!

Since I am currently building a project, I thought to try & apply this method. There are other ways like installing an npm package or embedding an Instagram photo, but I wanted to learn how to generate that access token for a script like Ishitheme's. The script I used is provided on Ishitheme's [Github repo](https://github.com/ishithemes/instafeed_website/blob/master/index.html). There is also a link on his Youtube video's info if you need to refer to it.

###I must say before you begin, I think the hardest part of this method is the tedious way to get the access token.###


And here's how I got that token.

-> I first made a [**Facebook for Developers**](https://developers.facebook.com/?no_redirect=1) account.
![Facebook for developers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcijqvk0v9npezei4kko.png) 
If you're logged in to your FB account, it usually recognizes and uses that information to give you access to this platform. This will be the way to create the access token needed in the script.
Once you're on the landing page,
-> Click [My Apps](https://developers.facebook.com/apps/?show_reminder=true)
-> Then click **Create App**. A window will pop up and will ask you to choose.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqdrfvilvlry2iqilq0h.png) I chose the last one since it's only a test and nothing else.
-> Next window up is what type of app. Since this is just a mini project like I mentioned, I chose the 'Something else' option.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npis2uf3f6iptnknzk4b.png)

-> Once you click continue it will ask you to fill out the information about your app/project. This is your chance to change the App contact email if you wanted to use a different one to be linked on the request.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4oz9448xfgu92fbjhev.png)

-> Once you submit, it will lead you to the products you can incorporate into your project. Since we're here for Instagram, let's click **Set Up** on the 'Instagram Basic Display'.
![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3i0mi6f08mfk4ikarf2k.png)

-> On the next page, scroll at the bottom and you'll see a notification like this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwpzcwpg7v4a6t5kgv54.png)
Click the link to **'Settings'** and from that page click 'Add a Platform'. I chose 'Web' and added my website's URL. You can try putting your Heroku app URL as well for this. 

-> After saving the changes, click **Instagram Basic Display** on the side navigator and go to **Basic Display**. Here, we will be asked to name the app, we can keep it the same name as the project name.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwq5radk6fygj3ss1997.png)

-> Scroll down at the page and fill out the form. I used my website into filling these 3 out. It has to be a secure site and should start with **HTTPS**.
-> Add an Instagram Tester using the user's Instagram username.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1axb9cbp993i5bs9p71.png)

-> You will need to verify the request on your Instagram account on a desktop through the ['App and Websites'](https://www.instagram.com/accounts/manage_access/) settings. It should look something like this;

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt2gswbr0oaga2oxykld.png)

Yes, [SmashBallon](https://smashballoon.com/instagram-feed/demo/) also offers Instagram embedding with a price tag if you need something more for business. I tried their demo and it also looks so cool! 

-> Once you verified the request, go back to the site(Basic Display section) and VIOLA! You can generate your token!

Your code should be something like this:
![script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxxmqia0aq2k45aqqhmg.png)
  *target - id of the div or span where the feed will be.
  *limit - number of how many photos to fetch
  *resolution - the quality of the photo to display.

Here's a [reference](https://instafeedjs.com/#/?id=options) for more options you can use. 

##MY SOMEWHAT OF A FINISH PRODUCT!##
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h8zjnbotwadh9sphxsj.png)

###And my CSS for it if you're interested.###
```
#instafeed-container img{
  width: 18em;
  border-style: solid;
  border-color: white;
  border-bottom: 10px;
}
```

And that is it! If you get up to this part, Thank you for taking the time. Until the next one!