Instagram API Pagination – Get more than 20 and more than 33 photos

In this tutorial we will talk about Instagram limitations which do not allow to display more than 20 photos or sometimes more than 33 photos and how to get rid of them.

/18 comments

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

This API call returns the latest 30 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);
	}
});

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

Leave a comment

php js HTML CSS Code