Come aggiungere un feed dei social media a Framer (senza codice)

Ora puoi aggiungere un feed dei social media in tempo reale, le recensioni Google e i contenuti UGC a qualsiasi sito Framer trascinando un componente dal pannello Insert. Niente codice personalizzato, niente developer di stand-by.

Ecco il problema: un sito Framer può avere un design impeccabile e comunque perdere il cliente. Un design curato dice “siamo professionali.” Non dice “persone vere si fidano di noi.”

Prima, colmare quel divario significava incollare del JavaScript in un blocco Custom Code e sperare che sopravvivesse al restyling successivo. I clienti non tecnici odiavano toccarlo, e un incolla sbagliato poteva rompere l’intera pagina.

EmbedSocial ha appena colmato quel divario con il componente EmbedSocial nel Framer Marketplace, e questo articolo ti guida esattamente su come usarlo, dal primo account EmbedSocial fino al widget pubblicato.

Perché i siti Framer statici perdono clienti

I visitatori decidono se fidarsi di un’azienda in pochi secondi, e cercano una cosa sola: la prova che qualcun altro ha già corso il rischio.

Un sito senza recensioni, senza feed social e senza clienti visibili viene percepito come non testato, anche se il design è ottimo. Le agenzie sentono questa pressione con più forza, perché il sito di un cliente deve convertire dal primo giorno, non tra qualche tempo.

Al contrario, un feed dei social media in tempo reale e recensioni Google reali dicono a un visitatore, in mezzo secondo, che questa attività è vera e che piace ad altre persone.

Per uno sguardo più ampio su come funziona la social proof oltre Framer, consulta la nostra guida ai migliori strumenti di social proof.

Plugin di Framer vs. componente di Framer: qual è la differenza

Framer ha due sistemi distinti per estendere un sito, ed è facile confonderli. Capirlo è importante, perché cambia dove andrai a cercare EmbedSocial.

Dove vive ciascuno nell’interfaccia di Framer

Un plugin di Framer vive in un proprio pannello laterale. Lo apri, esegui un’azione e lo chiudi. Non resta sul canvas come elemento di design.

Un componente di Framer compare direttamente nel pannello Insert, accanto a testi, immagini e stack. Lo cerchi, lo trascini sulla pagina e lo stilizzi come qualsiasi altro layer.

Perché EmbedSocial arriva come componente, non come plugin

EmbedSocial arriva come componente perché è il formato che si comporta come un vero elemento di design: ridimensionabile, trascinabile e visibile direttamente sul canvas.

Un plugin significherebbe uscire dalla pagina per usare uno strumento separato. Un componente resta dove stai già lavorando, il che è più veloce per le agenzie che costruiscono più pagine a settimana.

Cos’è il componente EmbedSocial (e dove trovarlo nel Framer Marketplace)

Il componente widget EmbedSocial è elencato in Components > Embeds nel Framer Marketplace, realizzato e mantenuto dal team EmbedSocial.

Dopo aver toccato ‘Copy Component’, basta incollarlo nel tuo progetto Framer.

Puoi anche cercare “EmbedSocial” dal pannello Insert di qualsiasi progetto Framer e la tile compare, allo stesso modo in cui Cal.com, Intercom e Hubspot compaiono nelle rispettive categorie.

Prima di copiarlo o trascinarlo su una pagina, però, ti serve una cosa da EmbedSocial: un widget ref. Ecco come ottenerlo.

Configura prima il tuo widget EmbedSocial

Il componente Framer renderizza solo un widget che hai già creato in EmbedSocial. Tre passi rapidi ti portano da zero a un widget ref.

Passo 1: Crea il tuo account EmbedSocial

Registrati per un account di prova EmbedSocial. Puoi anche dare un’occhiata al nostro piano gratuito, che supporta una sorgente Google Business Profile con un badge di recensioni che mostra cinque recensioni casuali.

Nota: Puoi anche collegare una sorgente Instagram, TikTok o Facebook.

Passo 2: Collega il tuo Google Business Profile, Instagram, TikTok o altre sorgenti

In ‘Sources’, collega la sorgente che vuoi mostrare: il tuo Google Business Profile per le recensioni, il tuo account Instagram o TikTok per un feed, oppure più sorgenti insieme per un muro combinato.

Non serve nessuna API key né un account developer. EmbedSocial gestisce le integrazioni API ufficiali, quindi collegare una sorgente è un login, non un progetto di configurazione.

Passo 3: Personalizza il widget e copia il tuo widget ref

Una volta collegate le sorgenti, vai nella sezione ‘Widgets’ per generare e personalizzare il nuovo widget con il nostro AI widget builder avanzato.

