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.
botao-registro-instagram

Neste momento, o Instagram mostra a lista de clientes registrados, se você ainda não tem, clique em “Register a New Client”.
botao-registro-cliente-instagram

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).

formulario-registro-clietne

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”.
aba-seguranca-formulario-cliente-instagram

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.