Wie bette ich Social-Media-Feeds in Figma Sites ein?

Ja! Figma hat einen neuen Website-Builder namens Figma Sites und jetzt kannst du eine Website in einer No-Code-Umgebung entwerfen und veröffentlichen.

Du kannst responsive, optisch ansprechende Landing Pages, Portfolios oder interne Projekte erstellen - alle powered von deinen Figma-Designs. Aber was ist, wenn du deine Seiten mit echtem Live-Social-Proof dynamischer gestalten möchtest?

Jetzt kannst du jedes EmbedSocial-Widget direkt in deine Figma Site einbetten - einen Instagram-Feed, einen Google-Reviews-Slider oder eine TikTok-Mentions-Galerie.

Was sind Figma Sites?

Figma Sites ist ein leichtes Publishing-Tool, mit dem du jedes Figma-Design in eine live, teilbare Webseite ohne Entwickler verwandeln kannst.

---

Stelle es dir als einen Weg vor, um Micro-Sites, Kampagnen oder Präsentationen mit deinem bestehenden Design-System bereitzustellen. Und jetzt kannst du mit Embed-Support deine Seiten mit Live-Widgets von EmbedSocial verbessern.

Schritte zum Einbetten von Instagram- oder Google-Reviews-Widgets in Figma Sites

Nur iframe-Codes werden in Figma Sites unterstützt. Das bedeutet, du musst die iframe-Embed-Option von deinem EmbedSocial-Widget verwenden. So geht’s Schritt für Schritt:

Schritt 1: Kopiere den iframe-Code des Widgets

1. Gehe zu deinem EmbedSocial-Konto oder erstelle ein neues Konto, wenn du ein neuer Benutzer bist.
2. Gehe zu Widgets, erstelle ein neues oder wähle das Widget aus, das du einbetten möchtest (Instagram-Feed, Google-Reviews, TikTok usw.)
3. Im Editor, im linken Einstellungsfeld, klicke auf die Registerkarte ‘Embed’ und klicke
4. Kopiere den iframe-Code (stelle sicher, dass du die JavaScript-Version nicht verwendest)

Schritt 2: Füge den HTML-Block in Figma Sites ein

Folge diesen Schritten, um deinen Code in deine Figma Site einzufügen:

1. Öffne dein Figma Site-Projekt.
2. Klicke im linken Panel auf die Schaltfläche ➕, um einen neuen Block hinzuzufügen.
3. Wähle Embeds aus den Block-Optionen aus.
4. Wähle dann den Block URL oder HTML. Du musst den Block in dem Bereich anpassen, in dem du den Code einbetten möchtest.
   
5. Du wirst ein neues HTML-Panel auf der rechten Seite sehen, wo du deinen iframe-Code einfügen musst.
   

Schritt 3: Passe Position an und veröffentliche

• Nach dem Einbetten kannst du die Position des Blocks, die Breite und die Höhe anpassen.
• Dein Widget wird live innerhalb des Figma Site-Layouts gerendert, was dir ermöglicht, eine Vorschau anzusehen und den Rest deines Inhalts entsprechend zu gestalten.
• Klicke Publish, um die Änderungen live zu sehen.

Hier ist eine live Figma Site mit einem eingebetteten Instagram-Widget von EmbedSocial - sieh es in Aktion.

Sieh Live Figma Site an

Erste Schritte

Du hast jetzt ein vollständig funktionierendes EmbedSocial-Widget in deiner Figma Site - ob es Instagram-UGC, Kundentestimonials, ein versandfertiges Widget oder Echtzeit-Google-Reviews zeigt. Es ist ein einfacher Weg, um dein statisches Design in ein lebendes Erlebnis, powered von authentischem Inhalt, zu verwandeln.