Instafeed, an easy to use framework for displaying Instagram photos

07.10.2015
Mobile app development - Dev with David

What We Need

In order to get started with Instafeed.js we need the following:

  • To include the Instafeed.js library, located here.

    <script> type="text/javascript" src="/path/to/instafeed.min.js"></script>
  • A Client key from Instagram. We can get that by signing into the Instagram Developer Site, and creating a client under "Manage Client" on our top bar example

Getting Started

Displaying images from a "tagged" item is very simple using Instafeed. We can easily display items with the tage "zunostudios" by adding the following bit of javascript:


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

While this is this all the javascript needed to fire off our library, we still need a specified div in our source in order to generate the image thumbnails. Instafeed will look for:

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

And fill the div with the images.

Working with templating

If you're like me, and want to be able to control your images to work with a grid system, such as the one provided by Bootstrap, then we need to add a template option to be able to affect each image. The template key word is particularly useful for syling images and displaying them in an orderly fashion. The following bit of code, is what we want to add to make four images per row at a time, assuming we're using a medium sized screen, or larger.


	template: '<div class="col-md-4"><a href={{link}} target="_blank"><img style="width:100%" 			src={{image}} /></a></div>'

Let's take a look at what is going on here.

By adding <div class="col-md-4">, we are telling Instafeed that we want to add the bootstrap class col-md-4 to each of our thumbnails.

Keep in mind that by adding the template option, we are essentially rewriting the structure of our Instafeed output. Meaning, we must be sure to include the {{image}} tag in order to display our images. Following that logic, we also need to include the {{link}} as our href value in order to have our thumbnails also be links to the instagram website. Instagram provides several useful tags which can be used as variables for our markup.

Results

Now if we we put it all together, and add a bit more styling for asthetics sakes, our code looks like:


	<script type="text/javascript">
		var feed = new Instafeed({
		get: 'tagged',
		limit: '3',
		tagName: 'zunostudios',
		clientId: 'ddabeb6ec0924f0faf5c5b2bc6d6a102',
		template: '<div class="col-sm-4" style="margin-bottom:30px;"><a href={{link}} target="_blank"><img style="width:100%" src={{image}} class="img-responsive"/></a></div>'
		});
		feed.run();
	</script>

Note: limit: '3' was added to control the amount of images added. Without a limit, there will be a default of 20 images that will display. Find more options to include in your Instafeed here.

Here are the latest pictures taken and tagged with "zunostudios"!