versão carregada: quinta, 30 de junho de 2022

Exibir e Incorporar Posts do Instagram no Site (Atualizado 2022)

A API de exibição básica do Instagram permite que os usuários do seu aplicativo recebam informações básicas do perfil, fotos e vídeos de suas contas do Instagram.
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 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 90 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

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.

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!
Este artigo foi lido 2830+ vezes. Obrigado por ler até aqui! Fique à vontade pra copiar e compartilhar. Ajude sempre seus colegas. O conhecimento muda vidas!

O conteudo foi útil? Isso é ótimo. Quer incentivar mais posts como esse? Mostre seu apoio com qualquer valor.
Chave PIX: d0311e58-cb6e-4d47-b3d8-3d4254763ce7

Inscrever-se
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments


EnglishPortuguês
0
Would love your thoughts, please comment.x
()
x