Instagr.am API
Postado por: Pedro Rogério em
O Instagram é um serviço de compartilhamento de fotos pelo celular, por enquanto disponível somente para usuários de iPhone (Sorry, Android Users). Através do aplicativo no celular, seus usuários tiram fotos em estilo Polaroid e podem enviá-las para seus amigos, compondo uma espécie de rede social. Assim como o twitter, você pode seguir pessoas e ser seguido, enviando as fotos que retratam o seu cotidiano junto com textos curtos, e vendo fotos de amigos. Dá ainda para dizer, por geolocalização, onde as fotos foram tiradas.
O serviço tem crescido drasticamente nos últimos dias, e hoje tem aproximadamente 12 milhões de usuários. E como qualquer outra aplicação pop, eles possuem uma API, onde você pode por exemplo mostrar suas últimas fotos em seu site, ou algo do tipo.
Antes de tudo, para utilizar a API do Instagr.am, você deve ir até o site e criar um aplicativo para obter um access token e um client id, sem os mesmos você não consegue fazer nada.
Com tudo isso OK, vamos a um exemplo prático, mostrar as últimas 20 fotos de um usuário qualquer do Instagr.am. O código responsável por isso você pode ver abaixo:
var accessToken = 'seu_access_token';
var username= "nome_do_usuario";
var limit = 20; //Limite máximo de fotos
var setSize = "small";
var instagram = function() {
return {
init: function() {
instagram.getUser();
},
getUser: function() {
var getUserURL = 'https://api.instagram.com/v1/users/search?q='+ username +'&access_token='+ accessToken +'';
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: getUserURL,
success: function(data) {
var getUserID = data.data[0].id;
instagram.loadImages(getUserID);
}
});
},
loadImages: function(userID) {
var getImagesURL = 'https://api.instagram.com/v1/users/'+ userID +'/media/recent/?access_token='+ accessToken +'';
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: getImagesURL,
success: function(data) {
for(var i = 0; i < limit; i+=1) {
if(setSize == "small") {
var size = data.data[i].images.thumbnail.url;
} else if(setSize == "medium") {
var size = data.data[i].images.low_resolution.url;
} else {
var size = data.data[i].images.standard_resolution.url;
}
$("#instagram").append("<li><a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"'/></a>");
}
}
});
}
}
}();
$(document).ready(function() {
instagram.init();
});
Vocês podem ver aqui um exemplo funcionando do código acima.
Você também pode pegar as últimas fotos mais populares, o código responsável por isso está abaixo:
var accessToken = 'seu_access_token';
var limit = 32; //Limite máximo de fotos
var setSize = "small";
var instagram = function() {
return {
init: function() {
instagram.loadImages();
},
loadImages: function() {
var getImagesURL = 'https://api.instagram.com/v1/media/popular?access_token='+ accessToken +'';
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: getImagesURL,
success: function(data) {
for(var i = 0; i < limit; i+=1) {
if(setSize == "small") {
var size = data.data[i].images.thumbnail.url;
} else if(setSize == "medium") {
var size = data.data[i].images.low_resolution.url;
} else {
var size = data.data[i].images.standard_resolution.url;
}
$("#instagram").append("<li><a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"'/></a>");
}
}
});
}
}
}();
$(document).ready(function() {
instagram.init();
});
Vocês podem ver aqui um exemplo funcionando do código acima.
Caso você queira buscar por alguma tag, utilize o código abaixo:
var accessToken = 'seu_access_token';
var limit = 20; //Limite máximo de fotos
var setSize = "small";
var instagram = function() {
return {
init: function() {
instagram.loadImages();
},
loadImages: function() {
var getImagesURL = 'https://api.instagram.com/v1/tags/html5/media/recent?client_id=be52cb013dda4c47a03cdd5689896c37&access_token='+ accessToken +'';
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: getImagesURL,
success: function(data) {
for(var i = 0; i < limit ; i+=1) {
if(setSize == "small") {
var size = data.data[i].images.thumbnail.url;
} else if(setSize == "medium") {
var size = data.data[i].images.low_resolution.url;
} else {
var size = data.data[i].images.standard_resolution.url;
}
$("#instagram").append("<li><a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"'/></a>");
}
}
});
}
}
}();
$(document).ready(function() {
instagram.init();
});
Vocês podem ver aqui um exemplo funcionando do código acima.
Eu também posso buscar fotos por geolocalização, basta passar na requisição as coordenadas geográficas e ele busca todas as fotos em um raio máximo de 5 KM, como podem ver no código de exemplo abaixo:
var accessToken = 'seu_access_token';
var limit = 20; //Limite máximo de fotos
var setSize = "small";
var instagram = function() {
return {
init: function() {
instagram.loadImages();
},
loadImages: function() {
var getImagesURL = 'https://api.instagram.com/v1/media/search?lat=52.370275&lng=4.886055&distance=5000?client_id=be52cb013dda4c47a03cdd5689896c37&access_token='+ accessToken +'';
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: getImagesURL,
success: function(data) {
for(var i = 0; i < limit; i+=1) {
if(setSize == "small") {
var size = data.data[i].images.thumbnail.url;
} else if(setSize == "medium") {
var size = data.data[i].images.low_resolution.url;
} else {
var size = data.data[i].images.standard_resolution.url;
}
$("#instagram").append("<li><a target='_blank' href='" + data.data[i].link +"'><img src='" + size +"'/></a>");
}
}
});
}
}
}();
$(document).ready(function() {
instagram.init();
});
Vocês podem ver aqui um exemplo funcionando do código acima.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Valeu, Pedro.
Exemplos muito bons, simples e práticos. Parabéns!
Muito bom o post.
Seria possível criar uma busca por palavra-chave que retornasse uma lista de usuários brasileiros ordenados por número de seguidores? Tipo um Top Users Brasil?
Thanks!
Conseguiu algo semelhante? Também estou em busca. Abs
Não necessariamente a ordenação de por número de seguidores… e sim a filtragem de uma determinada palavra chave e usuários brasileiros :)
JI Namesta Sir,
Os exemplos são ótimos, mas acredito que não seja recomendado colocar o access_token no javascript disponível para qualquer um, certo? Não seria melhor implementar esse acesso no servidor, via curl do php (ou similar de outras linguagens) e retornar somente o conteúdo para o browser, sem expor o token?
Abraços
Acho que mudaram a API, porque não consegui achar o meu access_token.
Para descobrir o access_token eu deixei meu Instagram Logado e depois utilizei o seguinte Javascript no Firebug após ter registrado minha API:
https://api.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URL
Mais uma vez, um ótimo artigo e salvando nossa pele!
Abs
Corrigindo, esta é a URL que utilizei:
https://instagram.com/oauth/authorize/?display=touch&client_id=CLIENT_ID&redirect_uri=REDIRECT_URL&response_type=token
Utilizando o Firebug, assim:
location.href=”https://instagram.com/oauth/authorize/?display=touch&client_id=[CLIENT_ID]&redirect_uri=[REDIRECT_URL]&response_type=token”
Não entendi como pega o acess token tbm…
To tentando fazer como o Leo disse, mas não tive resultados
Agora eu dei conta =D
Deu certo, Lincoln?
Alguem já tentou mostrar as fotos de 03 usuários ao mesmo tempo?
TEntei, mas nao to conseguindo!! :(
Bom dia, acesss tokem é o mesmo que Client ID ? pois não consegui tbm, criei um novo aplicativo na área do API mas o que eu consegui foi o Client ID e o Client Secret, poderiam me ajudar, sou meio devagar pra isso. Abraços.
Olá Tiago, eu encontrei esse site e foi ele quem me deu um access token: http://stylehatch.co/instagram/
Espero que ajude você tb.
Bom dia, estou iniciando agora o uso do código instagram, porém nunca utilizei nada parecido, não sei nem como começa, já criei cliente e tals, porém não sei onde utilizo este código, é em uma página html, PHP… Me ajudem por favor!
Olá Juninho, não sei direito o que vc pretende fazer, mas para fazer os testes eu só precisei criar um arquivo js com um dos códigos acima, depois em uma página html inclui a biblioteca do jquery e o arquivo js depois dela e no body desse html coloquei uma div com o id=”instagram”. E voilá. Boa sorte.
Caramba, esse código realmente me ajudou. Muito obrigada mesmo.
[...] ao Instagr.am, a não ser um botão que poderia te levar até seu perfil. Ok, tudo bem, eu posso utilizar a API e mostrar algumas de minhas fotos, mas e seu quiser, por exemplo, mostrar meu número de [...]
[...] já havia mostrado aqui anteriormente a trabalhar com a API do Instagr.am, foi fácil fazer a coisa [...]
Boa tarde,
Todos os exemplos são bem claros e funcionais. Só uma dúvida:
Uma vez que eu tenha o accessToken eu posso usá-lo sempre? Estou interessado apenas em exibir no meu site as minhas fotos recentes (o que bate com um dos exemplos acima)… acredito que não seja necessário logar e ficar fazendo obtendo tokens já que é público.
Agradeço desde já!
André,
Sim, você só precisa de um accessToken, e só um detalhe, aconselho a gerar um para você. Aproveite que fiz ontem uma ferramenta para gerar token: http://www.pinceladasdaweb.com.br/instagram/access-token/. Basta clicar em Get Token, autorizar o aplicativo que ele te retorna um token válido para uso em qualquer lugar.
Boa tarde, Pedro.
Já usei sua ferramenta e gerei o token. Esse token, assim como o userid, eu posso definir como constante e usar no meu site sem se preocupar… certo? Não tem validade nem nada (quer dizer, enquanto eu mantiver o aplicativo autorizado, certo)?
Sim André Gomes, vai funcionar até o aplicativo estiver autorizado.
Pedro, é possível filtrar uma determinada #tag, somente de usuários brasileiros?
Você pode pegar as fotos por geolocalização, mas o alcance é de no máximo 5KM a partir do local definido, e pelo que vi na API do Instagr.am, infelizmente não é possível fazer um mix de busca por tag e geolocation.
Ai galera não gosto muito de ler nem sei se tem algo escrito por aqui, que isso precisa do jQuery, falou abraços! me ajudou muito esse post #FicaDica
Se você tem preguiça de ler. Tenho preguiça de responder. Dá uma lida cara, conhecimento é isso. Busque-o.
Boa sorte.
Olá, Queria saber se alguém solucionou o problema dele retornar apenas 20 fotos em cada requisição? estou com uma dificuldade pois tenho q listar 36 fotos
A parte do código onde retorna quantas fotos você quer está bugada. Só retorna 20, se você colocar 100, ele retorna 20 do mesmo jeito.
Não está bugado, a API só retorna 20. Para que você mostre mais fotos é necessário criar uma app no Instagram e pedir a permissão do usuário.
Não necessariamente.
Então como funciona este site? http://saopaulo-now.jit.su/
Ele exibe INCONTÁVEIS fotos do Instagram para mostrar cidades em ‘tempo real’.
Foi o que o Pedro disse… se criar o APP essa restrição não existe.
André Gomes você só esqueceu de falar, que é necessário também “pedir a permissão do usuário” – Como o Pedro disse.
Pode crer!!
É que as vezes que eu desenvolvi eu sempre usei a própria conta do cliente (assim, a solicitação de permissão já está contida).
Abs!
E esse Pedro? http://www.pinceladasdaweb.com.br/brasilgram
Como vc conseguiu que ele retornasse essa quantidade de fotos?
Caralho. Como pega o ID ? Alguém me mande. Não consegui rafaunit@yahoo.com.br
Tentei diversas formas e não consegui fazer imprimir as imagens. Peguei o 3º exemplo de como usar com tags, salvei o arquivo js, e depois baixei a biblioteca Jquery.
Abri o notepad++ e criei um script assim:
<script type="text/javascript" src="
Mesmo assim, num imprimiu nada, qual a solução do problema ?
Não foi o código, vou mandar linkado.
http://pastebin.com/Mu2E3erV
Se você não postar o código do seu arquivo instagram.js para podermos ver como está, não poderemos te ajudar.
O código do arquivo instagram é o 3º exemplo que tem aqui na página, a única diferença é que coloquei o token onde pedi ! Por isso que não postei, sendo assim, o que você acha que é ?
Estou a procura de um script onde mostra somente uma foto e as fotos vão passando como em slide.