#khreative

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 https://forrst.com/posts/Using_the_Instagram_API-ti5.

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:

$(function({   $ajax.({     type: "GET",     dataType: "jsonp",     cache: false,     url: "https://api.instagram.com/v1/users/self/media/recent?access_token=[actionToken]&count=10",     timeout: 10000,     success: function(data) {

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

            $(".instagram-photos").append("<div><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[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 ( data.data[j].caption.text !== "null") {

  $(".instaphotos").append("<div class='instagram-caption'>" + data.data[j].caption.text + "</div>");

}

And there you have it.  View the example on my site khreativemedia.com/work.html.

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