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
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