Sandbox Limitation

First of all, if your Instagram app is in a Sandbox mode, you are allowed to get only 20 latest photos of your own account.

There is two ways to get rid of this limitation – approve your Instagram app or use an implementation which doesn’t require access tokens.

How to Set the Number of Photos to Get from Instagram

Instagram API has count parameter — if you don’t specify it in your API request, then by default it would be 20.

The example below shows how to change it to 30 for example:

https://api.instagram.com/v1/tags/wordcamp/media/recent?client_id=YOUR CLIENT ID HERE&count=10

This API call returns the latest 10 photos from Instagram tagged with wordcamp.

But if you change 30 to 50, then you will be faced with another limitation. You will notice that Instagram API returns only 33 photos, not 50.

Before we continue to the next chapter, learn more how to get images by a hashtag here, find out how to do the same without an access token right here.

Instagram API Results Pagination. Show More than 33 photos.

Do you know what pagination is?

It is when a lot of posts (500 for example) can not be displayed on the one page for performance reasons and they are split into pages (by 10 posts for example).

If you are a WordPress developer you know what I am talking about (remember WP_Query).

Just imagine — you want to get photos by #wordcamp and this tag has 3K publications. Of course they can not be displayed at once.

PHP example

Function rudr_instagram_api_curl_connect() connects to Instagram API, you can find it here.

Do not you know what Access Token is? Read here how to obtain it.

/*
 * Get 33x2 = 66 photos
 */
$access_token = 'YOUR ACCESS TOKEN HERE';
$count = 33; // the number за photos per request (from 1 to 33)
$tag = 'wordcamp';
 
$result = rudr_instagram_api_curl_connect('https://api.instagram.com/v1/tags/' . $tag . '/media/recent?access_token=' . $access_token . '&count=' . $count);
 
foreach ($result->data as $post) {
	echo '<a href="' . $post->link . '"><img src="' . $post->images->thumbnail->url . '"></a>';
}
 
$result_2 = rudr_instagram_api_curl_connect( $result->pagination->next_url ); // API request for the next 33 photos
// it is the same: $result = rudr_instagram_api_curl_connect( 'https://api.instagram.com/v1/tags/' . $tag . '/media/recent?access_token=' . $access_token . '&count=' . $count . '&max_tag_id=' . $result->pagination->next_max_tag_id );
 
foreach ($result_2->data as $post_2) {
	echo '<a href="' . $post_2->link . '"><img src="' . $post_2->images->thumbnail->url . '"></a>';
}

So, it is simple — the more photos you need to get the more API requests you have to do ( 99 photos = 3 requests, 132 photos = 4 requests etc).

jQuery example

I prefer the jQuery way because there is no cURL connection required.

/*
 * Get 60 photos
 */
var access_token = 'YOUR ACCESS TOKEN HERE',
    tag='wordcamp',
    count = 30; // number of photos per request (max 33)
 
$.ajax({
	url: 'https://api.instagram.com/v1/tags/' + tag + '/media/recent',
	dataType: 'jsonp',
	type: 'GET',
	data: {access_token: access_token, count: count},
	success: function(result){
		console.log(result);
		for(x in result.data){
			$('ul').append('
 	<li><img src="'+result.data[x].images.standard_resolution.url+'"></li>
');  
		}
		$.ajax({
			url: result.pagination.next_url, // we don't need to specify parameters for this request - everything is in URL already
			dataType: 'jsonp',
			type: 'GET',
			success: function(result2){
				console.log(result2);
				for(x in result2.data){
					$('ul').append('<li><img src="'+result2.data[x].images.standard_resolution.url+'"></li>');  
				}
			},
			error: function(result2){
				console.log(result2);
			}
		});
 
	},
	error: function(result){
		console.log(result);
	}
});
Post Views: 491