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. Two limitations — 20 photos and 33 photos. How to get rid of them?

#Instagram, #JavaScript, #PHP  /  August 9  /   6

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.

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

Subscribe to this weekly newsletter to receive the latest blog posts by email.I respect your privacy. Your email is safe with me.

Comments 6

  • Hi, firstly thank you thank you and thank yout for you site and blog in which i have found some excellent and usefull material for my purpose, i’m creating a personal site with some photos that i need to extract from my instragram feed, i have already used part of your code included in

    https://rudrastyh.com/javascript/get-photos-from-instagram.html#user_id

    even if i have found some problems using code for tag

    https://rudrastyh.com/javascript/get-photos-from-instagram.html#tag

    , from console log i see only

    Object { meta: Object }

    there’s no other thing, and obv i insert my own tagged word passed on

    hashtag

    value.

    I have tried to use this code for pagination but nothing appear and from inspect i see

    Object { meta: Object }
    TypeError: result.pagination is undefined

    can you give me some suggestions please?
    Thank you so much

  • so basically your code in Javascript might work without Instagram approvation, is it correct?

    actually I can have only tag file that are in my stream feed and till last 20 of them.

    did you have some suggestions to help me?

    thank you.
    Regards

Leave your question or feedback

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