Incorporar Posts do Instagram no Site (Atualizado 2024)
Configurar a API
- Siga as instruções pelo computador (PC)
- Criar novo app tipo “Consumidor” na plataforma Meta for Developers
- Menu Produtos > Adicionar produto > Configurar “Exibição Básica do Instagram”
- Menu Funções > Testadores do Instagram > Adicionar a conta desejada do Instagram.
- Acessar o Instagram: Configurações da conta > Menu Aplicativos e Sites > Aba Convites do Testador > Autorizar (OK)
- Na plataforma Facebook Developers: Acessar Menu Exibição Básica do Instagram > Exibição Básica
- Localizar seção “User Token Generator” > Clicar no botão “Generate Token”
- 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
&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!
WhatsApp
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?
Cada cliente precisa autorizar manualmente. Realmente não é uma solução para integração com dezenas ou centenas de clientes. Parece que dificultaram o processo justamente pra barrar o seu caso de uso: para impedir a integração em larga escala ou “revenda” da solução deles.
Essa integração no nível mais perfeito deve permitir que seus clientes cliquem em um botão “Autorizar acesso”, daí abre um pop-up, o cliente faz login na conta dele, aceita integração com toda uma descrição explicativa: ex: “Você aceita integrar com App do Jean?”. O cliente escolhe Sim ou Não … daí ele autoriza e uma resposta é enviada pro seu endpoint no seu sistema “Cliente João Fulano aceitou integrar. O token do João Fulano é T87975641KEN” e aí sua aplicação consegue exibir os posts dele usando o token.