Let's Build: A Consultancy Website - Part 26

Coding an Instagram Photo Feed

Part 26 of my Let's Build: A Consultancy Website series continues on the About page.

The existing design utilizes placeholder imagery for what will become photos from Alyssa's Instagram feed. We wanted a quick way to manage photos for the site as well as one that gets updated often. Instagram seemed like the most viable option since Alyssa was already on top of posting there.

To pull the Instagram images to her site there are a few steps to take. In this video, I walk you through the configuration and setup of a JavaScript library called Instafeed.js. Through this library, you can pull Instagram data of multiple types and render an Instagram photo feed on your own website. On top of getting the data from Instagram, you can use some predefined options that come along with Instafeed.js to help render your photos the way you prefer.

There are a few quirks when getting data for a specific user profile of which you will need to do some googling. You'll need your Instagram ID for starters as well as an access token.

• Generate your own access token
• Find out your Instagram id

After obtaining this information you can plug and play just like I have in the video. To utilize the instafeed.js library you'll need to include in on the page you want the photos to display as well as supply an empty div like the follow so the library knows where to append the photos.

To get things rolling you'll need to include this script or something similar. Check out all the available options on the GitHub repo.

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22
• Part 23
• Part 24
• Part 25