O código antigo deste tópico (script InstagramFeed, do sowecms) não funciona mais. Ele tentava ler o perfil direto da página do Instagram, sem conexão oficial, e o Instagram bloqueia esse tipo de leitura. Por isso o feed sumia ou aparecia em branco, como vários lojistas relataram nas respostas abaixo.
Se você ainda tem esse código na loja, apague-o. Ele só carrega um script externo que não exibe nada.
O caminho que funciona hoje é usar um widget de feed do Instagram com conexão oficial. Você conecta a sua conta do Instagram no site do widget, e ele gera um código para colar na loja.
1. Gere o código do widget
Existem vários serviços desse tipo, por exemplo SnapWidget, Elfsight, Behold e LightWidget. Escolha um, confira no site dele os planos e limites, e então:
- Crie a conta no serviço escolhido.
- Conecte a sua conta do Instagram pelo botão de login do próprio serviço. Alguns serviços pedem que a conta do Instagram seja profissional (comercial ou criador de conteúdo).
- Ajuste o visual do feed (quantidade de fotos, colunas, espaçamento).
- Copie o código de incorporação (embed) que o serviço gerar.
2. Cole o código na loja
Primeiro veja qual é a versão da sua loja. No painel, clique em Editar frente de loja:
- Se abrir o editor antigo, com os menus Páginas e Layout, siga a opção A.
- Se abrir o editor com os menus Páginas padrão e Configurações e layout, a sua loja é Cloud Commerce. Siga a opção B.
Opção A: loja com o editor antigo
- No painel, clique em Editar frente de loja.
- Abra Páginas > Página inicial (ou outra página onde quer mostrar o feed).
- Em Seções, adicione uma nova seção do tipo Código HTML.
- Cole o código do widget no campo Conteúdo HTML customizado.
- Arraste a seção para a posição desejada e publique.
Passo a passo com imagens: Como inserir um conteúdo customizado/html na página inicial
Se o código do widget vier em duas partes (um <script> e um <div>), você também pode colocar o <script> em Layout > Inserir código, no campo HTML antes de , e deixar só o <div> na seção Código HTML. Veja: Como inserir códigos em /body?
Opção B: loja Cloud Commerce
- No painel, clique em Editar frente de loja.
- Abra Páginas padrão > Página inicial.
- Em Seções, adicione uma seção do tipo HTML customizado.
- Cole o código do widget no campo HTML customizado.
- Posicione a seção e publique.
Se o código vier em duas partes, coloque o <script> em Configurações e layout > Layout base > Código customizado, no campo HTML , e deixe só o <div> na seção HTML customizado.
3. Confira
Depois de publicar, aguarde alguns minutos e abra a loja em uma aba anônima, no computador e no celular. Se o feed não aparecer, confira no site do widget se a conta do Instagram continua conectada.
Alternativa sem widget
Se preferir não depender de serviço externo, use uma seção de banners na página inicial (Grid de banners no editor antigo, Grade de banners no Cloud Commerce) com algumas fotos do Instagram, cada uma com link para o post ou para o seu perfil. As imagens ficam na sua loja, mas você precisa trocá-las manualmente.
Se colou o código e o feed não aparece, abra um ticket informando o nome do serviço de widget usado, a página da loja onde colou o código e o código colado.
