Let's Build: A Consultancy Website - Part 26 - Coding an Instagram Photo Feed

Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻

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 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 (http://instafeedjs.com/). 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 - http://instagram.pixelunion.net/ Find out your Instagram id - http://instagram-id.com/

After obtaining this information you can plug and play just like I have in the video.

⚙ Download the Source Code for this Project https://github.com/justalever/endlyssdesigns

💻 Previously published at: https://web-crunch.com/lets-build-consultancy-website-part-26/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

📌Recommended Stuff I Use to Shoot Video: Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH Linco Lighting Set - http://amzn.to/2mF8Shs Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=LuET09SFg38