A ideia de mostrar as fotos do Instagram no seu site é uma maneira poderosa de aumentar a visibilidade. Mas sempre quando vamos usar as fotos do Instagram nos sites de nossos clientes, esbarramos no mesmo problema: “como mostrar as fotos do Instagram no meu site?”. Então pra evitar esses pesadelos, de ficar esquecendo como usar os feeds do Instagram sem plugins, resolvi criar esse passo a passo.
Esse processo foi divido em duas etapas, a primeira vamos solicitar a permissão do Instagram, para usar as fotos. No segundo momento vamos obter os caminhos das fotos.
Etapa 1
Acesse o site de desenvolvedor do Instagram, e clique em “Register Your Application”: https://www.instagram.com/developer
Caso não esteja logado, o site vai pedir para você entrar.
Neste momento, o Instagram mostra a lista de clientes registrados, se você ainda não tem, clique em “Register a New Client”.
A página seguinte mostra o formulário de registro. Vou ressaltar que há 4 campos obrigatórios, os seguintes:
- Application Name: Escolha qualquer nome, mas cuidado com as restrições que o Instagram indica. Não usar Instagram, IG, insta, ou gram.
- Description: Qualquer descrição, mas indico usar onde vai ser utilizado esse cliente. Exemplo: “Feeds do Instagram para meu site”.
- Website URL: URL do seu site.
- Valid redirect URIs: Agora um ponto bem importante, neste campo você tem que colocar exatamente essa URL http://www.tokdigital.cc/desenvolvimento/api/mostrar-feed-instagram-site/ (não se preocupe, vou explicar, mais abaixo, o porque).
Preenchido o formulário, NÃO clique em “Register”, ainda falta uma informação. Você deve ter notado, que temos duas abas, Details e Security, atualmente estamos em Details, vamos passar para aba Security, onde vamos desmarcar a opção “Disable implicit OAuth”. Feito isso, agora sim podemos clicar em “Register”.
Pronto, está criado o cliente. Caso você foi apressadinho e clicou logo em register, antes de desmarcar a opção, calma não está tudo perdido, no seu cliente tem a opção Manage, só clicar e desmarcar a opção.
Agora copie o seu Client ID, e cole ele aqui no campo abaixo:
Nós da Tok Digital, criamos essa aplicação acima para facilitar a sua requisição ao access token, por conta disso, solicitamos que você inserisse no registro do Instagram, o endereço da Tok.
UFA! Agora você tem o access token, foi por ele que usamos o endereço da Tok, logo ali em cima. Sem ele o seu site não poderia falar com os servidores do Instagram. Vamos para etapa 2?
O Token de Acesso do Instagram é uma longa seqüência de caracteres exclusivos da sua conta que concede a outros aplicativos o acesso ao feed do Instagram.
Etapa 2
Nesta segunda etapa vamos buscar as informações do usuário, como nickname, bio, seguidores e outros. E vamos também obter as postagens. O melhor de tudo isso, como temos as informações do cliente, e não um iframe do Instagram gerando tudo, podemos usar a criatividade, e criar algo customizado. Para acompanhar o exemplo, vou criar uma página do cliente, nesse processo vou usar PHP, mas você pode fazer uma requisição via Ajax, para buscar as informações, o método é simples.
Vamos lá então, vou iniciar com um código HTML simples, e com duas variáveis:
- access_token = O código que obtemos na primeira etapa.
- user = Vamos usar a URL para fazer uma requisição ao Instagram, usando a nossa permissão (access_token), assim com autenticação conseguimos informações do usuário. “https://api.instagram.com/v1/users/self/media/recent/?access_token=SEU-ACCESS-TOKEN“
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hm Jardins</title> </head> <body> <?php $access_token = SEU-ACCESS-TOKEN; $user = file_get_contents( "https://api.instagram.com/v1/users/self/media/recent/?access_token=$access_token" ); $user = json_decode($user, true)['data']; ?> </body> </html>
O retorno da função file_get_contents vai ser uma string, mas que tem o formato de lista, por esse motivo use json_decode para converter. Continuando, agora temos informações do usuário, nesse formato:
Array
(
[id] => 00000000
[bio] => Uma empresa que além de floricultura faz projetos e reformas de jardim. Surgiu do sonho de 2 irmãos que se dedicam para a satisfação de seus clientes.
[username] => hmjardins
[profile_picture] => https://scontent.cdninstagram.com/t51.2885-19/s150x150/16123549_738211899670830_4001478088876621824_a.jpg
[website] => http://www.hmjardins.com.br/
[full_name] => HM Jardinagem & Paisagismo
[counts] => Array
(
[follows] => 1108
[followed_by] => 474
[media] => 34
)
)
Simples? Agora vamos solicitar ao Instagram, os feeds recentes do cliente, usando a URL https://api.instagram.com/v1/users/self/?access_token=SEU-ACCESS-TOKEN com o seu access token. Note que o modo de requisição é o mesmo utilizado antes, com file_get_content, e depois convertendo o resultado.
$media = file_get_contents( "https://api.instagram.com/v1/users/self/media/recent/?access_token=$access_token" ); $media = json_decode($media, true)['data'];
Nossa variável $media, está com uma lista contendo informações das imagens do feed do nosso cliente. Com esse método o Instagram nos permite, trazer informações das últimas 20 mídias, caso você queira limitar a quantidade, basta apenas usar o parâmetro ‘count’ depois do access token, informando o número de mídias que você quer. Exemplo: https://api.instagram.com/v1/users/self/?access_token=SEU-ACCESS-TOKEN&count=2.
18 Commentários
Bruno Sousa
Olá!
O instagram deixa trazer só 20 posts pela api?
Eduardo Cardillo
Olá Bruno, nunca usamos mais do que 9, pois o objetivo sempre foi somente mostrar um resumo do feed, e fazer com que o usuário queira seguir a empresa no Instagram.
Diego Mourão
Olá Eduardo, boa noite! Tudo bem? Na parte onde você solicita para colar o “código de acesso no campo abaixo” não tem campo, só um código! É isso mesmo? Ou seria realmente um campo de texto, para gerar o link? Estou tentando inserir o instagram no meu site e realmente o seu tutorial é o melhor da internet, obrigado!
Eduardo Cardillo
Olá Diego, deveria haver um campo ali sim, acabei de notar a falha e já estou providenciando a correção, assim que estiver ok, te aviso! Obrigado pela visita 😉
Thais
O token do instagram tem alguma validade de expiracao?
Eduardo Cardillo
Olá Thais, não tem validade, mas usando aqui na agência percebemos que não pode ser utilizado em mais de um lugar (no site do cliente e em uma versão instalada localmente por exemplo).
Leandro Hindu
Olá boa noite. É possível exibir o feed de uma hashtag?
Eduardo Cardillo
Olá Leandro, sim é possível mas não implementamos nada do tipo ainda. Sugiro buscar plugins e estuda-las! 😉
Sérgio
Boa noite,
Tenho direitos de imagem para repostar alguns conteúdos de influenciadores no perfil do Instagram da minha marca.
Se eu mostrar o feed desse perfil do Instagram no site da marca usando essa api, estarei violando os direitos de imagem que tenho hoje? Eu não tenho direito de repostar no site da marca, mas entendo que não é uma postagem e sim um espelhamento do perfil do Insta. Não sei se alguém aí entende do assunto mas não custa perguntar.
Abs
Eduardo Cardillo
Olá Sérgio, essa questão é bem séria, e sua resposta depende do que está estipulado em seu contrato. Seria interessante consultar um advogado, e sempre detalhar bem seu contrato.
Leonan Teixeira
Olá, esse codigo funciona no Magento?
Eduardo Cardillo
Olá Leonan, sim esse código funciona em qualquer site que utilize PhP!
Rodrigo Souza
Bom dia, Pessoal.
Não estou conseguindo colocar este código html no “Editor de Sites da LocalWeb”. Acho que não aceita essa parte do php. Esse editor de site é um sisteminha web que ajuda a gente, um pouco leigo, a fazer seu próprio site. O site tem umas ferramentas na lateral que eu posso adicionar imagens, textos, galeria, videos, formulario e o também tem a ferramenta Código, que é onde se coloca alguma coisa de código. Um tempo atrás eu fui em um site pra me disponibilizar um iframe. Consegui, coloquei o código e funcionou para mostrar umas 06 imagens no instagram, mas apresentou problema depois e no celular nao abria. Entao excluí e estou tentando colocar algum código mais original q nao fica aparecendo propaganda. Entao cheguei aqui no tok digital. Sera que alguem pode me ajudar a me informar o codigo html pra eu colocar aqui na ferramenta? Sobre o Access token, eu consegui direitinho, mas quando eu fui colocar no codigo, nao está aparecendo. Nao sei se é por causa dessa parte do php.
Eduardo Cardillo
Olá Rodrigo, realmente precisa tratar a informação, só facilitamos a parte de criar o Token mesmo para mostrar as imagens formatadas é preciso desenvolver algo…
hIGOR soLER
fALA GALERA TUDO BEM?
eDUARDO, EU FIZ O PASSO A PASSO CERTINHO, PORÉM APARECE A INFORMAÇÃO ABAIXO:
stdClass Object ( [meta] => stdClass Object ( [code] => 400 [error_type] => OAuthAccessTokenException [error_message] => The access_token provided is invalid. ) )
coMO DEVO PROSSEGUIR?
Eduardo Cardillo
Olá Higor,
Segundo a mensagem vc. está usando um Access Token inválido! Verifique o que está digitado em seu código.
Marcelo
Olá eduardo, tudo bem? obrigado pelas dicas. Seria possível colocar em seu site php post do instagram com uma determinada hashtag? por exemplo: quero colocar em meu site conteudo do instagram que tenha a hashtag com o nome da minha cidade. Seria possível? Obrigado.
Eduardo Cardillo
Olá Marcelo, tudo bem e você? Ainda não utilizamos essa funcionalidade, mas com certeza vai encontrar o caminho na documentação do Instagram, em WordPress existem alguns plugins que fazem isso já…