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 updates 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.

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.

<div id="instafeed"></div>

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


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID'
    });
    feed.run();
</script>

Download the Source Code for this Project

Source Code

The Series So Far