See an example of the jQuery plugin working on my (old) homepage.

I’ve tried to keep a daily photo blog in the past but have given up after a week or so because of the workflow involved. Shooting on my DSLR, post processing on a computer, resizing for web and uploading via my cms became way too time consuming considering it was a ‘nice to have’, non-essential addition to my website. Instagram has totally changed all of that. Not only has it simplified the whole process to a few clicks but it’s opened up my work to a hugely generous community that give near instantaneous feedback on the pictures I post. I love the fact I can shoot, edit and upload a portfolio of work (a diary of my daily life) via my phone!

However, what about friends that visit my website or those that don’t know my username (@finn) or the app itself? 

Methods of achieving this

There are a few ways of pulling an Instagram feed into your homepage but the majority require a third party site. A quick google search along the lines of “adding instagram to a website” will throw up a list of methods: Webstagram, Statigram, Followgram, instagrid.me All allow you to display your feed via a web browser. However, I wanted to integrate an edited version of my feed directly into madebyfinn.com without any third party branding and using a simple stripped back form of navigation that allows the pictures to take centre stage.

image

Step up jQuery

I love jQuery. I’m no expert when it comes to writing javascript from scratch but I can work with an existing framework like jQuery to bend the will of my markup. Like Instagram, jQuery has a great community of developers that work to further the functionality of the standard framework and sure enough Googling “jquery instagram” turned up a simple plugin (by Giovanni Cappellotto) that taps into the instagram api. The out of the box plugin pulls in your feed and renders them as an unordered list of thumbnails based on a tag used within IG. Each thumbnail is linked to the larger version on the official Instagram site.

All well and good, but I wanted to keep my viewers on my site so they could flick through the pictures without jumping through to another site altogether.

Step up Slimbox2

Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library and allows a user to navigate between sets of images very quickly.

Modifying the jQuery plugin to use Slimbox as the display method

I changed a few lines in the original instagram plugin so the grid of images on my web page uses the low resolution file as opposed to the thumbnail and the link opens the standard resolution image using slimbox.

The following function in jquery.instagram.js is where it all happens:

function createPhotoElement(photo) { .attr('href', photo.images.standard_resolution.url) .attr('rel', 'lightbox-instagram') .attr('title', photo.caption.text + "&nbsp;&nbsp;/&nbsp;&nbsp;" + "<span>&hearts;</span>&nbsp;" + photo.likes.count + "&nbsp;likes") .append( $('<img>') .addClass('instagram-image') .attr('src', photo.images.low_resolution.url) )

As you can see I also added in the like counter for each image. You can compare the original file at Giovanni’s site to my files to see what I changed.

Tagging the pics in IG

The plugin allows you to pull in pictures based on a tag set within IG, this adds a useful level of control over what gets displayed online. All the pics I want to display on my website are tagged in instagram with the hashtag 47883_44hhd and in the jQuery script we set that in the following function along with the clientId associated with my account:

$(".instagram").instagram( { hash: '47883_44hhd', clientId: '*****************' });

Obtaining your Instagram client ID is documented on the IG website.

Download the files

Assuming you have a good understanding of HTML/CSS integrating these files into your website is pretty straightforward. I wanted to keep things simple and let the pics themselves do the talking but you could do loads more with the IG api like include comments, geographic info, profile picstures etc.

Download a zip file containing the js files associated with this project and view a working version on my old homepage.

I hope this is of use to anyone wanting to do something similar. Do let me know… likewise if you have any questions about the setup.