After finishing the post system on this blog, I stumbled on a project idea in a conversation with my girlfriend. She mentioned that her hair stylist was looking for someone to build her a website and I got inspired to make a demo for her. Quickly this design idea included images of the stylist’s work. The simplest thought was to import her Instagram feed directly into the website through an API call.

I soon discovered that using the Instagram API is not as easy as calling and using data like you would via github's API, for example. Luckily, I found out about a library called Instafeedjs, which is described on their website as follows:

As much as this is true, there are still a few steps to take in order for anything to be called from Instagram to your website.

1. Installation

First of all, the library needs to be installed! If you aren’t using a package manager, simply clicking download on their website and including the file in your project will allow you access to the Instafeedjs library. Now, this isn’t a tutorial on NPM, package managers or using the terminal/command line, but I would highly recommend it because they allow you to install many things into your projects quickly and easily. If you’re interested, here’s a quick tutorial on Node’s NPM by learncode.academy.

2. Instagram

After installation, head on over to Instagram/developer and log in. After logging in, you’ll see the “Register Your Application” button. Click that, continue filling out the required information, and then register your application.

3. Client ID

If you follow along on Instafeedjs.com, you’ll notice a few examples of code that are a great help in getting started. You’ll also notice a Requirements section. One of the first things noted is your Client ID.

The first place I found on Google search to find my Instagram client ID (not username) is a website called Smash Balloon. Here you can go to “Try the Demo” and simply type your username in and it returns a series of numbers, which is your Instagram client ID.

The first place I found on Google search to find my Instagram client ID (not username) is a website called Smash Balloon. Here you can go to “Try the Demo” and simply type your username in and it returns a series of numbers, which is your Instagram client ID.

4. Authentication

Like I mentioned, the last bit of info you need to get your feed running on your website is to authenticate your request. The website I found most useful for this is Pixel Union. Simply click the “Generate Access Token” button and you will be prompted with entering your username and password. (Check out the FAQs at the bottom of their website for more info about security and what Pixel Union has access to when they generate your access token.) After this, you will receive the access token and can use it in your website’s JavaScript code.

5. Write the code

You may have already written out your JavaScript code (at least I had in trouble shooting). If you haven’t, here is an example of the code that is found on Instafeed’s documentation concerning showing your last 20 pictures:

6. Create the output div

By default, and if everything is set up correctly at this point, Instafeedjs will populate a div you create with the ID of Instafeed in your code with the last 20 posts that are associated with your account. Like I mentioned before, If you want to change anything, check out the documentation. I’ve found it to be very helpful. For me, this default action works for what I am trying to do.

That’s it! By now you should have your last 20 pictures populating your website!! I hope this tutorial was informative and helpful. If you have any questions, please let me know.

If you're curious about the demo website I created, you can find my Instagram feed on the Gallery tab here: jaime-quach.surge.sh.