Exibir e Incorporar Posts do Instagram no Site (Atualizado 2022)
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
- Siga as instruções pelo computador (PC)
- Criar novo app tipo “Consumidor” na plataforma Facebook 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>
//defina aqui o token gerado após clicar em "Generate Token"
var baseHref = document.getElementsByTagName('base')[0].href;
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];
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
&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 2329+ vezes. Obrigado por ler até aqui! Gostou do conteúdo? Fique à vontade pra copiar e compartilhar. Ajude sempre seus colegas. O conhecimento muda vidas!
Categorias relacionadas
