Seiten-Plugin

Mit dem Seiten-Plugin kannst du jede öffentliche Facebook-Seite einfach auf deiner Webseite einbetten und hervorheben. Genau wie bei Facebook können deine Besucher die Seite mit „Gefällt mir“ markieren und teilen, ohne deine Webseite verlassen zu müssen. Du kannst das Seiten-Plugin für alle Seiten verwenden, die nicht beschränkt sind (zum Beispiel nach Land oder Alter).

Verwandte Themen: FAQ zu sozialen Plugins | Andere soziale Plugins

URL der Facebook-Seite

Tabs

Breite

Höhe

Kleinen Header verwenden

An Plugin Container-Breite anpassen

Titelbild verbergen

Gesichter des Freundes/der Freundin anzeigen

Code generieren

Einstellungen

Neben den oben aufgeführten Einstellungen sind auch folgende Änderungen möglich:

Einstellung	HTML5-Attribut	Beschreibung	Standard
`href`	`data-href`	Die URL der Facebook-Seite	Keine
`width`	`data-width`	Die Pixelbreite des Plugins. Minimum ist `180` und Maximum ist `500`	`340`
`height`	`data-height`	Die Pixelhöhe des Plugins. Minimum ist `70`	`500`
`tabs`	`data-tabs`	Anzuzeigende Tabs, wie `timeline`, `events`, `messages`. Füge mehrere Tabs mit einer durch Komma getrennten Liste hinzu, d. h. `timeline, events`.	`timeline`
`hide_cover`	`data-hide-cover`	Titelbild in der Überschrift ausblenden	`false`
`show_facepile`	`data-show-facepile`	Profilfotos anzeigen, wenn Freunde dies mit „Gefällt mir“ markieren	`true`
`hide_cta`	`data-hide-cta`	Benutzerdefinierten „Call to Action“-Button ausblenden (falls verfügbar)	`false`
`small_header`	`data-small-header`	Kleine Überschrift verwenden	`false`
`adapt_container_width`	`data-adapt-container-width`	An Containerbreite anpassen	`true`
`lazy`	`data-lazy`	`true` bedeutet, dass du den Lazy-Loading-Mechanismus des Browsers verwenden sollst, indem du das iframe-Attribut `loading="lazy"` festlegst. Dadurch rendert der Browser das Plugin nicht, wenn es sich nicht in der Nähe des Ansichtsfensters befindet und möglicherweise nie gesehen würde. Die Optionen lauten `true` und `false` (Standard).	`false`

Veraltete Attribute

Das Attribut data-show-posts ist veraltet. Verwende das Attribut tabs/data-tabs und den Wert timeline, um Beiträge von der Chronik der Seite anzuzeigen.

Hinzufügen des Seiten-Plugins zu einer Webseite

Die Standardkonfiguration des Seiten-Plugins umfasst nur die Überschrift und ein Titelbild. Diese Größe eignet sich ideal zum Hervorheben deiner Seite bei wenig Platz (z. B. über einer Seitenleiste).

<div class="fb-page" 
data-href="https://www.facebook.com/facebook"
data-width="380" 
data-hide-cover="false"
data-show-facepile="false"></div>

Call to Action

Wenn deine Seite einen eigenen Call to Action-Button enthält, wird dieser anstelle des Standard-Call to Action (einem „Teilen“-Button) angezeigt.

Wenn die Plugin-Breite weniger als 280 Pixel beträgt, wird der standardmäßige „Teilen“-Button angezeigt, um eine falsche Ausrichtung des Designs in unterschiedlichen Übersetzungen zu vermeiden.

Seiten-Tabs: Chronik, Events und Nachrichten

Jetzt kannst du die Tabs Chronik, Events und Nachrichten in das Plugin aufnehmen:

