Incorporar Posts do Instagram no Site (Atualizado 2024)

incorporar instagram no site
Tempo de leitura: 3 minuto(s)

A incorporação do jeito “fácil” até então foi descontinuada e completamente substituída por um processo de autenticação do App via Instagram Graph API do Facebook Developers e geração de tokens de 90 dias.
A API de exibição básica do Instagram permite que os usuários do seu site visualizem informações básicas do perfil, fotos e vídeos de suas contas do Instagram.

Configurar a API

  1. Siga as instruções pelo computador (PC)
  2. Criar novo app tipo “Consumidor” na plataforma Meta for Developers
  3. Menu Produtos > Adicionar produto > Configurar “Exibição Básica do Instagram”
  4. Menu Funções > Testadores do Instagram > Adicionar a conta desejada do Instagram.
  5. Acessar o Instagram:  Configurações da conta > Menu Aplicativos e Sites > Aba Convites do Testador > Autorizar (OK)
  6. Na plataforma Facebook Developers: Acessar Menu Exibição Básica do Instagram > Exibição Básica
  7. Localizar seção “User Token Generator” > Clicar no botão “Generate Token”
  8. No seu site, Com qualquer biblioteca como jQuery ou Axios, ajax diretamente, ou mesmo CURL, consumir a API e exibir as imagens:

Código no site para consumir a API e exibir as imagens

<!-- Local onde desejamos renderizar os posts recentes -->
<div id="insta"></div>
    var baseHref = document.getElementsByTagName('base')[0].href;
    /*
    Arquivo contendo o token. Crie esse arquivo e cole nele o token gerado após clicar em "Generate Token" na plataforma do facebook. Apos isso, use um script pra atualizar automaticamente (Confira o Script PHP que esta no fim desse post)
    */
    let url_token = baseHref+'/insta_token.txt';
    $.get(url_token).then(function(response_token){   
        const url = 'https://graph.instagram.com/me/media?access_token='+response_token+'&fields=media_url,media_type,caption,permalink,like_count';
        //percorremos as imagens recebidas
        $.get(url).then(function(response){
            let images = response.data;
            let images_content = '<div class="row">';
            for(let c = 0; c < 16; c++){
                let pic = images[c];
                
              	//Se quiser pular os videos
                if(pic.media_type !== 'IMAGE'){
                    continue;
                }
                
                let caption = pic.caption !== null ? pic.caption : '';
                images_content += '<div class="col-4 insta"><a target="_target" href="'+pic.permalink+'">'
                + '<figure>'
                + '<img title="'+caption+'" alt="'+caption+'" src="'+pic.media_url+'" width="128" class="img-fluid lazyload">'
                + '</figure>'
                + '</a></div>';
            }
            images_content += '</div>';
            $('#insta').html(images_content);
        });
    });

Gerando o token de teste pela primeira vez

Na plataforma Facebook Developers: Acessar Menu Exibição Básica do Instagram > Exibição BásicaLocalizar seção “User Token Generator” > Clicar no botão “Generate Token” > Autenticar com a conta do testador do Instagram > copiar novo token

Esse token expira dentro de 60 dias. você pode renovar manualmente repetindo o processo acima ou programar uma renovação automática a partir de uma rotina em sua aplicação via chamada de API da sua plataforma de acordo com a documentação (exemplo e script a seguir)

Renovando o token de teste

curl -i -X GET "https://graph.instagram.com/refresh_access_token
  ?grant_type=ig_refresh_token
  &amp;access_token={cole-aqui-seu-token-atual}"

Bônus: Script PHP para atualizar o token automaticamente

<?php


$ch = curl_init();

// set URL and other appropriate options
$file_token = dirname(__FILE__).'/insta_token.txt';
$current_token = file_get_contents($file_token);

$url = "https://graph.instagram.com/refresh_access_token";


$dataArray = ['grant_type' => 'ig_refresh_token', 'access_token' => $current_token];

$querystring = http_build_query($dataArray);


curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);

curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);

curl_setopt($ch, CURLOPT_URL, $url."?".$querystring);

curl_setopt($ch, CURLOPT_TIMEOUT, 80);

// create a new cURL resource


// grab URL and pass it to the browser
$content = json_decode(curl_exec($ch));

if(isset($content->access_token)){
    file_put_contents($file_token, $content->access_token);
} else {
    echo 'falta access_token';
    var_dump($content);
}


// close cURL resource, and free up system resources
curl_close($ch);
?>

Basta então programar uma tarefa agendada periódica (cronjob) pra executar esse script em intervalos menores que 90 dias, mantendo seu token sempre atualizado.

Usar em produção

Após realizar a solicitação de Análise do Aplicativo você poderá colocar o app em modo Live e apresentar ao usuário a janela de autenticação, e o token de autorização é retornado para a url OAuth (definida no seu aplicativo) após o dono da conta inserir login e senha.

Conclusão

Pronto! Adapte o código acima ás suas necessidades, e suas imagens agora serão exibidas em todos os sites que fornecerem seu token de segurança.

Quer saber mais sobre como funciona? Fale com um desenvolvedor agora mesmo!
Inscrever-se
Notify of
guest
2 Comentários
Mais antigos
Mais recentes Mais votados
Inline Feedbacks
View all comments
Jean
Jean
1 ano atrás

Achei muito útil, mas estou com um pequeno problema. Eu tenho vários clientes e eu preciso configurar para cada um deles, e isso é bem custoso em questão de tempo, pois preciso entrar na máquina de cada um deles para configurar. Tentei fazer direto na minha conta, mas também não é possível, uma vez que precisaria logar na conta do cliente toda vez que fosse fazer. Existe um jeito de criar esses tokens mais facilmente para vários clientes?