Como incorporar um feed do Instagram em seu site (Guia passo a passo)

Se o seu site ainda estiver com a mesma aparência de três meses atrás, os visitantes percebem. E uma das maneiras mais rápidas de corrigir isso, sem mexer em uma única linha de código, é importar o conteúdo do Instagram diretamente para o seu site.

Um feed do Instagram incorporado faz duas coisas ao mesmo tempo. Mantém sua página inicial ou páginas de destino com uma aparência ativa e oferece aos visitantes prova social que eles podem ver e acompanhar, em vez de apenas ler. O problema é que o Instagram não facilita isso por conta própria. Veja o que realmente funciona e como configurar corretamente.

Resposta rápida:

Para incorporar um feed do Instagram em seu site, você pode obter o código de incorporação de cada postagem e colá-lo em seu site ou conectar sua conta do Instagram a um agregador de mídias sociais como o Instagram. TagembedEm seguida, escolha se deseja exibir as publicações por nome de usuário, hashtag ou menção, personalize o layout do widget e copie o código de incorporação gerado para o seu CMS (WordPress, Shopify, Squarespace, Webflow, Wix ou HTML simples). Não é necessário nenhum conhecimento de desenvolvedor ou configuração de API.

Quais são os benefícios de incorporar um feed do Instagram em seu site?

Antes de abordarmos o "como", é importante esclarecer o "porquê", pois isso influencia a escolha do método.

Um feed do Instagram ao vivo no seu site:

• Mantém as páginas atualizadas automaticamente. Publique no Instagram e seu site será atualizado sem que ninguém precise mexer no CMS.
• Gera confiança mais rápido do que fotos de banco de imagens. Publicações reais, clientes reais, momentos reais.
• Oferece aos visitantes um motivo para permanecerem mais tempo, especialmente em páginas de produtos, páginas de destino e páginas iniciais.
• Converta seus seguidores do Instagram em tráfego para o seu site e vice-versa, já que a maioria widgets de feed de mídia social Inclua um link para a publicação original ou para o seu perfil.

Nada disso acontece se você ficar preso tirando screenshots de posts manualmente toda semana, que é por onde a maioria das pessoas começa antes de perceber que não é escalável.

Três maneiras de incorporar o Instagram em um site:

Na verdade, existem apenas três caminhos aqui, e cada um resolve um problema diferente.

1. Incorporação nativa do Instagram (somente para uma única publicação)

O Instagram permite incorporar uma publicação ou um Reel por vez. Abra a publicação no computador, clique no menu de três pontos, selecione "Incorporar" e copie o código exibido. Cole esse código em um bloco HTML do seu site.

Isso funciona bem se você quiser inserir uma publicação específica dentro de um artigo de blog. O problema surge quando você precisa de um feed completo, pois não há como exibir várias publicações, filtrar por hashtag ou atualizar automaticamente. Você teria que voltar aqui toda semana para trocar manualmente os códigos de incorporação. Também é importante saber que as incorporações nativas carregam os próprios scripts de rastreamento do Instagram na sua página, o que pode complicar a conformidade com o GDPR, dependendo do seu público.

2. API Graph do Instagram (Faça você mesmo)

Para desenvolvedores, API Graph do Instagram Permite extrair dados do feed diretamente e criar uma exibição totalmente personalizada. Você obtém controle completo sobre o layout, mas também herda a manutenção: atualizações de tokens, limites de taxa, alterações na versão da API e o trabalho de renderização do frontend. Essa abordagem faz sentido se você tiver recursos de engenharia disponíveis e requisitos de design muito específicos. Para a maioria das equipes de marketing, é um exagero.

3. Um agregador de mídias sociais (O meio-termo prático)

É aqui que a maioria dos sites acaba, e por um bom motivo. Uma ferramenta como Tagembed Conecta-se ao Instagram, extrai automaticamente as publicações por perfil, hashtag ou menção e oferece um widget pronto para uso que você pode personalizar e incorporar em qualquer site com apenas uma linha de código. Sem necessidade de gerenciar tokens de API, sem desenvolvedores e com o feed atualizado automaticamente em segundo plano.

