Instagram API pagination - Previous Page

Question

I am getting Instagram user's media with Jquery.

I need to get All user media, but Instagram API media limit is only 20 and API pagination returns only next link. There is no previous link.

I write code somethink like that, this is working with next but not working previous. And I stack here

function instaPhotos(page) {


var $limit = 1;
var $token = $('.instagram').data('instagramtoken');
var $nextId = $('.instagram').attr('data-instagramnext');
var $pageNumber = parseInt(localStorage.getItem('page'));


switch (page){      
    case 'next':

        localStorage.setItem('page', ($pageNumber+1));
        var $url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token=' + $token + '&count=' + $limit + '&max_id=' + $nextId


    break;      
    case 'prev':

        localStorage.setItem('page', ($pageNumber-1));
        var $url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token=' + $token + '&count=' + $limit + '&min_id=' + $nextId

    break;
    default:

        localStorage.setItem('page', 1);        
        var $url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token=' + $token + '&count=' + $limit

}


console.log($pageNumber);
console.log($url);

$.ajax({
    method: "GET",
    url: $url,
    dataType: "jsonp",
    context: this,
    success: function (r) {

        if (r.pagination.next_max_id){
            $('.instagram').attr('data-instagramnext', r.pagination.next_max_id);
        }

        // photo actions here.
    }

});

}

Answer 1

First of all: you can increase media limit up to 33 photos. You should use count parameter on your querystring:

https://api.instagram.com/v1/tags/nofilter/media/recent?count=33&access_token=YOUR_ACCESS_TOKEN

About to navigate to previous page it seems to me that Instagram response will always be with the most recent published photos.

From Instagram API:

MIN_TAG_ID  Return media before this min_tag_id.
MAX_TAG_ID  Return media after this max_tag_id.

So let's think of 3 pages (from id #1 to id #100):

First page:

next_min_id #0
photo #1
photo #2
photo #3
...
photo #33
next_max_tag_id #34

Second page:

next_min_id #34 (equals to next_max_tag_id of first page) 
photo #35
photo #36
photo #37
... 
photo #66
next_max_tag_id #67

Third page:

next_min_id #67 (equals to next_max_tag_id of second page)
photo #68
photo #69
photo #70
...
photo #99
next_max_tag_id #100

While the querystring parameter max_tag_id limits the top of your result, min_tag_id limits the bottom of it. So if you use only min_tag_id as parameter the response will be equal the first page despite of the page min_tag_id value came from. After all the photos of first page (#1, #2, #3...) come before the min_tag_id of any other page (#34 and #67) and are the newest ones.

I think to accomplish this task the only way is using max_tag_id querystring parameter or next_url result (entire url ready to use - easier).

You should save or max_tag_id's or (even better and faster) the entire result and control the logic on your code. Working example:

var token = "<your_access_token>";
var nextURL = "https://api.instagram.com/v1/tags/riodejaneiro/media/recent?count=33&access_token=" + token;

var currentPage = 0;
var pages = new Array();

$(function() { requestInstagram(); });

function previousPage() {

   currentPage = (currentPage>0) ? currentPage-1 : 0;
   // show photos of currentPage

   console.log("Page " + currentPage);
   console.log("First photo:" + pages[currentPage][0].id);

 }

 function nextPage() { 

    if (++currentPage < pages.length ) {
       // show photos of currentPage
       console.log("Page " + currentPage);
       console.log("First photo:" + pages[currentPage][0].id);
    } else {
       requestInstagram(); 
    }
}

function requestInstagram() { 
 $.ajax({
    method: "GET",
    url: nextURL ,
    dataType: "jsonp",
    context: this,
    success: function (r) {

      if (r.meta.code == "200") {

        pages[pages.length] = r.data;
        // show photos here
        console.log("Page " + currentPage);
        console.log("First photo:" + pages[currentPage][0].id);

        nextURL = r.pagination.next_url; // you should implement a way to identify the last page
        console.log(nextURL);

      }
    }

  });

}

Good luck!