Day 2: JQuery-JSON Instagram Photo Feed App

Now having gotten myself back into the mode of reading articles, I was motivated to create a JQuery/JSON Instagram Photo App to use on my site after reading “A Beginner’s Guide to jQuery-Based JSON API Clients" by Ben Howdle on Smashing Magazine and “How to use jQuery with a JSON Flickr feed to display photos" by Richard Shepherd.  Inspiration born!  Since I do not have a Flickr account, I figured Instagram would be the next best thing; so went ahead and signed up for access to the API to get a Client ID and Client Secret code at [registration required].  

After registering the app I spent some time reading through the developer information; this is going to take a little longer than anticipated.  I had second thoughts, you know the whole what if phase as I felt myself sinking into confusion. No excuses however.  I decided to take a break.  As tempted as I was last night to hop back on the machine and crank out some code, I decided to step back from it, and grabbed my JQuery text, pen and paper; scrolled the section highlighting the Ajax call and it’s options, and perhaps I would see what I may have been doing incorrectly - I also googled and found 2 examples on the web which I will revisit today, well right now that I am clear, fresh and ready to roll.  Updates coming soon!

[Roughly 2 hours later]  Success!! Instagram Photo Feed is now live!

View it on 

Thanks in part to the examples found when googled without which I’d still be banging my head to some extent:

There were 2 issues with my code. One was a spacing issue with my anchor tag being on a different line, and the second had to do with the request url - possibly copied the incorrect url containing keyword subscriptions, instead of the user/self feed (poking at different options to figure this out).

The first was quickly cleared up by checking the Firebug console, where the following error was displayed:
unterminated string literal

for the following bit: 
$(“.instaphotos”).append(“<div class=’instagram-placeholder’>

but that code looked fine, so checked the following line which started the <a href…> and moved it inline with <div class=”instagram-placeholder”> and voila, unterminated string literal error was resolved.

If you take a look at my source you’ll notice that I’ve removed <div class=”instagram-placeholder”> container because I do not need it.

Now on to figuring out why my images weren’t being displayed.  I went back to the API Console and ran a few more tests, then copied the output from one of the images and tested in the browser.  That worked.  So then copied the request code and voila.  All in all I spent less than 6 hours.  The problem could have been that my machine was caching copied text without my realizing it.  (It has happened before, sniff).

Never give up!  Off to select a project of the day.