Instagram For MooTools

By on  

Instagram MooTools

If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram provides a number of image filters to enhance the appearance of the image you've taken.  You can make your photo look brighter, darker, "older", and much more.  The photo is saved both on Instagram's service and your local phone.

Like any other service, Instagram also provides an API which allows you to get image, user, tag, and other account information. Christopher Beloch has taken the time to provide a simple set of MooTools classes which act as a wrapper for Instagram's web API.  This post will show you how to use Instagram's API, Instagram for MooTools, and some simple CSS and JavaScript to create a very simple photo gallery with which you can view all of your photos at once.

You must have an Instagram account to view the demo;  there's currently no way for me to open my account for viewing only.  Also note that Instagram provides a server-side implementation for OpenAuth;  this post will focus on client side only.  Lastly, this post's focus is using Instagram for MooTools (authentication, pulling photos, etc.); not creating the most shocking photo gallery ever.

OpenAuth and Creating "Apps"

Instagram subscribes to the OpenAuth method of verification that applications like Facebook and Twitter use.  To create an Instagram usage client, click here.  There are two important piece of information which you'll need to remember from this page:  a ClientID which will be used to log into your OpenAuth account, and a RedirectURI which the user will be redirected to once they log in.  Creating the app is very simple and you should be through it in a minute -- just remember to save the generated ClientID and RedirectURI you chose.

Including Instagram for MooTools and Dependencies

MooTools for Instagram

Instagram for MooTools is available on the JavaScript treasure chest MooTools Forge.  This set of classes requires MooTools Core and More's Request.JSONP.  The basic photo gallery I create will use More's Element.Delegation, but this class isn't required to use Instagram for MooTools.  There are multiple classes available with Instagram For MooTools, but the quick photo gallery will only use Base (required for all subclasses) and User (which allows for retrieval of user media).

Logging In

My page which will host the photo gallery will require authentication to request images.  To make sure the user has proper authorization, we'll use this snippet of JavaScript:

// Basic settings
var clientId = "YOUR_CLIENT_ID";
var redirectUrl = "http://test.local/instagram.html";

