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

![Componente da EmbedSocial no Framer Marketplace](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/social-media-feed-framer.webp)

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](https://www.framer.com/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](https://embedsocial.com/blog/best-social-proof-tools/).

## 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.

![Comparação entre plugin de Framer e componente de Framer](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/framer-plugin-vs-component.webp)

### 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](https://www.framer.com/marketplace/), criado e mantido pela equipa da EmbedSocial.

![Ficha do componente EmbedSocial no Framer Marketplace](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/embedsocial-framer-component.webp)

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.

![Configure o seu widget EmbedSocial em três passos](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/setup-embedsocial-widget-steps.webp)

### Passo 1: Crie a sua conta EmbedSocial

Inscreva-se numa [conta de avaliação EmbedSocial](https://embedsocial.com/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget). Também pode ver o nosso [plano gratuito](https://embedsocial.com/pricing/), 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.

![Fontes suportadas pela EmbedSocial](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/embedsocial-supported-sources.webp)

### 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](https://embedsocial.com/ai-widget/).

![Editor do AI Widget Builder da EmbedSocial](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/embedsocial-ai-widget-editor.webp)

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.

![Copie o valor data-ref do widget na EmbedSocial](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/embedsocial-widget-data-ref.webp)

## 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.

![Adicione o componente da EmbedSocial ao Framer em três passos](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/add-component-to-framer-steps.webp)

### 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.

![Cole o componente da EmbedSocial num projeto Framer](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/paste-embedsocial-component-framer.webp)

### 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.

![Cole o widget ref da EmbedSocial no painel de propriedades do Framer](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/paste-embedsocial-widget-ref.webp)

### 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.

![Pré-visualize o widget numa página do Framer](https://embedsocial.com/images/blog/add-social-media-feed-to-framer/framer-preview-page.webp)

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](https://embedsocial.com/google-reviews-widget/) 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.

{{embedsocial-hashtag:7e1203223fb4460840d7eda99f23a8b94a205ab1}}

Ver template: [Google Reviews Slider](https://embedsocial.com/templates/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](https://embedsocial.com/instagram-widget/) e do [widget do TikTok](https://embedsocial.com/tiktok-widget/) 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.

{{embedsocial-hashtag:c90d7f89271a66116bfc2442b3bfbb9516427a63}}

Ver template: [Instagram Feed Widget](https://embedsocial.com/templates/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](https://embedsocial.com/shoppable-widget/) para transformar o feed numa galeria shoppable.

{{embedsocial-hashtag:70a7d9341e060b8a9d3abaf73a8d62f8ff8ed6bf}}

Ver template: [Testimonial Wall](https://embedsocial.com/templates/testimonial-wall/)

<div class="blog-callout-blue">

**Dica pro:** Construa uma vez na EmbedSocial e reutilize em vários sites. O mesmo widget ref pode ser renderizado numa página Framer, numa página Webflow ou num site WordPress, portanto um rebranding do cliente não o obriga a reconstruir o widget do zero.

</div>

## 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](https://www.framer.com/marketplace/).

## Perguntas frequentes

### O componente Framer da EmbedSocial é gratuito?

Sim. O plano gratuito suporta uma fonte Google Business Profile com um badge de avaliações a mostrar cinco avaliações aleatórias. As importações completas de avaliações, os widgets shoppable e os controlos avançados exigem um plano pago. Consulte o preço atual na [página de preços da EmbedSocial](https://embedsocial.com/pricing/).

### Qual é a diferença entre um plugin e um componente do Framer?

Um plugin corre no seu próprio painel lateral, separado da tela. Um componente aparece no painel Insert e comporta-se como um elemento de design que arrasta diretamente para uma página, que é como a EmbedSocial está construída.

### Como mostro avaliações do Google num site Framer sem código?

Crie um widget de avaliações do Google na EmbedSocial, copie o widget ref e depois arraste o componente da EmbedSocial para a sua página Framer e cole o ref no painel de propriedades. Não precisa de um editor de código em nenhum passo.

### Os widgets atualizam-se automaticamente depois de instalados?

Sim. As avaliações sincronizam a cada 10 minutos e os feeds sociais atualizam continuamente, por isso o novo conteúdo aparece no seu site Framer pouco depois de ser publicado na plataforma original.

### Posso usar isto em sites de clientes que construo para outros?

Sim. Agências e freelancers podem instalar o componente em qualquer projeto Framer, incluindo sites de clientes, usando o widget ref EmbedSocial do próprio cliente.

### Preciso de uma API key da Google ou de uma conta de developer?

Não. A EmbedSocial mantém as integrações API oficiais com Google, Instagram, TikTok e outras plataformas, portanto ligar uma fonte é uma questão de iniciar sessão e selecioná-la, não de registar acesso de developer.