Como adicionar um feed de redes sociais ao Framer (sem código)

Já pode adicionar um feed de redes sociais ao vivo, avaliações do Google e UGC a qualquer site Framer arrastando um componente a partir do painel Insert. Sem código personalizado, sem depender de um developer.

Eis o problema: um site Framer pode ter um design impecável e ainda assim perder o negócio. Um design polido diz “somos profissionais.” Não diz “pessoas reais confiam em nós.”

Antes, fechar essa lacuna significava colar JavaScript num bloco de Custom Code e torcer para que sobrevivesse à próxima remodelação. Os clientes menos técnicos detestavam mexer nisso, e uma colagem errada podia partir a página inteira.

A EmbedSocial acabou de fechar essa lacuna com o componente EmbedSocial no Framer Marketplace, e este artigo mostra-lhe exatamente como usá-lo, desde a primeira conta EmbedSocial até um widget publicado.

Porque é que os sites Framer estáticos perdem vendas

Os visitantes decidem se confiam num negócio em segundos, e procuram uma coisa: prova de que outra pessoa já correu o risco.

Um site sem avaliações, sem feed social e sem clientes visíveis lê-se como não testado, mesmo que o design seja excelente. As agências sentem esta pressão com mais intensidade, porque o site de um cliente tem de converter no primeiro dia, não eventualmente.

Por outro lado, um feed de redes sociais ao vivo e avaliações reais do Google dizem a um visitante, em meio segundo, que este negócio é real e que outras pessoas gostam dele.

Para uma visão mais ampla de como a prova social funciona além do Framer, consulte o nosso guia sobre as melhores ferramentas de prova social.

Plugin de Framer vs. componente de Framer: qual é a diferença

O Framer tem dois sistemas distintos para estender um site, e é fácil confundi-los. Perceber isto importa, porque muda onde vai procurar a EmbedSocial.

Onde cada um vive na interface do Framer

Um plugin do Framer vive no seu próprio painel lateral. Abre-se, executa-se uma ação e fecha-se. Não fica na sua tela como um elemento de design.

Um componente do Framer aparece diretamente no painel Insert, ao lado do texto, das imagens e das stacks. Pesquisa-o, arrasta-o para a página e trata-o como qualquer outra camada.

Porque é que a EmbedSocial é um componente e não um plugin

A EmbedSocial disponibiliza-se como componente porque é o formato que se comporta como um verdadeiro elemento de design: redimensionável, arrastável e visível na tela.

Um plugin implicaria sair da página para correr uma ferramenta separada. Um componente fica onde já está a trabalhar, o que é mais rápido para agências que constroem várias páginas por semana.

O que é o componente da EmbedSocial (e onde encontrá-lo no Framer Marketplace)

O componente widget da EmbedSocial está listado em Components > Embeds no Framer Marketplace, criado e mantido pela equipa da EmbedSocial.

Depois de tocar em ‘Copy Component’, basta colá-lo no seu projeto Framer.

Também pode pesquisar “EmbedSocial” no painel Insert de qualquer projeto Framer e o tile aparece, da mesma forma que Cal.com, Intercom e Hubspot aparecem nas suas categorias.

Contudo, antes de o copiar ou arrastar para uma página, precisa de uma coisa da EmbedSocial: um widget ref. Veja como obter um.

Configure primeiro o seu widget EmbedSocial

O componente do Framer só renderiza um widget que já tenha criado na EmbedSocial. Três passos rápidos levam-no do zero até um widget ref.

Passo 1: Crie a sua conta EmbedSocial

Inscreva-se numa conta de avaliação EmbedSocial. Também pode ver o nosso plano gratuito, que suporta uma fonte Google Business Profile com um badge de avaliações a mostrar cinco avaliações aleatórias.

Nota: Também pode ligar uma fonte Instagram, TikTok ou Facebook.

Passo 2: Ligue o seu Google Business Profile, Instagram, TikTok ou outras fontes

Em ‘Sources’, ligue a fonte que quer mostrar: o seu Google Business Profile para avaliações, a sua conta Instagram ou TikTok para um feed, ou várias fontes de uma só vez para um mural combinado.

Não precisa de nenhuma API key nem de conta de developer. A EmbedSocial mantém as integrações API oficiais, portanto ligar uma fonte é um login, não um projeto de configuração.

Passo 3: Personalize o widget e copie o seu widget ref