Veja como os três métodos se comparam lado a lado:

Forma	Mais Adequada Para	Esforço técnico	Completa
Incorporação nativa do Instagram	Apresentando uma única postagem dentro de um blog ou página.	Baixo (copiar e colar)	Nenhum, atualizado manualmente
API de gráfico do Instagram	Sites empresariais que necessitam de um layout totalmente personalizado	Alto nível de exigência, requer um desenvolvedor.	Totalmente automatizado
Agregador de mídias sociais (Tagembed)	Equipes de marketing, pequenas empresas e a maioria dos sites	Baixo custo, sem necessidade de código.	Totalmente automatizado

Passo a passo: Como incorporar um feed do Instagram usando Tagembed?

Aqui está o processo real, do início ao fim.

Etapa 1: crie um Tagembed de Corretora

Crie uma conta gratuita. Você não precisa mexer com código em nenhum momento deste processo.

Passo 2: Adicione o Instagram como fonte.

Clique para criar um novo widget e escolha o Instagram como fonte. Você tem três maneiras de obter conteúdo:

• Por alça – Exibe publicações de um perfil específico do Instagram.
• Por Hashtag – Exibe publicações marcadas com uma hashtag específica, útil para campanhas ou conteúdo gerado pelo usuário.
• Por menção – Exibe publicações em que sua conta foi marcada, o que é ótimo para apresentar conteúdo de clientes.

Um detalhe importante a destacar: perfis públicos funcionam sem nenhuma configuração adicional, mas se a conta da qual você está extraindo os dados for privada, será necessário alterá-la para uma conta de Criador ou... Conta de negócios e conectar-se corretamente antes que suas postagens apareçam. De todos os problemas de configuração que as pessoas encontram, este é consistentemente o mais comum e raramente é um bug. Se o seu feed aparecer vazio logo após a conexão, verifique o tipo da sua conta antes de qualquer outra coisa.

Etapa 3: Personalize o layout do feed

Assim que sua fonte estiver conectada, você verá uma pré-visualização ao vivo que poderá ajustar. Escolha entre os formatos grade, carrossel, slider, alvenaria ou um... mural social O layout depende de onde você o colocar. Você também pode controlar:

• Número de publicações exibidas
• Contagem de colunas e linhas
• Cores, fontes e espaçamento que combinem com a sua marca.
• Se as legendas, curtidas ou nomes de usuário estão visíveis.
• Configurações de moderação, para que você possa aprovar ou ocultar publicações específicas antes que sejam publicadas.

Passo 4: Obtenha o código de incorporação

Quando o widget estiver configurado corretamente, clique no botão Publicar. Selecione a galeria desejada e, em seguida, escolha o layout desejado entre as opções disponíveis. Clique no botão “Gerar código”.

Passo 5: Cole-o em seu site

Depois de gerar o código de incorporação do Instagram, basta colá-lo no painel administrativo do seu site. No entanto, os passos exatos a partir daí dependem de onde seu site está hospedado, o que será explicado a seguir.

Como adicionar o código de incorporação do feed do Instagram em diferentes plataformas de sites:

Depois de gerar seu código de incorporação a partir de TagembedVocê pode adicioná-lo a praticamente qualquer construtor de sites ou CMS. O processo é basicamente o mesmo em todos os lugares: copie o código, encontre um bloco HTML personalizado ou de incorporação na sua plataforma, cole-o e publique.

1. Integrar o feed do Instagram em um site HTML

Adicionando um Feed do Instagram para um site HTML É simples e funciona em praticamente qualquer site estático. Siga estes passos para publicar o feed na sua página.

