1

Fiz uma página para exibir fotos do Instagram que tenham alguma hashtag pré-selecionada por mim. Usei um exemplo que encontrei na internet (não me lembro a fonte) e não sei como fazer paginação nas fotos.

Como posso fazer paginação com a API do Instagram?

Exemplo do Script:

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>");
        }
    }
});

1 Resposta 1

1

O MAX_TAG_ID é o ponto onde começa a página seguinte (no seu código, você colocou o valor do 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.

A resposta da consulta na API devolve um objeto com { pagination, meta, data }:

Pode-se ver que o pagination.next_max_id está presente em pagination.next_url e este valor já é a URL da seguinte página. O que não encontrei é uma maneira de saber o número total de resultados na consulta de uma tag; meu palpite é que parece que tem que ir puxando a página seguinte até o next_max_id vir vazio.

Segue uma possível implementação para um loop até pegar todas as fotos de uma tag. Não testei o código, então tem que determinar qual o valor do next_max_id quando acabam os resultados (tem uma observação e um console.log no código). Sugiro testar com alguma tag obscura que não tenha tantos resultados; coloquei uma variável de controle (resultados_obtidos) se quiser parar o loop depois de X iterações.

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
5
  • Obrigado pela ajuda @brasofilo. Você sabe como posso fazer para ir puxando a página seguinte até o next_max_id vir vazio?
    – Odair
    Commented 4/11/2014 às 21:49
  • 1
    Tenho medo que algumas tags possam ter milhares de resultados... Mas vou colocar um exemplo de loop na resposta. Talvez o mais legal fosse infinite scroll.
    – brasofilo
    Commented 4/11/2014 às 21:52
  • Valeu @brasofilo. Sou iniciante em javascript portanto acho que o infinte scroll fica para um próximo projeto
    – Odair
    Commented 4/11/2014 às 22:02
  • Ok, fiz update na resposta.
    – brasofilo
    Commented 4/11/2014 às 22:09
  • Pro tip: como viu, é essencial consultar a documentação das APIs que a gente trabalha. Eu não sabia a resposta pra isto ;)
    – brasofilo
    Commented 4/11/2014 às 22:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .