My Instagram on Web page

by Santosh Thakur

HTML

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

CSS

body {background:#333; padding:20px;}
li {display:inline-block; margin:0 20px 20px 0;}

JavaScript

(function ($) {
    $.fn.jqinstapics = function (options) {

        // Defaults
        var defaults = {
            "user_id": null,
            "access_token": null,
            "count": 10
        };                      

        var o = $.extend(defaults, options);

        return this.each(function () {
        
          // Vars
          var elem = $(this),
              url = "https://api.instagram.com/v1/users/" + o.user_id + "/media/recent?access_token=" + o.access_token + "&count=" + o.count + "&callback=?";
               
            // Get the images    
            $.getJSON(url, function(data){
                $.each(data.data, function (i, val) {
                    var li = $("<li/>").appendTo(elem),
                        a = $("<a/>", {"href": val.link, "target": "_blank"}).appendTo(li),
                        img = $("<img/>", {"src": val.images.standard_resolution.url}).appendTo(a);
                    
                    if (val.caption){
                        a.attr("title", val.caption.text);
                    }
                });
            });
            
            if(o.user_id == null || o.access_token == null){
              elem.append("<li>Please specify a User ID and Access Token, as outlined in the docs.</li>");
            }

        });
    };
    $("#instagram").jqinstapics({
  "user_id": "1010765545",
  "access_token": "1010765545.1677ed0.e92cb2272ac34dc3a92654ac170da43d",
  "count": 20
});
})(jQuery);