How do I pay with the Instagram API?

Question

I made a page to display Instagram photos that have some hashtag preselected by me. I used an example I found on the internet (I don’t remember the source) and I don’t know how to make pagination in the photos.

How can I make pagination with the Instagram API?

Script Example:

var userid = "12345678";
var accessToken = "12345678.5b9e1e6.37fbbfab2c594bb2b15c24161de6a744";
var tag = 'cute';

$.ajax({
    type:"GET",
    dataType:"jsonp",
    cache:false,
    url:"https://api.instagram.com/v1/tags/"+tag+"/media/recent?client_id="+userid+"&access_token="+accessToken+"&count=33&max_tag_id="+userid+"",

    success:function(data) {
        for (var i = 0; i < 100 ; i+=1){
            $("#instagram").append("<figure class='miniatura_instagram img-rounded'><a href='" + data.data[i].link+"' target='_blank'><img alt='"+ data.data[i].user.full_name +"' src='" + data.data[i].images.low_resolution.url +"' ></a><figcaption class='cor'><a>@"+ data.data[i].user.full_name+"&nbsp;&nbsp;&#8902;&nbsp;&nbsp;&#10084; "+data.data[i].likes.count+"</a></figcaption></figure>");
        }
    }
});

Answer 1

The MAX_TAG_ID is the point where the next page begins ^{_{(in your code, you put the value of userid)}}.

PARAMETERS
COUNT Count of tagged media to Return.
MIN_TAG_ID Return media before this min_tag_id.
MAX_TAG_ID Return media after this max_tag_id.

To API query response returns an object with { pagination, meta, data }:

It can be seen that the pagination.next_max_id is present in pagination.next_url and this value is already the URL of the following page. What I haven’t found is a way to know the total number of results in a tag query; my guess is that it looks like you have to go pulling the next page up to the next_max_id empty.

Follow a possible implementation for a loop until you get all the photos from a tag. I haven’t tested the code, so you have to determine what the value of next_max_id when the results end (has an observation and a console.log code). I suggest testing with some obscure tag that does not have as many results; I put a control variable (resultados_obtidos) if you want to stop the loop after X iterations.

var resultados_obtidos = 0;

function getResults( next ) {
    var next_id = next ? '&max_tag_id=' + next : '';

    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/tags/" + tag
             + "/media/recent?client_id=" + userid
             + "&access_token=" + accessToken
             + "&count=33" 
             + next_id,
        success:function(data) {
            for (var i = 0; i < 100 ; i+=1){
                $("#instagram").append(SEU_HTML);
            }
            // TESTAR ISTO PARA SABER QUAL É A RESPOSTA NA PÁGINA FINAL E AJUSTAR O if ABAIXO
            console.log( 'Próxima página: ' + data.pagination.next_max_id );

            // Fazer loop se houver mais resultados
            // Com o resultados_obtidos pode-se parar o loop em algum momento
            if( data.pagination.next_max_id ) {
                resultados_obtidos++;
                getResults( data.pagination.next_max_id ); 
            }
        }
    });

}
getResults(); // Iniciar a consulta a API