So fügen Sie einen Social-Media-Feed in Framer ein (ohne Code)

Sie können jetzt einen Live-Social-Media-Feed, Google-Bewertungen und UGC in jede Framer-Website einbinden, indem Sie eine Komponente aus dem Insert-Panel ziehen. Kein eigener Code, kein Developer im Stand-by.

Hier ist das Problem: Eine Framer-Website kann makellos aussehen und trotzdem den Deal verlieren. Ein poliertes Design sagt “wir sind professionell.” Es sagt nicht “echte Menschen vertrauen uns.”

Diese Lücke zu schließen bedeutete früher, JavaScript in einen Custom-Code-Block einzufügen und zu hoffen, dass es das nächste Redesign übersteht. Nicht-technische Kund*innen hassten es, das anzufassen, und ein falscher Paste konnte die ganze Seite kaputtmachen.

EmbedSocial hat diese Lücke gerade geschlossen mit der EmbedSocial-Komponente im Framer Marketplace, und dieser Beitrag führt Sie Schritt für Schritt durch, vom ersten EmbedSocial-Konto bis zum veröffentlichten Widget.

Warum statische Framer-Websites Deals verlieren

Besucher entscheiden in Sekunden, ob sie einem Unternehmen vertrauen, und sie suchen nur nach einem: dem Beleg, dass jemand anderes bereits das Risiko übernommen hat.

Eine Website ohne Bewertungen, ohne Social-Feed und ohne sichtbare Kunden liest sich als ungetestet, selbst wenn das Design großartig ist. Agenturen spüren diesen Druck am stärksten, denn die Website eines Kunden muss am ersten Tag konvertieren, nicht irgendwann.

Umgekehrt sagen ein Live-Social-Media-Feed und echte Google-Bewertungen einem Besucher innerhalb einer halben Sekunde, dass dieses Unternehmen echt ist und andere es mögen.

Für einen breiteren Blick darauf, wie Social Proof über Framer hinaus funktioniert, lesen Sie unseren Leitfaden zu den besten Social-Proof-Tools.

Framer-Plugin vs. Framer-Komponente: Was ist der Unterschied

Framer hat zwei getrennte Systeme, um eine Website zu erweitern, und man verwechselt sie leicht. Das richtig zu verstehen ist wichtig, denn es ändert, wo Sie EmbedSocial suchen.

Wo jeweils in der Framer-Oberfläche zu finden

Ein Framer-Plugin lebt in einem eigenen Seiten-Panel. Sie öffnen es, führen eine Aktion aus und schließen es wieder. Es sitzt nicht als Design-Element auf Ihrer Canvas.

Eine Framer-Komponente erscheint direkt im Insert-Panel, neben Text, Bildern und Stacks. Sie suchen sie, ziehen sie auf Ihre Seite und stylen sie wie jeden anderen Layer.

Warum EmbedSocial als Komponente kommt, nicht als Plugin

EmbedSocial kommt als Komponente, weil das das Format ist, das sich wie ein echtes Design-Element verhält: skalierbar, ziehbar und direkt auf der Canvas sichtbar.

Ein Plugin würde bedeuten, die Seite zu verlassen, um ein separates Werkzeug zu benutzen. Eine Komponente bleibt dort, wo Sie ohnehin arbeiten, was für Agenturen, die mehrere Seiten pro Woche bauen, schneller ist.

Was die EmbedSocial-Komponente ist (und wo Sie sie im Framer Marketplace finden)

Die EmbedSocial-Widget-Komponente ist unter Components > Embeds im Framer Marketplace gelistet, gebaut und gepflegt vom EmbedSocial-Team.

Nachdem Sie auf ‘Copy Component’ getippt haben, müssen Sie die Komponente nur noch in Ihr Framer-Projekt einfügen.