• Após configurar seu feed, clique em “Publicar” e escolha “HTML” como plataforma.
• Clique no botão "Copiar código" para copiar o código de incorporação gerado.
• Abra o arquivo HTML do seu site em um editor de texto e navegue até a seção onde o feed deve aparecer.
• Cole o código e salve o arquivo.
• Recarregue a página para ver a transmissão ao vivo.

2. Adicionar o feed do Instagram ao site Shopify

As lojas Shopify se beneficiam dos feeds do Instagram, especialmente nas seções de produtos e na página inicial, onde a prova social fica próxima ao botão de compra. Veja como incorporar um Feed do Instagram no Shopify .

• Clique em Publicar e escolha Shopify como seu CMS, depois copie o código.
• Faça login no painel de administração do Shopify e acesse a Loja Virtual.
• Selecione Temas e clique em Personalizar.
• No painel esquerdo, selecione Conteúdo Personalizado.
• Adicione um bloco Liquid personalizado e cole o código de incorporação nele.
• Clique em Salvar.

3. Exibir o feed do Instagram em um site WordPress

O WordPress é a plataforma mais comum para esse tipo de incorporação, e Tagembed Os slots são inseridos através do editor de blocos padrão. Estas são as etapas para adicionar um Widget do Instagram em um site WordPress.

• Acesse Publicar, selecione WordPress na lista de plataformas e copie o código de incorporação.
• Faça login no painel de administração do WordPress.
• Abra a página, postagem ou seção onde deseja visualizar o feed.
• Clique no botão (+) Adicionar bloco e escolha HTML personalizado.
• Cole o código e clique em Atualizar.

4. Inserir o feed do Instagram em um site Elementor

Se você estiver criando páginas com o Elementor, o feed será inserido por meio do widget HTML do Elementor, em vez do editor padrão do WordPress. Veja a seguir o processo para incorporar um feed. Widget do Instagram em um site Elementor.

• Clique em Publicar e selecione “Outro” como sua plataforma, depois copie o código.
• Faça login no seu site Elementor e abra a página ou postagem que deseja editar.
• No editor Elementor, encontre o widget HTML ou arraste um novo para a página.
• Cole o código de incorporação no widget HTML.
• Salve suas alterações.

5. Incorporar o feed do Instagram no site Squarespace

O Squarespace exige que o código seja inserido em um bloco de código dedicado, e não em uma seção de texto geral. Siga estas etapas para Adicionar feed do Instagram ao site Squarespace corretamente.

• Clique em Publicar, escolha Squarespace e clique em “Obter código” para gerar o código de incorporação.
• Copie o código para a área de transferência.
• Faça login na sua conta Squarespace e navegue até a página desejada.
• Edite a página e adicione um novo bloco de conteúdo.
• Selecione “Código” nas opções do bloco e cole o código de incorporação.
• Salve suas alterações.

6. Incluir o feed do Instagram no site do Webflow

O Webflow renderiza os elementos incorporados em tempo real dentro do Designer, permitindo que você visualize o posicionamento antes de publicar qualquer coisa. Veja como configurar um Widget do Instagram no site do Webflow.

• Clique em Publicar e escolha “Outro” como sua plataforma CMS.
• Defina a largura e a altura do widget e, em seguida, clique em Copiar código.
• Faça login no painel de administração do Webflow e acesse a página que deseja editar.
• Clique em Adicionar elemento, role até “Incorporar” e arraste-o para a página.
• Cole o código e salve as alterações.

7. Inserir o feed do Instagram no site Wix

O Wix lida com conteúdo incorporado através do elemento iFrame em vez de um bloco de código simples, o que pode confundir os usuários na primeira vez. Estes são os passos a seguir para incluir o conteúdo incorporado: Feed do Instagram no Wix.

• Clique em Publicar, selecione Wix como sua plataforma, ajuste a largura e a altura e copie o código.
• Faça login no Wix e abra a página onde o feed deve aparecer.
• Clique no botão '+Adicionar', depois em 'Mais' e selecione 'HTML iFrame' nas opções de incorporação.
• Cole o código gerado no campo de código.
• Clique em 'Aplicar' para salvar.

