Day 3: JQuery-JSON Instagram Photo Feed App: Caption Added

Decided to spend a little time today taking the Instagram Photo Feed App on my site a little further by displaying Photo Captions.  First let me step back just a bit to share the source code; which as mentioned in yesterday’s entry originates from and is available at

Now let’s get down to business.  Instagram allows a user some options in the way of classifying the images they would like to display: you can display your own photos, images from people you follow if desired, by tags, by location, etc. - you can find out more on the developer pages.

For my project I chose to simply display a few of my own photos and additionally display the captions if they exist.

source for creating the photo feed:

    type: “GET”,
    dataType: “jsonp”,
    cache: false,
    url: “[actionToken]&count=10”,
    timeout: 10000,
    success: function(data) {

    for (var i = 0; i < 10; i++) {

            $(“.instagram-photos”).append(“<div><a target=’_blank’ href=’” +[i].link +”’><img class=’instagram-image’ src=’” +[i].images.thumbnail.url +”’ /></a></div>”);



Note that I’ve bolded [actionToken] in the source above; you’ll need to retrieve this value from the Instagram API.  If you look at the code on forrst you will notice there is a slight difference in the url there and the one above; in my example I’ve opted to use {self}, while Dan used {userid}.  Using {self} eliminates the need to specify {userid} if you are displaying your own images.

Next, to display the photo caption you will need to include the following code somewhere inside your for loop:

// if photo caption is not null display it

if ([j].caption.text !== “null”) {

  $(“.instaphotos”).append(“<div class=’instagram-caption’>” +[j].caption.text + “</div>”);


And there you have it.  View the example on my site

If you have any questions about the material presented above or need some help please feel free to send me an <a href=””>email</a>.

Happy Coding!