How to do paging with the Instagram API?

Navigation
1

I made a page to display Instagram photos that have some hashtag pre-selected by me. I used an example that I found on the internet (I can not remember the source) and I do not know how to paginate the photos.

How can I make paging 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>");
        }
    }
});
    
asked by anonymous 04.11.2014 / 22:13

1 answer

1

The MAX_TAG_ID is the starting point for the next page (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.

The query response in the API returns an object with { pagination, meta, data } :

Youcanseethatpagination.next_max_idispresentinpagination.next_urlandthisvalueisalreadytheURLofthefollowingpage.WhatIdidnotfindisawayofknowingthetotalnumberofresultsinthequeryofatag;myguessisthatitlookslikeithastogobypullingthenextpageuntilnext_max_idcomesempty.

Followapossibleimplementationforaloopuntilyougetallthephotosinatag.Ididnottestthecode,soyouhavetodeterminewhatthevalueofnext_max_idiswhentheresultsareover(haveanoteanda console.log " in the code). I suggest testing with some obscure tag that does not have as many results; I put a control variable ( resultados_obtidos ) if I 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
    
04.11.2014 / 22:42
Loop for MySql field sum Error Running a Firebird Trigger