Tab „Chronik“: Zeigt die neuesten Beiträge der Chronik deiner Facebook-Seite an.
Tab „Veranstaltungen“: Personen können Events deiner Seite über das Plugin abonnieren.
Tab „Nachrichten“: Personen können direkt von deiner Webseite aus Nachrichten an deine Seite senden. Dazu müssen sie angemeldet sein.

Zulassen von Nachrichten auf deiner Seite

Um Nachrichten auf deiner Facebook-Seite zuzulassen, gehe zu den Settings deiner Seite. Aktiviere in der Zeile Messages die Option Durch Anzeigen des Buttons „Nachricht senden“ anderen erlauben, meine Seite privat zu kontaktieren (Direktlink: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).

Hinzufügen mehrerer Tabs

Über eine durch Kommas getrennte Liste im data-tabs-Attribut kannst du mehrere Tabs hinzufügen:

<div class="fb-page" 
data-tabs="timeline,events,messages"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380" 
data-hide-cover="false"></div>

Einzelner Tab

Du kannst auch einfach einen einzelnen Tab timeline, events oder messages hinzufügen:

<div class="fb-page" 
data-tabs="events"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380"></div>

Adaptive Breite

Das Plugin passt sich standardmäßig an die width des übergeordneten Containers beim Laden der Seite an (min. 180px/max. 500px). Das ist beim Ändern des Layouts nützlich:

<div style="width: 190px;">
<!-- Page plugin's width will be 190px -->
<div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

Wenn die width des übergeordneten Elements größer als die width des Seiten-Plugins ist, wird der in data-width definierte Wert beibehalten:

<div style="width: 600px;">
<!-- Page plugin's width will be 500px -->
<div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

Das Plugin ist nie kleiner als 180px:

<div style="width: 100px;">
<!-- Page plugin's width will be 180px -->
<div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

Du kannst die adaptive Breite ausschalten, indem du An Plugin Container-Breite anpassen deaktivierst. Dann wird das Plugin unabhängig vom übergeordneten Container mit der angegebenen Breite angezeigt.

Keine dynamische Skalierung

Das Seiten-Plugin funktioniert mit responsiven, flexiblen und statischen Layouts. Du kannst die width des übergeordneten Elements mit Medienabfragen oder anderen Methoden festlegen, aber:

Das Plugin bestimmt seine widthbeim Laden der Seite.
Es reagiert nicht auf Änderungen am Feldmodellnach dem Laden der Seite.

Wenn du die width des Plugins beim Ändern der Fenstergröße anpassen möchtest, musst du das Plugin manuell erneut anzeigen.

Anzeigen von Gesichtern von Freunden

Zeige mit echten Profilbildern anstelle von nur Zahlen, wem deine Seite gefällt. Personen, die deine Seite besuchen, sehen die Anzahl der Freunde, die die Seite mit „Gefällt mir“ markiert haben, sowie deren Profilbilder.

Diese Option kannst du aktivieren, indem du Show Friend's Faces im Konfigurator markierst.

<div class="fb-page"
data-href="https://www.facebook.com/imdb" 
data-width="340"
data-hide-cover="false"
data-show-facepile="true"></div>

Seiten mit eingeschränkten Privatsphäre-Einstellungen

Facebook-Seiten mit eingeschränkten Privatsphäre-Einstellungen können nicht eingebettet werden.

Ändern der Sprache

Du kannst die Sprache des Seiten-Plugins ändern, indem du eine lokalisierte Version des Facebook-JavaScript-SDK lädst. Ändere den Wert von js.src beim Laden des SDK, um deine Ländereinstellung zu verwenden. Ersetze en_US durch deine Ländereinstellung, z. B. ru_RU für Russisch (Russland):

Beispiel

js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

Die unterstützten Gebietsschemata findest du in der XML-Datei der Facebook-Gebietsschemata. Möglicherweise musst du die Breite eines sozialen Plugins anpassen, um ausreichend Platz für andere Sprachen zu schaffen. Weitere Informationen dazu findest du auf unserer Seite Lokalisierung und Übersetzung.