INSTAGRAM - Pega fotos determinado hashtag

[WAD - Soluções 0]

Olá, Pessoal.

Só Jr. em programação. Mais achei este script super legal ele mostra fotos que são publicadas no instagram, com uma hashtag que você escolhe. Espero que ajude, alguém.

 

CSS

.instagram {
    height: 200px;
    margin: 0 0 10px 0;
}

.thumb_instagram {
		display: block;
		position: relative;
		float: left;
		overflow: hidden;
		margin:0 5px 5px 0;
		width:140px;
		height:140px;
	}

.thumb_instagram a:link {
    color: white;
    text-decoration: none;
}

.thumb_instagram a:visited {
    color: white;
    text-decoration: none;
}

.thumb_instagram figcaption {
    position: absolute;
    padding: 10px 0 0 0;
    width: 140px;
    opacity: 0;
    height: 30px;
    text-align: center;
    font-size: 10px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

.thumb_instagram figcaption a {
    color: #fff;
    text-transform: uppercase;
}

.thumb_instagram:hover figcaption {opacity: 1;}
.thumb_instagram:before {}
.thumb_instagram:hover:before {opacity: 0;}

.thumb_instagram figcaption {
    left: 0;
    bottom: -10%;
}

.thumb_instagram:hover figcaption {
    bottom: 0px;
}
.cor {
    background: #2e429b;
}

 

 

 

JavaScript,
Requer jquery-1.7.2.min.js

 <div id="instagram"></div>
                       
                       <script type="text/javascript">
	var accessToken = 'SEU-TOKEN';

    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/tags/SUA-HASHTAG/media/recent?client_id="+ accessToken +"&access_token="+ accessToken +"",
        success: function(data)  {
            for (var i = 0; i < 4; i++) {
                //$("#instagram").append("<a class='big-square span2' target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.thumbnail.url +"'></img>"+ data.data[i].user.full_name +"</a>");
                $("#instagram").append("<figure class='thumb_instagram img-rounded'><a href='" + data.data[i].link +"' target='_blank'><img alt='"+ data.data[i].user.full_name +"' src='" + data.data[i].images.thumbnail.url +"' ></a><figcaption class='cor'><a>@"+ data.data[i].user.full_name +"</a></figcaption></figure>");
            }
        }
    });
</script>

[Daniel Campos Simões 0]

Cara tava a dois dias procurando algo assim você resolveu meu problema com esse Simples Script.

 

Obrigado =)

[nicolauatala 0]

Luiz, estou com problemas para listar as fotos que usam hashtag com caracteres especiais. Ex: "#não".

Tem alguma dica para resolver isso?

[hailsonn 0]

eu aqui pra reviver esse topico :D

no meu caso esta dando erro na linha :

$("#instagram").append("<figure class='thumb_instagram img-rounded'><a href='" + data.data[i].link +"' target='_blank'><img alt='"+ data.data[i].user.full_name +"' src='" + data.data[i].images.thumbnail.url +"' ></a><figcaption class='cor'><a>@"+ data.data[i].user.full_name +"</a></figcaption></figure>");

no meu console aparece Cannot read property '0' of undefined

at Object.success

se alguem puder ajudar agradeço :D

[wootzor 103]

hailsonn, provavelmente a estrutura de dados já sofreu alterações desde 2014 para cá.

O que podes tentar fazer é imprimir os dados para veres a estrutura da resposta e depois ajustar o código em conformidade. Algo assim:

success: function(data)  {
   console.log(data);       
}

Depois basta verificares a consola do browser e ver a estrutura dos dados devolvidos pela API.

[danicarla 3]

Pessoal estou tentando sem sucesso usar esse código.. alguém tem alguma outra alternativa?

[gabrieldarezzo 255]

O Post é de 2013.

 

Provavelmente n vai funcionar msm.

Da uma lida:

https://www.instagram.com/developer/authentication/

 

Basicamente você vai precisar criar a conta, e manipular a API:

https://www.instagram.com/developer/endpoints/users/

 

 

Entender a diferença de um GET/POST é bacana tmb, e antes de pensar em consumir uma API, talvez ficar mais 'crack' com os metodos de chamar urls, no caso Ajax.

 

Tenho um passo a passo:

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

 

Veja se ajuda.

 

Qualquer duvida cria um Novo Tópico, evite desenterrar posts de 2013 ^^ 

[danicarla 3]

Já tinha lido a documentação do Instagram, mas não consegui entender por isso postei a duvida aqui.
Eu também julguei que seria melhor usar um tópico já existente ao invés de criar vários com mesmo assunto

Mas enfim, me desculpe, e obrigado pela sua ajuda