Get Photos from Instagram using jQuery

In this tutorial we are going to use jQuery $.ajax to connect to Instagram API and get photos by user or by tag. Works perfectly with the latest API changes.

/162 comments

This is the first post in post series about Instagram. There would be posts about working with Instagram API (using PHP and JavaScript) without difficult classes or other similar things. Just ready to use code.

For those who are looking for the working out of the box solution, I have one. It is a WordPress plugin which allows you to insert Instagram widget with photos of a certain user or by a hashtag.

And if you are looking for a tutorial about connection to Instagram API with pure JavaScript, check this out.

Now let’s come back to this post — it consists of three parts and different examples. As you could understand from its heading it is only about getting photos. Another API methods will be described in the next posts.

Instagram API changes. Access token.

How to Generate Instagram Access Token

For all the examples below a token is required. If you’re looking for a solution how to fetch Instagram feed without an access token, check this tutorial instead.

Below are just 4 steps that allows you to generate an access token:

  1. Log in to Instagram and open this page https://instagram.com/developer/clients/manage. Instagram may ask you some additional info – provide it.
  2. Click the button “Register a New Client”.
  3. We’re going to work with my tool, so in Valid Redirect URIs field specify https://rudrastyh.com/tools/access-token and click “Register”. Then click “Manage” button to obtain both Client ID and Client Secret of your just registered app.
  4. Use your Client ID and Client Secret to generate an access token with this tool. You can find more info there as well.
Instagram Client ID and Client Secret

A few facts about the Sandbox Mode

1. By User ID

In fact, it is the only example in this post that works properly in Sandbox Mode. For Sandbox mode change userid to the access token owner ID or just to self.

var token = 'your access token', // learn how to obtain it below
    userid = 1362124742, // User ID - get it in source HTML of your Instagram profile or look at the next example :)
    num_photos = 4; // how much photos do you want to get
 
$.ajax({
	url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent', // or /users/self/media/recent for Sandbox
	dataType: 'jsonp',
	type: 'GET',
	data: {access_token: token, count: num_photos},
	success: function(data){
 		console.log(data);
		for( x in data.data ){
			$('ul').append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>'); // data.data[x].images.low_resolution.url - URL of image, 306х306
			// data.data[x].images.thumbnail.url - URL of image 150х150
			// data.data[x].images.standard_resolution.url - URL of image 612х612
			// data.data[x].link - Instagram post URL 
		}
	},
	error: function(data){
		console.log(data); // send the error notifications to console
	}
});

See the Pen EyPbBr by Misha (@rudrastyh) on CodePen.light

2. By a Username

Of course you can look for a user ID in Instagram HTML code each time.

But do not you think that it would be better to get user ID in the code automatically? Especially for your own plugin or application. It is much simpler for every single user of your app to specify a username, not a user ID.

This example isn’t supported by apps in Sandbox Mode.

var token = 'your access token',
    username = 'rudrastyh', // rudrastyh - my username :)
    num_photos = 4;
 
$.ajax({ // the first ajax request returns the ID of user rudrastyh
	url: 'https://api.instagram.com/v1/users/search',
	dataType: 'jsonp',
	type: 'GET',
	data: {access_token: token, q: username}, // actually it is just the search by username
	success: function(data){
		console.log(data);
		$.ajax({
			url: 'https://api.instagram.com/v1/users/' + data.data[0].id + '/media/recent', // specify the ID of the first found user
			dataType: 'jsonp',
			type: 'GET',
			data: {access_token: token, count: num_photos},
			success: function(data2){
				console.log(data2);
				for(x in data2.data){
					$('ul').append('<li><img src="'+data2.data[x].images.thumbnail.url+'"></li>');  
				}
    			},
			error: function(data2){
				console.log(data2);
			}
		});
	},
	error: function(data){
		console.log(data);
	}
});

Can I get Photos of a Certain User Filtered by a Tag(s)?

Get Instagram photos of a certain user filtered by a tag.

3. By a Tag

This functionality is also very popular. Very easy to implement.

But if your Instagram app is in Sandbox Mode you can only get your own tagged media. And remember that your app has access only to 20 recent media. If you want to avoid these restrictions so much you could try to use my WordPress plugin.

Yes you can. Currently I do not have ready code for this, but it is in my task list.

var token = 'your access token',
    hashtag='wordcamprussia2015', // hashtag without # symbol
    num_photos = 4;
 
$.ajax({
	url: 'https://api.instagram.com/v1/tags/' + hashtag + '/media/recent',
	dataType: 'jsonp',
	type: 'GET',
	data: {access_token: token, count: num_photos},
	success: function(data){
		console.log(data);
		for(x in data.data){
			$('ul').append('<li><img src="'+data.data[x].images.standard_resolution.url+'"></li>');  
		}
	},
	error: function(data){
		console.log(data);
	}
});

Can I get photos by Multiple Tags?

Get Instagram photos by multiple tags.

Of course you can, but you should learn more about JavaScript arrays in that case — this requires to make an ajax request for every hashtag and then just rearrange the result data.

If you don’t want to dig into it — this functionality is also in my task list :)

If you have a question, please, leave it in comments — I will answer everyone.

Related

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WordPress?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 162

Leave a comment

php js HTML CSS Code