Se você já tentou incorporar postagens do Instagram no seu site, provavelmente esbarrou na mesma barreira: a incorporação nativa do Instagram é um post, um snippet de código, sem atualizações automáticas. Existe uma maneira melhor. Você pode incorporar um feed do Instagram no seu site que puxe novas fotos, Reels e carrosséis automaticamente — sem trocas manuais a cada postagem.
Este guia mostra como configurar tudo usando o widget Instagram Feed da Elfsight — uma opção sem código que funciona no WordPress, Wix, Shopify, Squarespace e em qualquer plataforma que aceite HTML personalizado. Também cobrimos a incorporação nativa do Instagram e a abordagem da API, para que você possa escolher o método que melhor se adapte à sua configuração.
- Um fluxo de trabalho em 4 etapas para colocar seu feed do Instagram no ar em minutos
- Como escolher entre feeds de perfil, feeds de hashtag e embeds de posts únicos
- Guia completo de layout, estilo e configuração de origem
- Métodos alternativos, incluindo a abordagem manual com iframe
- Dicas de otimização para desempenho, filtragem e exibição móvel
Início rápido: incorpore o Feed do Instagram no seu site
Se você já sabe o que quer, aqui está o caminho direto do zero até um feed funcionando:
- Abra o editor de Feed do Instagram e selecione um modelo.
- Fontes
- Clique em “Adicionar ao Site” para obter o código de incorporação.
- Cole o código em um bloco HTML Personalizado e publique.
Construa seu widget de feed do Instagram no editor interativo abaixo ↓
Como incorporar o feed do Instagram no site: suas opções
Existem apenas três maneiras de fazer isso, e nem todas são igualmente práticas. Abaixo, uma comparação honesta dos métodos disponíveis:
| Método | Dificuldade | Customização | Atualizações automáticas | Preço |
|---|---|---|---|---|
| Elfsight Instagram Feed | Sem código | Alta personalização (layout, cores, popups, filtros, botões de CTA) | Sim (a cada 48 horas) | Plano gratuito ou pago a partir de $5/mês |
| Incorporação nativa do Instagram (oEmbed) | Baixo (copiar e colar por post) | Minimal (estilo de cartão padrão do Instagram) | Não (estático por postagem) | Gratuito |
| Abordagem de API | Alta | Total (você monta tudo) | Sim (se você codificá-lo) | Tempo de Desenvolvimento |
Resumo: O Elfsight é a forma mais rápida de adicionar um feed continuamente atualizado e estilizado sem código. Embeds nativos funcionam para alguns posts estáticos, mas não escalam; já a API oferece controle total – porém exige um desenvolvedor para configuração e mudanças contínuas.
Tipos de Embeds do Instagram: Feed, Mural, Reels e Hashtags
O tipo de incorporação certo depende do que você quer que os visitantes vejam. A maioria das pessoas costuma exibir tudo do feed, mas nem sempre é a melhor opção. Aqui está o que cada tipo realmente faz:
| Tipo de Incorporar | O que mostra | Melhor para |
|---|---|---|
| Feed de Perfil | Publicações mais recentes de uma conta pública do Instagram | Páginas da marca, sites de portfólio, seções “seguir-nos” |
| Feed de Hashtags | Posts marcados com uma hashtag específica | Campanhas de Conteúdo Gerado pelo Usuário, cobertura de eventos, conteúdo da comunidade |
| Mural do Instagram | Layout em grade puxando de uma ou mais fontes | Páginas de prova social dedicadas, galerias visuais |
| Reels | Vídeos Reels da sua conta | Demonstrações de produto, tutoriais, conteúdo dos bastidores |
| Publicação única | Uma postagem específica no Instagram | Artigos de blog, depoimentos, conteúdo em destaque |
Alguns pontos importantes
- Feeds de Perfil requerem que a conta do Instagram seja pública. Perfis privados, com restrição de idade ou de país não exibirão conteúdo.
- Feeds de hashtags buscam publicações marcadas com essa hashtag, mas o Instagram não fornece nomes de usuário para publicações provenientes de hashtags, então você não pode filtrar um feed de hashtags por contas específicas.
- Reels aparecem no feed ao lado de posts regulares, exibidos no mesmo aspecto das fotos (quadrado ou paisagem). A exibição na vertical requer CSS personalizado.
- Stories do Instagram não são suportadas por nenhuma ferramenta de incorporação de terceiros, incluindo o Elfsight. Apenas posts, Reels e conteúdo em carrossel podem ser incorporados.
Se você quiser combinar o Instagram com conteúdo de outras plataformas sociais em um feed único, veja como inserir um mural de redes sociais no seu site.
Prefere assistir? Veja rapidamente uma visão geral em vídeo do processo de configuração:
Guia Passo a Passo: Configurando o Widget de Feed do Instagram
Com o tipo de incorporação definido, aqui está o guia completo com dicas práticas. Cada etapa corresponde a uma aba no editor do Elfsight — o que faz, o que alterar e o que manter.
Etapa 1: Abra o editor e escolha um template
editor opens with a template gallery showing several starting points depending on your preferred layout: Profile Widget, Grid, Hashtag Showcase, Post Slider, etc.”>O construtor abre com uma galeria de templates apresentando várias opções iniciais, dependendo do layout que você prefere: Widget de Perfil, Grade, Vitrine de Hashtags, Slider de Posts, etc.
Cada modelo é uma combinação pré-configurada de layout, estilo de publicação e esquema de cores. Você pode personalizar tudo após selecionar um, então escolha aquele que mais se aproxima do visual desejado.
Etapa 2: Conecte sua fonte do Instagram
Clique na aba Fontes na barra lateral esquerda. Você verá o painel Adicionar Fonte do Instagram com duas opções de tipo de fonte:
- Conta — insira um nome de usuário público do Instagram ou URL do perfil
- Hashtag — insira uma hashtag para buscar todas as publicações públicas marcadas com ela
Você pode adicionar até 5 fontes por widget, misturando contas e hashtags. Se quiser um feed de hashtags do Instagram no seu site junto à sua conta de marca, adicione ambas como fontes separadas dentro do mesmo widget.
Etapa 3: Escolha o layout
Em seguida, vá para a guia Layout. O widget oferece dois tipos básicos de layout:
- Slider — uma faixa horizontal de publicações que os visitantes navegam com setas ou gestos de deslizar
- Grade — uma grade tradicional de posts com um botão “Carregar mais”
Ao selecionar o layout, você encontrará painéis adicionais de configuração:
- Colunas & Linhas – escolha Auto ou Manual para definir contagens de colunas/linhas, espaçamento e largura
- Cabeçalho – configure o cabeçalho do perfil (avatar, nome da conta, bio, contagem de seguidores, botão Seguir)
- Configurações do Slider – controle de setas, paginação, reprodução automática e comportamento de rolagem
- Título do Feed – adicione um título personalizado opcional acima do feed
Se você quiser adicionar um mural do Instagram ao seu site, o layout em grade com 3–4 colunas e várias linhas cria o visual clássico de mural.
Etapa 4: Personalizar a aparência da postagem
A aba Post controla como cada post fica dentro do feed. Existem duas configurações principais aqui:
Estilo de Publicação
Percorra os modelos de post disponíveis usando as setas:
- Bloco — exibição limpa apenas com fotos, sem detalhes visíveis. Ao passar o mouse, surge uma sobreposição com curtidas, comentários e uma legenda.
- Clássico — espelha o layout autêntico de uma postagem no Instagram, com nome de usuário, data, legenda, contagens de engajamento e um botão de compartilhamento.
Proporção da Imagem por padrão é 1:1 (Quadrado Clássico), mas você pode mudar para 4:5 (Retrato) se necessário.
Elementos da postagem
Alternar, individualmente, quais detalhes aparecem em cada cartão de postagem:
- Usuário
- Data
- Link do Instagram
- Contagem de Curtidas
- Contagem de Comentários
- Compartilhar
- Texto (legenda)
A ação após o clique também é configurável: seu conteúdo pode abrir em uma janela pop-up, no Instagram, ou não abrir se preferir.
Etapa 5: Defina o esquema de cores e o estilo
A aba Estilo oferece controle sobre a identidade visual do widget. Comece pela lista suspensa Esquema de Cores, que oferece 10 opções predefinidas e uma opção Personalizada.
Personalizado desbloqueia controles de cor por elemento em Personalizar Elementos:
- Cabeçalho — plano de fundo, texto, botão de seguir, texto do botão de seguir
- Post — plano de fundo da sobreposição, texto da sobreposição
- Setas — cores de botões e textos
- Popup — configurações de cor individuais para elementos pop-up
- CSS Personalizado — um editor para estilos avançados além das opções integradas
Se o seu site utiliza uma paleta de marca específica, a opção Personalizar permite combinar o feed exatamente. Para a maioria dos sites, escolher um preset e ajustar uma ou duas cores resolve 90% do caminho — não complique esta etapa.
Etapa 6: Configurar idioma e configurações avançadas
A aba Configurações cobre duas áreas:
- Idioma — selecione o idioma de exibição para os elementos da interface do widget
- JS Personalizado — um campo de código para adicionar JavaScript para rastreamento de eventos ou integrações avançadas
Para a maioria das configurações, você só precisará alterar o idioma se o seu site atender a um público não anglófono. A opção Custom JS está disponível para quem deseja rastrear interações específicas via Google Analytics ou outras ferramentas.
Etapa 7: Obtenha o código de incorporação e instale
Assim que estiver satisfeito com a pré-visualização, clique no botão verde “Adicionar ao site gratuitamente” na parte inferior do editor ou em “Publicar” no painel do Elfsight para exibir seu código de integração — um trecho HTML curto.
Copie o código e cole no seu site. A colocação exata depende da sua plataforma: a incorporação é compatível com WordPress, Wix, Squarespace, Shopify, Webflow, Elementor, sites em HTML e outras configurações de CMS.
Checklist rápido de solução de problemas
- Feed não está aparecendo: Certifique-se de que o código esteja em um Bloco de HTML Personalizado ou em um Bloco de Código, não em um bloco de texto padrão. Limpe quaisquer plugins de cache após a instalação.
- Feed vazio ou posts incorretos: A conta do Instagram precisa ser pública. Perfis privados, com restrição de idade ou de país não serão carregados via a conexão Conta/Hashtag.
- New posts missing: Content refreshes every 48 hours. If posts are still absent after that, verify the source URL and that the account hasn’t gone private.
- Problemas de layout móvel: Se estiver usando configurações manuais de coluna/linha, configure os valores específicos para dispositivos móveis separadamente na aba Layout — o widget não sincroniza automaticamente as configurações de desktop com o móvel no modo Manual.
Outras formas de adicionar o feed do Instagram ao site
O widget Elfsight não é a única opção. Veja como configurar um feed do Instagram usando outros métodos, com as limitações explicadas.
Método 1: oEmbed nativo do Instagram (incorporação de publicação única)
O Instagram oferece uma opção de incorporação integrada para postagens individuais. Isso coloca um cartão de postagem único na sua página — com a foto, legenda, curtidas e um link para o original.
- Abra a postagem do Instagram que você quer incorporar no instagram.com (desktop).
- Clique no ícone de menu com três pontos (⋯) na postagem e selecione Incorporar.
- Copie o código de incorporação fornecido.
- Cole o código em um bloco HTML personalizado no seu site e publique.
Método 2: Feed do Instagram no site via a API do Instagram
Para desenvolvedores que desejam controle total, Instagram’s API permite extrair dados de postagens programaticamente e renderizá-los com HTML, CSS e JavaScript personalizados.
- Troque sua conta do Instagram para uma Conta Comercial ou Criador (se ainda não for).
- Crie um app para desenvolvedores Meta e adicione o produto Instagram Graph API.
- Vincule uma Página do Facebook à sua conta do Instagram e configure as permissões OAuth.
- Gere um token de acesso de longa duração por meio do fluxo de autorização.
- Use os endpoints da Graph API para buscar suas mídias e montar um frontend para exibi-las.
Dicas de otimização para o seu feed do Instagram
Com o feed ativo, não fique apenas com as opções padrão. Estas são as coisas que você pode ajustar imediatamente após a instalação inicial para obter o melhor funcionamento.
- Use filtros para selecionar o conteúdo. Na aba Fontes, você pode usar os filtros “Mostrar posts contendo” e “Ocultar posts contendo” para incluir ou excluir posts por hashtag, nome de usuário ou URL, exibindo apenas o que se encaixa na página (por exemplo, produtos ou depoimentos).
- Limite de posts para controlar o tempo de carregamento. A configuração “Total Number of Posts” determina quantos posts são carregados. Se o seu feed ficar em uma landing page de alto tráfego, exibir 6–9 posts em vez de 20+ mantém o tempo de carregamento rápido, sem deixar de mostrar conteúdo recente.
- Coloque-o onde os usuários já rolam. Instagram feeds rendem melhor abaixo da dobra em páginas de produto, em seções dedicadas de “prova social” ou acima do rodapé – não acima da dobra, onde competem com a sua CTA.
- Use o layout Tile para feeds visuais. Se o seu Instagram é principalmente fotografia de produto ou imagens de estilo de vida, o template Tile remove legendas e metadados, deixando que os visuais falem por si.
- Nas abas Layout, altere para Manual e defina as colunas móveis para 1-2, mesmo que no desktop você rode 3-4, para que as imagens não fiquem pequenas demais para tocar na tela.
- Adicione CTAs no popup. Quando os visitantes clicam em um post e o popup abre, botões de Chamada para Ação (CTA) personalizados podem redirecioná-los para a página do produto, formulário de inscrição ou link de agendamento. Isso transforma a navegação passiva em um caminho de conversão.
Equipe Real Usando Instagram Feed
Andrew Chin runs Gigi Beauty PMU, um site de estúdio de maquiagem permanente construído no Squarespace. Ele adicionou o widget Instagram Feed da Elfsight à página inicial para exibir os resultados dos clientes — fotos de antes e depois, vídeos de procedimentos e momentos de clientes satisfeitos — diretamente da conta do Instagram do estúdio.
Elfsight me permitiu ter a liberdade criativa que eu queria, sem os problemas técnicos que enfrentava antes. E o melhor — não é necessário um desenvolvedor.
O feed fica ao lado de uma galeria de fotos, vídeos do YouTube e widgets de avaliações, criando uma seção de provas visuais que permite aos clientes em potencial avaliar o trabalho sem sair do site e ficarem confiantes para agendar.
A abordagem de Andrew mostra um padrão comum para negócios de serviço: usar o feed do Instagram como um portfólio dinâmico que se atualiza automaticamente à medida que novas fotos de clientes são postadas no Instagram.
Perguntas Frequentes
Posso incorporar um feed do Instagram no meu site gratuitamente?
O feed do Instagram incorporado é atualizado automaticamente com novas postagens?
Posso incorporar Instagram Reels no meu site junto com as postagens regulares?
O widget de feed do Instagram vai deixar meu site mais lento?
O feed do Instagram funciona em dispositivos móveis?
Conclusão
Agora você tem um guia completo para incorporar o feed do Instagram no seu site: desde escolher o tipo de incorporação adequado, configurar fontes e layouts, até instalar o código em qualquer plataforma. Quer você utilize uma ferramenta de widget, a incorporação nativa do Instagram ou uma construção via API personalizada, os passos de configuração acima cobrem cada caminho.