L’AI widget builder risolve la maggior parte delle cose con un prompt: descrivi i colori del brand, i font o il layout, e applica le modifiche. Il widget è completamente responsive, quindi si adatta automaticamente ai breakpoint mobile, tablet e desktop di Framer senza configurazione extra.

Quando hai finito, apri la scheda ‘Embed’ del widget e copia il valore data-ref. Quella stringa è il tuo widget ref. Tienila a portata di mano, è l’unica informazione di cui Framer ha bisogno.

Aggiungi il componente EmbedSocial al tuo sito Framer

Con un widget ref copiato, installarlo in Framer richiede tre passi e nessun editor di codice.

Passo 1: Incolla il componente nel tuo progetto Framer

È semplice: apri il tuo progetto Framer e tocca incolla per aggiungere il componente in un punto qualsiasi della pagina. Poi puoi spostarlo e posizionarlo dove vuoi sul canvas.

Passo 2: Incolla il tuo widget ref

Seleziona il componente e trova il campo Widget Ref nel pannello delle proprietà a destra. Incolla il valore che hai copiato da EmbedSocial.

Passo 3: Anteprima e pubblicazione

Fai clic su ‘Preview’ (il pulsante play) in alto per confermare che il feed o le recensioni si caricano correttamente, regola altezza e larghezza per adattarli al layout, poi pubblica. È tutto il processo.

Il componente non è limitato a un solo tipo di contenuto. Renderizza qualsiasi widget a cui lo colleghi. Ecco come appare con le sorgenti più richieste.

Cosa puoi aggiungere al tuo sito Framer

Ho scelto tre template in tempo reale per ogni sorgente, così vedi esattamente come appariranno nella pagina. Copia il widget ref di uno qualsiasi e si incolla nel componente Framer allo stesso modo.

Aggiungi le recensioni Google al tuo sito Framer

Mostra la valutazione a stelle, il numero di recensioni e le singole recensioni con foto e nomi, prelevate in tempo reale dal tuo widget delle recensioni Google e sincronizzate circa ogni 10 minuti.

È il modo più rapido di costruire fiducia su un sito Framer: una valutazione a stelle reale accanto a nomi reali fa più per un visitatore alla prima visita di un altro paragrafo di copy di marketing.

Vedi il template: Google Reviews Slider

Aggiungi feed Instagram e TikTok al tuo sito Framer

Mostra i tuoi ultimi post, i reels o i video TikTok in una griglia, un carosello o un layout con autoplay, alimentati dagli stessi motori del widget Instagram e del widget TikTok usati nelle altre integrazioni EmbedSocial.

Un feed in tempo reale segnala che l’attività è attiva oggi, non solo quando il sito è stato costruito. È utile sia sulle homepage sia sulle pagine di portfolio.

Vedi il template: Instagram Feed Widget

Aggiungi testimonianze e UGC shoppable al tuo sito Framer

Combina recensioni da più piattaforme in un unico muro di testimonianze, oppure tagga i prodotti dentro i post UGC con il widget shoppable per trasformare il feed in una galleria shoppable.

Vedi il template: Testimonial Wall

Vecchio metodo con codice personalizzato vs. il nuovo componente

Se hai già usato EmbedSocial su Framer, probabilmente incollavi uno script in un blocco Custom Code. Ecco il confronto con il componente.

	Custom code (vecchio)	Componente (nuovo)
Configurazione	Incollare JavaScript in un blocco Embed o Custom Code	Copiare il componente o trascinarlo dal pannello Insert
Modifica	Richiede di riaprire il blocco di codice	Si modifica visualmente nel pannello delle proprietà
Scopribilità	Richiede di sapere che il codice di embed esiste	Ricercabile nel pannello Insert
Ideale per	Personalizzazione HTML completa	Configurazione rapida, senza codice

Entrambi i metodi funzionano ancora. L’approccio custom code è ancora disponibile se ti serve più controllo sul posizionamento. Ma per la maggior parte dei progetti, il componente è più veloce e più difficile da rompere.

Conclusione: Installa il componente EmbedSocial e trasforma il tuo prossimo sito Framer in prova

Un sito Framer ben progettato ha comunque bisogno della prova che esistono clienti reali. Il componente EmbedSocial ti porta lì senza una sola riga di codice, dalla creazione dell’account al widget pubblicato in pochi minuti, non in uno sprint di sviluppo.

Cerca “EmbedSocial” nel pannello Insert del tuo prossimo progetto Framer e vedi cosa fa un feed dei social media in tempo reale o una fila di recensioni Google reali su una pagina che prima era statica. Puoi trovarlo anche a questo link.