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 instagr.am/developer [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 khreativemedia.com/work.html
Thanks in part to the examples found when googled without which I’d still be banging my head to some extent: https://forrst.com/posts/Using_the_Instagram_API-ti5
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:
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.