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 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>.
Happy Coding!