Instagram API: Get more than 20 and more than 33 photos as well

If you get photos from Instagram using a code or ready PHP classes, maybe you already know this problem.

Actually there are two limitations — 20 photos and 33 photos. How to get rid of them?

#instagram, #JavaScript, #PHP  /  November 9, 2015  /   2

Since Novemer 17, 2015 Instagram API changes, you can implement this tutorial only if you have an approved Access Token. If you do not have it, I recommend you to look at my plugin which doesn’t have photo limitation View plugin »

1. How to set the number of photos we 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 Instagtam API returns only 33 photos, not 50.

2. Instagram API results pagination. Show more than 33 photos on a one page.

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 reason and they are splitted 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 returned at once.

PHP example

Function rudr_instagram_api_curl_connect() setups the cURL connection to API, you can find this function 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 are 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);
	}
});

If you have a question please leave it in comments.

Only the best of WordPress

once a week, no spam

Comments 2

Leave your question or feedback

phpjsHTMLCSSSQLCode
Please, enter a comment
Please, enter a name
Incorrect email