Exibir e Incorporar Posts do Instagram no Site (Atualizado 2022)
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!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