Depois de as fontes estarem ligadas, avance para a secção ‘Widgets’ para gerar e personalizar o seu novo widget com o nosso avançado AI widget builder.

O AI widget builder trata da maior parte com um prompt: descreve as cores da marca, as fontes ou o layout, e ele aplica as alterações. O widget é totalmente responsive, por isso adapta-se automaticamente aos breakpoints de mobile, tablet e desktop do Framer sem configuração extra.

Quando terminar, abra o separador ‘Embed’ do widget e copie o valor data-ref. Essa string é o seu widget ref. Guarde-a à mão, é a única informação de que o Framer precisa.

Adicione o componente da EmbedSocial ao seu site Framer

Com um widget ref copiado, instalá-lo no Framer demora três passos e nenhum editor de código.

Passo 1: Cole o componente no seu projeto Framer

É simples: abra o seu projeto Framer e toque em colar para adicionar o componente em qualquer sítio da página. Depois pode movê-lo e colocá-lo onde quiser na tela.

Passo 2: Cole o seu widget ref

Selecione o componente e encontre o campo Widget Ref no painel de propriedades à direita. Cole o valor que copiou da EmbedSocial.

Passo 3: Pré-visualize e publique

Clique em ‘Preview’ (o botão de play) no topo para confirmar que o feed ou as avaliações carregam corretamente, ajuste a altura e a largura ao seu layout e publique. É esse o processo por completo.

O componente não está limitado a um tipo de conteúdo. Renderiza qualquer widget para o qual o apontar. Eis o que isso parece nas fontes mais pedidas.

O que pode adicionar ao seu site Framer

Escolhi três templates ao vivo por cada fonte para que veja exatamente como fica na página. Copie o widget ref de qualquer um deles e encaixa no componente Framer da mesma forma.

Adicione avaliações do Google ao seu site Framer

Mostre a sua classificação em estrelas, o número de avaliações e as avaliações individuais com fotos e nomes, extraídas ao vivo do seu widget de avaliações do Google e sincronizadas a cada 10 minutos.

É o construtor de confiança mais rápido num site Framer: uma classificação real junto a nomes reais faz mais por um primeiro visitante do que outro parágrafo de copy de marketing.

Ver template: Google Reviews Slider

Adicione feeds do Instagram e do TikTok ao seu site Framer

Mostre os seus posts recentes, reels ou vídeos do TikTok num grid, carrossel ou layout autoplay, alimentados pelos mesmos motores do widget do Instagram e do widget do TikTok usados nas restantes integrações da EmbedSocial.

Um feed ao vivo mostra que o negócio está ativo hoje, não apenas quando o site foi construído. É útil tanto em homepages como em páginas de portfólio.

Ver template: Instagram Feed Widget

Adicione testemunhos e UGC shoppable ao seu site Framer

Combine avaliações de várias plataformas num único mural de testemunhos, ou marque produtos dentro de posts UGC com o widget shoppable para transformar o feed numa galeria shoppable.

Ver template: Testimonial Wall

Método antigo com código personalizado vs. o novo componente

Se já usou a EmbedSocial no Framer, é provável que tenha colado um script num bloco de Custom Code. Veja como compara com o componente.

	Custom code (antigo)	Componente (novo)
Configuração	Colar JavaScript num bloco Embed ou Custom Code	Copiar o componente ou arrastá-lo do painel Insert
Edição	Exige reabrir o bloco de código	Edita-se visualmente no painel de propriedades
Descoberta	Exige saber que o código de embed existe	Pesquisável no painel Insert
Ideal para	Personalização HTML completa	Configuração rápida, sem código

Ambos os métodos continuam a funcionar. A abordagem de custom code continua disponível se precisar de mais controlo sobre a colocação. Mas para a maior parte dos projetos, o componente é mais rápido e mais difícil de partir.

Conclusão: Instale o componente EmbedSocial e transforme o seu próximo site Framer em prova

Um site Framer bem desenhado ainda precisa de evidência de que existem clientes reais. O componente da EmbedSocial leva-o lá sem uma única linha de código, da criação da conta até um widget publicado em minutos, não numa sprint de desenvolvimento.

Pesquise “EmbedSocial” no painel Insert do seu próximo projeto Framer e veja o que um feed de redes sociais ao vivo ou uma fila de avaliações reais do Google fazem por uma página que antes era estática. Também pode encontrá-lo neste link.