8. Integre o feed do Instagram ao seu site Weebly.

O editor do Weebly usa seu próprio painel de incorporação, separado dos elementos de conteúdo padrão. Veja como adicionar um Widget do Instagram para o site Weebly.

• Clique em Publicar, escolha “Outro” como seu CMS, ajuste a largura e a altura, se necessário, e copie o código.
• Acesse a página do seu site Weebly onde o feed deve aparecer.
• Abra a opção 'Código de incorporação' no editor.
• Selecione o elemento 'caixa HTML' e escolha 'Editar HTML personalizado'.
• Cole o código e salve.

9. Inclua o feed do Instagram no site BigCommerce.

O BigCommerce é uma escolha comum para lojas online, e o feed pode ser exibido em uma página independente ou diretamente em um modelo de tema. Siga estas etapas para adicionar um Widget do Instagram para o aplicativo BigCommerce:

• Clique em Publicar, selecione “Outro” como sua plataforma e copie o código.
• Faça login na sua conta BigCommerce.
• Para uma página específica, acesse Loja > Páginas da Web ou, para uma página de produto ou página inicial, acesse Loja > Tema.
• Clique em Editar na página e, em seguida, mude para o editor HTML (procure o botão “<>” ou “Fonte”).
• Cole o código, visualize-o e publique a página.

10. Inserir o feed do Instagram no Google Sites

O Google Sites possui uma opção de incorporação dedicada integrada ao seu editor de páginas, o que o torna uma das plataformas mais fáceis de usar. Siga estes passos para Adicionar feed do Instagram aos sites do Google.

• Clique em Publicar e selecione “Outro” como sua plataforma. Ajuste a largura e a altura e, em seguida, copie o código.
• Faça login no Google Sites e abra a página que deseja editar.
• Clique em “Incorporar” no editor de páginas.
• Selecione “Incorporar código” e cole o código.
• Salve suas alterações.

11. Inclua o feed do Instagram no site da HubSpot.

O editor de landing pages do HubSpot incorpora o código HTML no rodapé da página, em vez de em um bloco de conteúdo visível. Veja como funciona.

• Clique em Publicar, selecione “Outro” como sua plataforma e copie o código.
• Faça login no HubSpot, acesse a seção Marketing e abra Páginas de destino.
• Selecione a página e clique em Editar.
• Acesse Arquivo > Configurações da página > Avançado.
• Cole o código no campo HTML do rodapé e, em seguida, salve e publique.

12. Incorporar Reels do Instagram no site do Discord

O Discord não suporta incorporação verdadeira como um site, então as postagens aparecem como links compartilhados em vez de um feed ao vivo. Aqui está a solução alternativa.

• Acesse o Instagram, encontre a publicação, clique nos três pontos e selecione “Copiar link”.
• Abra o Discord e acesse o servidor ou canal onde deseja compartilhar.
• Cole o link na caixa de bate-papo.
• Pressione “Enter” para compartilhar a publicação.

13. Inserir o feed do Instagram no OpenCart

O OpenCart gerencia elementos incorporados por meio do painel de Extensões, em vez de um editor de páginas, já que a maioria das páginas é gerada a partir de arquivos nativos. modelosEsses são os passos.

• Faça login no painel de administração do OpenCart.
• Acesse Extensões > Extensões > Conteúdo > Conteúdo HTML.
• Clique em Adicionar novo e cole o código de incorporação.
• Salve e atribua a um layout, como a página inicial, a página do produto ou a página de categoria.
• Atualize a página da sua loja para confirmar se o feed está ativo.

14. Incorporar o feed do Instagram em um site React

Em um site React, o feed é inserido como um componente renderizado em vez de um texto estático, já que o React não permite HTML bruto por padrão. Veja como adicioná-lo.