Sie können auch aus dem Insert-Panel eines beliebigen Framer-Projekts nach “EmbedSocial” suchen, und die Kachel erscheint, genauso wie Cal.com, Intercom und Hubspot in ihren Kategorien auftauchen.

Bevor Sie sie jedoch kopieren oder auf eine Seite ziehen, brauchen Sie eine Sache von EmbedSocial selbst: eine Widget-Ref. So bekommen Sie sie.

Richten Sie zuerst Ihr EmbedSocial-Widget ein

Die Framer-Komponente rendert nur ein Widget, das Sie bereits in EmbedSocial gebaut haben. Drei schnelle Schritte führen Sie von null zur Widget-Ref.

Schritt 1: Erstellen Sie Ihr EmbedSocial-Konto

Melden Sie sich für ein EmbedSocial-Testkonto an. Sie können sich auch unseren kostenlosen Plan ansehen, der eine Google-Business-Profile-Quelle mit einem Bewertungs-Badge unterstützt, das fünf zufällige Bewertungen anzeigt.

Hinweis: Sie können auch eine Instagram-, TikTok- oder Facebook-Quelle verbinden.

Schritt 2: Verbinden Sie Ihr Google Business Profile, Instagram, TikTok oder andere Quellen

Verbinden Sie unter ‘Sources’ die Quelle, die Sie anzeigen möchten: Ihr Google Business Profile für Bewertungen, Ihr Instagram- oder TikTok-Konto für einen Feed, oder mehrere Quellen gleichzeitig für eine kombinierte Wall.

Sie brauchen weder API-Key noch Developer-Konto. EmbedSocial hält die offiziellen API-Integrationen, deshalb ist das Verbinden einer Quelle ein Login, kein Setup-Projekt.

Schritt 3: Passen Sie Ihr Widget an und kopieren Sie Ihre Widget-Ref

Sobald Ihre Quellen verbunden sind, gehen Sie in den Bereich ‘Widgets’, um Ihr neues Widget mit unserem fortschrittlichen AI-Widget-Builder zu erstellen und anzupassen.

Der AI-Widget-Builder erledigt das meiste per Prompt: Sie beschreiben Markenfarben, Schriften oder Layout, und er wendet die Änderungen an. Das Widget ist voll responsive, passt sich also automatisch an die Mobile-, Tablet- und Desktop-Breakpoints von Framer an, ohne zusätzliche Konfiguration auf Ihrer Seite.

Wenn Sie fertig sind, öffnen Sie den Tab ‘Embed’ des Widgets und kopieren Sie den Wert data-ref. Dieser String ist Ihre Widget-Ref. Halten Sie sie bereit, es ist die einzige Information, die Framer von Ihnen braucht.

Fügen Sie die EmbedSocial-Komponente in Ihre Framer-Website ein

Mit einer kopierten Widget-Ref braucht die Installation in Framer drei Schritte und keinen Code-Editor.

Schritt 1: Fügen Sie die Komponente in Ihr Framer-Projekt ein

Es ist einfach: Öffnen Sie Ihr Framer-Projekt und tippen Sie auf Einfügen, um die Komponente irgendwo auf der Seite zu platzieren. Danach können Sie sie verschieben und dort platzieren, wo Sie sie auf der Canvas haben möchten.

Schritt 2: Fügen Sie Ihre Widget-Ref ein

Wählen Sie die Komponente aus und finden Sie das Feld Widget Ref im Eigenschaften-Panel rechts. Fügen Sie den Wert ein, den Sie aus EmbedSocial kopiert haben.

Schritt 3: Vorschau und Veröffentlichung

Klicken Sie oben auf ‘Preview’ (die Play-Schaltfläche), um zu prüfen, dass Ihr Feed oder Ihre Bewertungen korrekt laden, passen Sie Höhe und Breite an Ihr Layout an und veröffentlichen Sie. Das ist der gesamte Ablauf.