// Create an instance of Instagram with user capabilities
var user = new Instagram({
	client_id: clientId,
	redirect_uri: redirectUrl

// If there's no hash, they aren't logged in
if(!window.location.hash) {
	window.location = user.getAuthURL();

The code above defines the ClientID and RedirectURI which were provided by Instagram, creates and instance of Instagram, and checks the window.location.hash to make sure an access token is present.  If not, the user is sent to Instagram's sign-in page for this app.  When the user signs in, they will be redirected to your RedirectURI with an access_token properties in the hash.

Simple Photo Gallery Layout

The photo gallery layout will be two columns:  the first column containing the caption and large version of the image retrieved from the service, the second containing clickable thumbnails.  The large image will be fixed to the top left, the thumbnails will scroll during page scroll.  Here's our basic CSS:

#mediaHolderLoading {
	border-radius: 8px;
	background: #222;
	color: #fff;
	padding: 5px 10px;
	font-family: Monaco, Courier, Monospace;
	font-size: 12px;
#mediaHolder.noPhotos #mediaHolderLoading {
	background: inherit;
	color: #f00;

#mediaHolder.noPhotos #largeImageHolder {

#largeImageHolder {
	width: 612px;
	height: 612px;
	position: fixed;
	top: 24px;
	left: 27px;
	background: #eee;

#caption {

#thumbHolder {
	margin-left: 650px;
	margin-top: -5px;
	opacity: 0;
	background: #eee;

#thumbHolder a {
	width: 150px;
	height: 150px;
	padding: 0 20px 20px 0;
	display: inline-block;

#thumbHolder img {

#thumbHolder img:hover {
	-webkit-transform: rotate(-3deg) scale(1.1);
	-moz-transform: rotate(-3deg) scale(1.1);
	-o-transform: rotate(-3deg) scale(1.1);
	-ms-transform: rotate(-3deg) scale(1.1);
	transform: rotate(-3deg) scale(1.1);

And the HTML it will style:

<div id="mediaHolder">
	<span id="mediaHolderLoading">Loading your photos...</span>
	<div id="largeImageHolder">
		<img src="" id="largeImage" />
		<span id="caption"></span>
	<div id="thumbHolder"></div>

Nothing groundbreaking or overly complex.  Again, this is going to be  a very simple gallery.

Using Instagram For MooTools to Retrieve Images

Assuming we're now logged in and authenticated, we can make our move to retrieve images.  The getMedia method of our Instagram instance will send a JSONP request to Instagram to retrieve all of the authenticated user's photos:

// Makes a JSONP request to go get media

Before we send that request for images, however, we need to set up a listener for when those images are returned.  After the browsing the Instagram.User and Instagram.Base source, I discovered the event to listen for is the mediaData event.

// Add listener for instagram data reception
user.addEvent("mediaData", function(userPhotos) {
	// If there are items received
	if(userPhotos.data.length) {
		 // Do something
	else {
		// Show "no images" message

The userPhotos var will provide an array with or without images based on the contents of your account.  Iterate through the array to work with the result.  The addEvent pattern is used throughout the Instagram classes;  be sure to look around to find the proper event to listen to though, as it's not always apparent.

Gallery Creation

Now that we can receive and managed the result, it's time to use basic MooTools JavaScript code to build the thumbnails and delegate clicks to show the larger image:

// Add listener for instagram data reception
user.addEvent("mediaData", function(userPhotos) {
	// Get the media holder text
	var mediaHolderLoading = document.id("mediaHolderLoading"),
		mediaHolder = document.id("mediaHolder");
	// If there are items received
	if(userPhotos.data.length) {
		// Axe the message
		// Get a few elements
		var thumbHolder = document.id("thumbHolder"),
			largeImage = document.id("largeImage"),
			caption = document.id("caption");
		// Create the HTML string
		var html = "",
			template = '<a href="{largeImage}" target="_blank" data-index={index}><img src="{thumbnailImage}" alt="{caption}" /></a>';
		// For every photo received
		userPhotos.data.each(function(photo, index) {
			// Place caption text right on obj for easier access
			photo.captionText = (photo.caption ? photo.caption.text : "");
			// Append to html
			html += template.substitute({
				largeImage: photo.images.standard_resolution.url,
				thumbnailImage: photo.images.thumbnail.url,
				caption: photo.captionText,
				index: index
		// Set the large image and caption
		largeImage.set("src", userPhotos.data[0].images.standard_resolution.url);
		caption.set("html", userPhotos.data[0].captionText);
		// Get the thumb holder
		thumbHolder.set("html", html).fade(1);
		// Add event delgation to listen for clicks
		thumbHolder.addEvent("click:relay(a)", function(e, a) {
			// Set the image
			// Get the caption
			caption.set("html", userPhotos.data[a.get("data-index")].captionText);
	else {
		mediaHolderLoading.set("html", "No photos were found.");

You'll note that instead of programmatically create and inject nodes into the thumbnail holder, I use string concatenation to generate the HTML.  Doing so is faster than node injection.  I've also used event delegation to avoid numerous event connections.

And there you have it:  a quick overview of Instagram for  MooTools.  Christopher Beloch's work provides a great interface to Instagram's API.  I look forward to seeing what you create with it!

Track.js Error Reporting

Recent Features

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • dwClickable:  Entire Block Clickable Using MooTools 1.2

    I recently received an email from a reader who was really impressed with Block Clickable, a jQuery script that took the link within a list item and made the entire list item clickable. I thought it was a neat script so I...

  • Animated Progress Bars Using MooTools: dwProgressBar

    I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage. The Moo-Generated XHTML This DIV structure is extremely simple and can be controlled...


  1. Alpha Chung

    Well, I followed you on Instagram. :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...

  • Hotjar &#8211; All-in-one Analytics and Feedback

    Website analytics are a massive business -- the more data you can collect with regard to your users' behaviors on your site, the more you can increase and maximise conversion...and increased conversion is always good.  Sometimes increase conversion means more money, improved user experience, viewer retention,...