• Copie o código de incorporação React/JavaScript do Tagembed painel de controle.
• Abra seu projeto React e cole o código dentro de um componente usando dangerouslySetInnerHTML.
• Adicione o componente à página onde o feed deve aparecer.
• Salve e execute o aplicativo para confirmar se o feed está sendo exibido corretamente.

Independentemente da plataforma que você estiver usando, o processo básico é o mesmo: gerar o código, encontrar um bloco de HTML personalizado, código ou incorporação, colá-lo e publicar.

Incorporar o feed do Instagram: histórias reais de sucesso

Aqui estão alguns exemplos reais de sites e marcas que utilizam [a tecnologia/biblioteconomia/etc.] Tagembed para incorporar feeds do Instagram. 

1. ORT Universidade do Uruguai

O Universidade ORT do Uruguai A universidade incorporou um mural do Instagram ao vivo em seu site para mostrar a vida no campus, as conquistas dos alunos e os eventos em tempo real. Em vez de depender de imagens estáticas, a universidade exibiu conteúdo social atualizado, o que tornou o site mais dinâmico e autêntico. Isso incentivou os visitantes a passarem mais tempo explorando o site, ao mesmo tempo que ofereceu aos futuros alunos uma visão genuína da cultura do campus.

“A inclusão de um feed do Instagram ao vivo tornou nosso site muito mais dinâmico. Os futuros alunos agora podem acompanhar a vida no campus, os eventos e as conquistas em tempo real, tornando a experiência muito mais envolvente.”

2. Funne

Com um feed do Instagram ao vivo incorporado em seu site, Funne Garantimos que cada nova publicação no Instagram atualizasse automaticamente a presença online do site. O resultado foi um site com aparência sempre ativa, conteúdo visual atualizado e que reforçava a confiança do cliente por meio de depoimentos sociais constantes.

“Em vez de atualizar manualmente as imagens a cada poucas semanas, nosso site agora é atualizado automaticamente com o novo conteúdo do Instagram. É uma maneira fácil de manter o site com uma aparência ativa e moderna.”

Erros comuns que as pessoas cometem:

Algumas coisas que causam problemas constantemente e que vale a pena verificar antes de presumir que algo está quebrado:

• Estou tentando incorporar um perfil privado sem alternar para o modo Negócios/Criador. O feed simplesmente aparecerá vazio ou exibirá um erro.
• Sobrecarregar a página com muitas postagens simultaneamente. Isso torna o carregamento mais lento e prejudica a experiência em dispositivos móveis.
• Ignorando a moderação, especialmente com feeds de hashtags ou menções, onde você não controla o que é marcado.
• Não testado em dispositivos móveis. Um feed que fica ótimo em computadores pode comprometer o layout em telas menores se o widget não for responsivo.
• Esquecer de verificar as implicações do RGPD Se você estiver usando um conteúdo incorporado nativo e tiver visitantes na UE, isso ocorre porque os cookies de rastreamento do Instagram são carregados junto com ele.

Principais lições

Incorporar uma única publicação do Instagram é simples e não requer nenhuma ferramenta. Incorporação Um feed em tempo real e com atualizações constantes é um problema diferente, e é aí que um agregador adequado mostra seu valor. Se você deseja controle total e tem desenvolvedores à disposição, a API do Graph funciona. Para todos os outros, uma ferramenta como Tagembed Obtenha um feed do Instagram totalmente personalizado e com atualização automática em seu site em poucos minutos, sem nenhuma da manutenção que seria necessária para criá-lo do zero.

Próximos passos após a publicação do seu feed:

• Verifique a velocidade do seu site no Google PageSpeed ​​Insights para confirmar se o widget está carregando de forma assíncrona e não está atrasando o conteúdo principal.
• Teste o feed em dispositivos móveis, não apenas em computadores, pois problemas de layout tendem a aparecer primeiro nesses dispositivos.
• Defina regras de moderação se estiver usando uma hashtag ou uma lista de menções, para que publicações irrelevantes não passem despercebidas.