Die Komponente ist nicht auf einen Inhaltstyp beschränkt. Sie rendert das Widget, auf das Sie sie richten. So sieht das bei den Quellen aus, nach denen am häufigsten gefragt wird.

Was Sie in Ihre Framer-Website einfügen können

Ich habe drei Live-Vorlagen pro Quelle ausgewählt, damit Sie genau sehen, wie das auf der Seite aussieht. Kopieren Sie die Widget-Ref einer beliebigen Vorlage und sie landet genauso in der Framer-Komponente.

Google-Bewertungen in Ihre Framer-Website einfügen

Zeigen Sie Ihre Sternebewertung, die Anzahl der Bewertungen und einzelne Bewertungen mit Fotos und Namen an, live aus Ihrem Google-Bewertungs-Widget gezogen und etwa alle 10 Minuten synchronisiert.

Das ist der schnellste Vertrauensaufbau auf einer Framer-Website: Eine echte Sternebewertung neben echten Namen leistet für einen Erstbesucher mehr als ein weiterer Absatz Marketing-Copy.

Vorlage ansehen: Google Reviews Slider

Instagram- und TikTok-Feeds in Ihre Framer-Website einfügen

Zeigen Sie Ihre letzten Posts, Reels oder TikTok-Videos in einem Grid, Karussell oder Autoplay-Layout, angetrieben von denselben Engines des Instagram-Widgets und des TikTok-Widgets, die in den übrigen EmbedSocial-Integrationen verwendet werden.

Ein Live-Feed signalisiert, dass das Unternehmen heute aktiv ist, nicht nur zum Zeitpunkt, als die Website gebaut wurde. Das hilft sowohl auf Startseiten als auch auf Portfolio-Seiten.

Vorlage ansehen: Instagram Feed Widget

Testimonials und Shoppable UGC in Ihre Framer-Website einfügen

Kombinieren Sie Bewertungen aus mehreren Plattformen zu einer Testimonial-Wall, oder taggen Sie Produkte in UGC-Posts mit dem Shoppable-Widget, um den Feed in eine Shoppable-Galerie zu verwandeln.

Vorlage ansehen: Testimonial Wall

Alte Custom-Code-Methode vs. die neue Komponente

Wenn Sie EmbedSocial in Framer schon einmal genutzt haben, haben Sie vermutlich ein Skript in einen Custom-Code-Block eingefügt. So schneidet das im Vergleich zur Komponente ab.

	Custom Code (alt)	Komponente (neu)
Einrichtung	JavaScript in einen Embed- oder Custom-Code-Block einfügen	Komponente kopieren oder aus dem Insert-Panel ziehen
Bearbeitung	Erfordert erneutes Öffnen des Codeblocks	Visuell im Eigenschaften-Panel bearbeiten
Auffindbarkeit	Setzt Wissen um den Embed-Code voraus	Im Insert-Panel suchbar
Am besten für	Vollständige HTML-Anpassung	Schnelle Einrichtung, ohne Code

Beide Methoden funktionieren weiter. Der Custom-Code-Weg bleibt bestehen, wenn Sie mehr Kontrolle über die Platzierung brauchen. Für die meisten Projekte ist die Komponente aber schneller und robuster.

Fazit: Installieren Sie die EmbedSocial-Komponente und machen Sie Ihre nächste Framer-Website zum Beweis

Auch eine gut gestaltete Framer-Website braucht noch den Beleg, dass es echte Kund*innen gibt. Die EmbedSocial-Komponente bringt Sie dorthin ohne eine einzige Zeile Code, von der Konto-Erstellung bis zum veröffentlichten Widget in wenigen Minuten, nicht in einem Entwicklungssprint.

Suchen Sie im Insert-Panel Ihres nächsten Framer-Projekts nach “EmbedSocial” und sehen Sie, was ein Live-Social-Media-Feed oder eine Reihe echter Google-Bewertungen aus einer Seite macht, die vorher statisch war. Sie finden es auch unter diesem Link.