Come incorporare feed di social media nei Figma Sites?

Sì! Figma ha un nuovo web builder chiamato Figma Sites, e ora puoi progettare e pubblicare un sito web in un ambiente senza codice.

Puoi creare landing page responsive e visivamente raffinate, portfolio o progetti interni, tutto basato sui tuoi progetti Figma. Ma cosa succede se vuoi rendere le tue pagine più dinamiche con prove sociali in tempo reale?

Ora puoi incorporare qualsiasi widget EmbedSocial, un feed di Instagram, uno slider di recensioni di Google o una galleria di menzioni TikTok, direttamente nel tuo Figma Site.

Cosa sono i Figma Sites?

Figma Sites è uno strumento di pubblicazione leggero che ti consente di trasformare qualsiasi progetto Figma in una pagina web live e condivisibile senza la necessità di sviluppatori.

---

Pensalo come un modo per lanciare micro-siti, campagne o presentazioni utilizzando il tuo sistema di design esistente. E ora, con il supporto dell’incorporamento, puoi migliorare le tue pagine con widget live da EmbedSocial.

Passaggi per incorporare widget di Instagram o recensioni di Google nei Figma Sites

In Figma Sites sono supportati solo codici iframe. Ciò significa che è necessario utilizzare l’opzione di incorporamento iframe dal tuo widget EmbedSocial. Ecco come farlo passo dopo passo:

Passaggio 1: copia il codice Iframe del widget

1. Vai al tuo account EmbedSocial o crea un nuovo account se sei un nuovo utente.
2. Vai a Widget, crea nuovo o seleziona il widget che desideri incorporare (Feed di Instagram, Recensioni di Google, TikTok, ecc.)
3. Nell’Editor, nel pannello delle impostazioni a sinistra, fai clic sulla scheda “Embed” e fai clic
4. Copia il codice iframe (assicurati di non utilizzare la versione JavaScript)

Passaggio 2: aggiungi il blocco HTML nei Figma Sites

Segui questi passaggi per incollare il tuo codice nel tuo Figma Site:

1. Apri il tuo progetto Figma Site.
2. Dal pannello sinistro, fai clic sul pulsante ➕ per aggiungere un nuovo blocco.
3. Seleziona Embeds dalle opzioni del blocco.
4. Quindi scegli il blocco URL o HTML. Dovrai regolare il blocco nell’area in cui desideri incorporare il codice.
   
5. Vedrai un nuovo pannello HTML a destra, dove dovrai incollare il tuo codice iframe.
   

Passaggio 3: regola la posizione e pubblica

• Dopo l’incorporamento, puoi regolare la posizione del blocco, la larghezza e l’altezza.
• Il tuo widget verrà riprodotto in tempo reale nel layout di Figma Site, permettendoti di visualizzare in anteprima e definire lo stile del resto dei tuoi contenuti di conseguenza.
• Fai clic su Publish per vedere i cambiamenti in tempo reale.

Ecco un Figma Site live con un widget di Instagram incorporato da EmbedSocial: visualizzalo in azione.

Vedi il Figma Site live

Iniziare

Ora avrai un widget EmbedSocial completamente funzionale nel tuo Figma Site, sia che mostri UGC di Instagram, testimonianze dei clienti, un widget spedibile o recensioni di Google in tempo reale. È un modo semplice per trasformare il tuo design statico in un’esperienza vivente alimentata da contenuti autentici.