Instagram API with Pure JavaScript

I had another post about getting photos from Instagram using jQuery, but there was not mentioned that the post is fully about jQuery and I received a lot of comments and questions — «How to do the same with pure JavaScript?»

I will try to make this post interesting, not just the code of a specific example.

Everything begins when you decide to show photos from your own or someone else’s Instagram account. This can be implemented in two way – with the plugin or with the code.

If you choose the code way, there are at least 4 more ways to do it – PHP (cURL), WordPress HTTP API, jQuery, and now we talk about JavaScript.

It is So Easy to Get Your Own 20 Latest Photos and Videos. Even with JS.

Create any container in your page HTML, for me it will be <ul id="rudr_instafeed">. The JavaScript should be placed inside the <body> tag and after the container element (you can place it in external file, but this file should be included in body as well).

var token = 'YOUR INSTAGRAM TOKEN',
    num_photos = 10, // maximum 20
    container = document.getElementById( 'rudr_instafeed' ), // it is our <ul id="rudr_instafeed">
    scrElement = document.createElement( 'script' );
    
window.mishaProcessResult = function( data ) {
	for( x in data.data ){
		container.innerHTML += '<li><img src="' + data.data[x].images.low_resolution.url + '"></li>';
	}
}

scrElement.setAttribute( 'src', 'https://api.instagram.com/v1/users/self/media/recent?access_token=' + token + '&count=' + num_photos + '&callback=mishaProcessResult' );
document.body.appendChild( scrElement );

Or maybe you’re interesting to get your account information?

I changed the variables and container name to &lt;div id=&quot;rudr_userinfo&quot;&gt;, so you can use both of the examples on the same page.

var token = 'YOUR INSTAGRAM TOKEN',
    container2 = document.getElementById( 'rudr_userinfo' ),
    scrElement2 = document.createElement( 'script' );
 
window.mishaProcessResult2 = function( response ) {
	container2.innerHTML = '<div><p><img src="' + response.data.profile_picture + '"></p></div>'
		+ '<div><h1>' + response.data.username + '</h1>'
		+ '<p>#' + response.data.id + '</p>'
		+ '<p>' + response.data.counts.media + ' media ' + response.data.counts.followed_by + ' followers ' + response.data.counts.follows + ' follows</p>'
		+ '<p><strong>' + response.data.full_name + '</strong> ' + response.data.bio + '<a href="' + response.data.website + '">' + response.data.website + '</a></p></div>';
}
 
scrElement2.setAttribute( 'src', 'https://api.instagram.com/v1/users/self?access_token=' + token + '&callback=mishaProcessResult2' );
document.body.appendChild( scrElement2 );

[codepen_embed height=”350″ theme_id=”light” slug_hash=”jmyGyM” default_tab=”result” user=”rudrastyh”]See the Pen jmyGyM by Misha (@rudrastyh) on CodePen.[/codepen_embed]

Why only 20? And what to do if I want to get photos by tag or from someone else’s Instagram account?

There were good times when you could get from Instagram as much photos as you want, when you could subscribe yourself to the other users using Instagram API, send them likes, comments etc.

These times are gone in past.

Instagram decided to stop endless spam and their developers created a sandbox mode, that allows ONLY to get your own 20 latest media and your own account information.

Things are not so bad. By default everyone who use API is in Sandbox mode, but you may request an approval to use all the features of the API.

What to do if you can not become approved but you really need photos by tag for example? I recommend you to look at my WordPress plugin then.

Some errors I faced

XMLHttpRequest cannot load … No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin … is therefore not allowed access.

Maybe like many of you, when the task to get photos from Instagram with pure JavaScript has appeared for me, the first thought was to use XMLHttpRequest to connect Instagram API.

It is not correct, because we have to use jsonp connection presented in this post.

Uncaught TypeError: Cannot read property ‘appendChild’ of null

This error could happen if you place the scripts from this post inside the &lt;head&gt; tag, no matter if the scripts are in external file or not.

Please, move the JavaScript to your page &lt;body&gt; tag.

Uncaught TypeError: Cannot read property ‘innerHTML’ of null at…

This error will occur if the scripts are placed before the tag, where we would like to print the API result. Place them after the tag.

# Instagram

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter