jquery - Display Instagram photos from different account to my webpage

Question

I am looking for the way to display not my instagram photos to my website page, but can't. Is it possible to do if i have just an account name of the instagram user (e.g. jamieoliver). My website is written on Wordpress.

Need to display not my images

Answer 1

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