Mostrar feed do Instagram no site
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.
Comentários