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 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!