quinta, 23 de setembro de 2021
Banner verde e branco, vermelho e preto, com os dizeres: Desenvolvedor Web / Matteus Barbosa. Soluções tecnológicas planejadas para o seu negócio.

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

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 aplicativo recebam informações básicas do perfil, fotos e vídeos de suas contas do Instagram.
Siga as instruções pelo computador (PC).

Configurar a API

  1. Criar novo app tipo “Consumidor” na plataforma Facebook Developers
  2. Menu Produtos > Habilitar Instagram Graph API
  3. Menu Funções > Testadores do Instagram > Adicionar a conta desejada do Instagram:
  4. Acessar o Instagram:  Configurações da conta > Menu Aplicativos e Sites > Aba Convites do Testador > Autorizar (OK)
  5. Na plataforma Facebook Developers: Acessar Menu Exibição Básica do Instagram > Exibição Básica
  6. Localizar seção “User Token Generator” > Clicar no botão “Generate Token”
  7. 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

<div id="insta"></div>
$(function() {
            let REF = this;
             //defina aqui o token gerado após clicar em  "Generate Token"
              const token = "";
       
              const url = 'https://graph.instagram.com/me/media?access_token='+token+'&fields=media_url,media_type,caption,permalink';
  	//percorremos as imagens recebidas
              $.get(url).then(function(response){
                    let images = response.data;
                    let images_content = '<div class="row">';
                    for(let c = 0; c < images.length; c++){
                        let pic = images[c];
                        let caption = pic.caption !== null ? pic.caption : '';
                        images_content += '<div class="col-md-3"><a target="_target" href="'+pic.permalink+'"><img title="'+caption+'" alt="'+caption+'" src="'+pic.media_url+'" width="128"></a></div>';
                    }
                    images_content += '</div>';
                    $('#insta').html(images_content);
              });

});

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.

Este artigo foi lido 277+ vezes. Obrigado por ler até aqui! Gostou do conteúdo? Fique à vontade pra copiar e compartilhar. Ajude sempre seus colegas. O conhecimento muda vidas!
  • Página no LinkedIn
  • Página no GitHub
  • Perfil Stack Overflow
EnglishPortuguês