Seiten-Plugin

Mit dem Seiten-Plug-in kannst du jede 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.

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 Plug-ins. Minimum ist 180 und Maximum ist 500

340

height

data-height

Die Pixelhöhe des Plug-ins. Minimum ist 70

500

tabs

data-tabs

Anzuzeigende Tabs, wie timeline, events, messages. Füge mehrere Seiten mit einer durch Komma getrennten Liste hinzu, also 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


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-Plug-ins zu einer Webseite

Die Standardkonfiguration des Seiten-Plug-ins 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, Veranstaltungen und Nachrichten

Jetzt kannst du die Tabs Chronik, Veranstaltungen und Nachrichten in das Plug-in aufnehmen:

  • Tab „Chronik“: Zeigt die aktuellsten Beiträge der Chronik deiner Facebook-Seite an.
  • Tab „Veranstaltungen“: Personen können Veranstaltungen deiner Seite über das Plug-in 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 Plug-in 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-Plug-ins 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 Plug-in wird 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 Plug-in unabhängig vom übergeordneten Container mit der angegebenen Breite angezeigt.

Keine dynamische Skalierung

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

  • Das Plug-in bestimmt seine widthbeim Laden der Seite.
  • Es reagiert nicht auf Änderungen am Feldmodellnach dem Laden der Seite.

Wenn du die width des Plug-ins beim Ändern der Fenstergröße anpassen möchtest, musst du das Plug-in 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.

Sprache anpassen

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

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

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