Display Instagram photos from different account to my webpage

This URL format http://instagram.com/{instagram user name}/media will return a json file with the latest (20+/-) media files from that user.

In the example of jamieoliver you can do http://instagram.com/jamieoliver/media

You could process that json response through an (jQuery) ajax call like :

$.ajax({    url: "http://instagram.com/jamieoliver/media",    dataType : "jsonp", // this is important    cache: false,    success: function(response){        // process the json response to get images        // e.g. the first image should be something like :         // response.items.images[0].low_resolution        // you could call an external function to iterate through the response    }});

Of course, I assume you understand what a json format looks like. If you are using WordPress, maybe you could find a plugin to deal with that json response

EDIT:

It seems like the response from http://instagram.com/{author_name}/media is not jsonp but json (see this for further reference), however setting a json dataType will return a cross-domain error.

The workaround is to use whateverorigin.org third-party app to circumvent the same-origin policy.

So format your URL like

"http://whateverorigin.org/get?url=" + encodeURIComponent("http://instagram.com/{author_name}/media");

The whateverorigin server will act as proxy and return the proper json format.

Note that you still need to use dataType : "jsonp" in your ajax call.

See JSFIDDLE