Unauthenticated query to the Instagram API. Returned JSON is dynamically added to the page.

instagram-api-query.html

<ul id="instagram-container"></ul>

instagram-api-query.js

  (function ($) {

      var get_json_callback,
      instagram_json,
      url;

      url = 'https://api.instagram.com/v1/tags/staffordshire/media/recent?client_id=218a8f30a6924492b7ffdbbcb08f72c5&callback=?';

      // callback to execute when json request completes
      get_json_callback = function (returned_json) {

          var count = returned_json.data.length,
              instagram_slideshow_items = '';

          $.each(returned_json.data, function (key, current_item) {

              // build the html for instagram item
              var instagram_item = '<li>';

              instagram_item += '<a target="_blank" href="' + current_item.link + '">';

              instagram_item += '<img src="' + current_item.images.low_resolution.url + '" width="150" heigh="150">';

              instagram_item += '</a>';

              instagram_item += '</li>';
              // end build the html for instagram item

              // add item to instagram slideshow fragment
              instagram_slideshow_items += instagram_item;

              // if this is the last item -- basically a callback
              if (key === (count - 1)) {

                  // add instagram items to page
                  $('#instagram-container').append(instagram_slideshow_items);

              }

          });

      };
      // callback to execute when json request completes

      // query instagram api and get json
      instagram_json = $.getJSON(url, get_json_callback);

  }(jQuery));