Einbetten eines Facebook-Seiten-Feeds

Facebook hat sein eigenes Page Plugin, mit dem du einen Embed-Code für den individuellen Facebook-Feed eines Profils erstellen und ihn in den benutzerdefinierten Code im Sitebuilder einfügen kannst.

Bevor du beginnst

Gehe zum Facebook-Profil, dessen Feed du einbetten möchtest, und kopiere die URL dieser Seite.

Schritt 1 - Generiere den Embed-Code im Page Plugin-Tool

Um einen Facebook-Feed in deine Website-Seite einzubetten, öffne das native Page Plugin-Tool von Facebook.
Füge die URL der Facebook-Seite, die du zuvor kopiert hast, in das Facebook-Page-URL-Feld ein. Hinweis: Du kannst das Erscheinungsbild des eingebetteten Feeds auf dieser Seite anpassen. Zum Beispiel kannst du die Tabs hinzufügen, die neben deinem eingebetteten Feed angezeigt werden sollen, oder die Feed-Abmessungen ändern. Scrolle auf der Page Plugin-Seite nach unten, um detaillierte Anweisungen zu erhalten.
Nachdem du mit den Einstellungen fertig bist, klicke auf die Schaltfläche Code abrufen.

Das Page Plugin generiert zwei Code-Ausschnitte, die du in deine Website einbetten musst: Den ersten in die Seiteneinstellungen und den zweiten in den EmbedHTML-Block.

Schritt 2 - Einbetten des ersten Codes in die Seiteneinstellungen

Der erste Code-Ausschnitt muss einmal in das Feld Nach dem <body> Tag der Seiteneinstellungen eingefügt werden. Wenn du den Facebook-Feed in viele Seiten deiner Website einbetten möchtest, solltest du ihn im gleichen Nach dem <body> Tag in den Website-Einstellungen unter dem Tab Benutzerdefinierter Code wiederholen möchtest, um Schritt 2 nicht für jede Seite wiederholen zu müssen.

Um den Code in die Seiteneinstellungen einzubetten, befolge diese Schritte:

Im Tab JavaScript SDK des Page Plugins kopiere den ersten Code.
In Sitebuilder klicke oben auf der Leiste auf Seiten, um den Seitenmanager zu öffnen. Finde die Seite, in die du den Facebook-Feed einbetten möchtest, in der Liste und klicke auf ihr Einstellungs-Icon.
Gehe zum Tab Benutzerdefinierter Code, scrolle zum Feld Nach dem <body> Tag und füge den zuvor kopierten Code in das Feld ein.
Klicke auf Übernehmen, um die Änderungen zu speichern.

Schritt 3 - Einbetten des zweiten Codes in die Seiteneinstellungen

Nachdem du den ersten Code in die Seiteneinstellungen eingebettet hast, gehe zurück zum Page Plugin und kopiere den zweiten Code.
In Sitebuilder finde einen Ort, an dem du den Facebook-Feed einbetten möchtest, und klicke auf die Block hinzufügen (+) Plus Schaltfläche.
In der Block-Bibliothek klicke auf den Embed HTML Block und wähle das Layout <HTML>. Hinweis: Dies ist ein Premium-Block, daher ist möglicherweise ein Upgrade erforderlich.
Bewege den Block, um das Bedienfeld zu aktivieren. Klicke auf das Benutzerdefiniertes HTML Icon.
Füge den Code aus dem Page Plugin in das Fenster für Benutzerdefiniertes HTML ein.

Schritt 4 - Füge <center>-Tags hinzu

Um zu verhindern, dass dein Facebook-Feed an den Rand der Seite gedrängt wird, füge <center></center>-Tags zum Code hinzu.

Umgebe den Code mit <center> und </center>-Tags, damit das Bild in der Mitte deiner Seite angezeigt wird. Klicke auf Übernehmen.

Die Ergebnisse sind in diesem Stadium nicht sichtbar. Du musst deine Website veröffentlichen, damit dein Code ausgeführt wird. Wenn du überprüfen möchtest, wie der Code funktioniert, bevor du veröffentlichst, verwende die Vorschau-Schaltfläche oben in der Leiste.

Schritt 4 - Veröffentliche die Seite

Wenn alles erledigt ist, klicke oben rechts im Sitebuilder auf Veröffentlichen, um die Änderungen live zu machen.

Hinweis: Das Page Plugin ist für europäische Benutzer möglicherweise nicht sichtbar, es sei denn, sie sind angemeldet und haben "App- und Website-Cookies" zugestimmt. Nur wenn beide Bedingungen erfüllt sind, können Benutzer mit diesem Plugin interagieren.

Kombinieren von Facebook-Feeds mit anderen Arten von Inhalten

Die maximale Breite des Containers für das Facebook-Plugin beträgt 500 px, was nicht viel ist. Deshalb empfehlen wir, den Facebook-Feed-Plugin-Code mit anderen Inhalten zu kombinieren. Hierfür kannst du das HTML-Widget verwenden.

Zum Beispiel kannst du den benutzerdefinierten Block zu deiner Seite hinzufügen und ein 2-Spalten-Raster auswählen. Füge dann das HTML-Widget zu einer der Spalten hinzu und bette den Facebook-Plugin-Code (aus Schritt 2 in diesem Tutorial) ein. In die zweite Spalte kannst du beliebige andere Inhalte wie Text, Bild, Schaltflächen usw. hinzufügen.

Auf diese Weise nutzt du den Platz auf deiner Seite produktiv und behältst ein schönes Layout bei.