Mit dem Facebook Plugin „Page Plugin“ ist es einfach möglich die eigene Facebook Chronik, Veranstaltungen oder Nachrichten in eine Webseite zu integrieren. Das hat den Vorteil, dass auch Leute, die sich nicht in Facebook auskennen oder kein Konto haben, trotzdem folgende Informationen kompakt erhalten:

  • Chronik: Zeigt die aktuellsten Beiträge der Chronik der Facebook-Seite an
  • Veranstaltungen: Personen können Veranstaltungen der Seite über das Plugin abonnieren.
  • Nachrichten: Personen können direkt von der Webseite aus Nachrichten an die Facebook Seite senden. Dazu müssen sie angemeldet sein.

Die Voraussetzung ist, dass die Facebook Seite öffentlich zugänglich ist.

Beispiel von WEBDESIGN-DAVOS

Das folgende Beispiel zeigt die Integration der eigenen Facebook Seite von WEBDESIGN-DAVOS auf dieser mit WordPress erstellten Webseite.

Facebook API in Header integrieren

Um das Laden einer Facebook Seite zu ermöglichen, muss im Header folgendes JavaScript hinzugefügt werden, damit die Inhalte geladen werden:

<!-- Facebook -->	
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v3.1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Es sollte beachtet werden, dass das Laden Facebook API einige Zeit in Anspruch nimmt. Dies kann sich auf die Seitenladegeschwindigkeit auswirken. Es sollte sichergestellt werden, dass die Einbussen nicht zu gross sind. Mehr Informationen wie die Seitengeschwindigkeit überprüft werden kann unter Page Speed Check von Webseiten.

Chronik, Veranstaltungen und Nachrichten in Seite oder Artikel integrieren

Um die Chronik, Veranstaltungen und Nachrichten Beiträge auf einer WordPress Seite oder Artikel zu integrieren, muss folgender HTML Code vorhanden sein:

Chronik

<div class="fb-page" data-href="https://www.facebook.com/Webdesign-Davos-814607098726543/" data-tabs="timeline" data-width="500" data-height="200000" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
<blockquote class="fb-xfbml-parse-ignore" cite="https://www.facebook.com/Webdesign-Davos-814607098726543/"><a href="https://www.facebook.com/Webdesign-Davos-814607098726543/" data-wplink-edit="true">Webdesign-Davos Chronik</a></blockquote>
</div>

Veranstaltungen

<div class="fb-page" data-href="https://www.facebook.com/Webdesign-Davos-814607098726543" data-tabs="events" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
<blockquote class="fb-xfbml-parse-ignore" cite="https://www.facebook.com/Webdesign-Davos-814607098726543"><p><a href="https://www.facebook.com/Webdesign-Davos-814607098726543">Webdesign-Davos Veranstaltungen</a></p></blockquote>
</div>

Nachrichten

<div class="fb-page" data-href="https://www.facebook.com/pg/Webdesign-Davos-814607098726543" data-tabs="messages" data-width="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
<blockquote class="fb-xfbml-parse-ignore" cite="https://www.facebook.com/pg/Webdesign-Davos-814607098726543"><a href="https://www.facebook.com/pg/Webdesign-Davos-814607098726543">Webdesign-Davos Nachrichten</a><p></p></blockquote>
</div>

Eingebetteter Beitrag

<div class="fb-post" data-href="https://www.facebook.com/permalink.php?story_fbid=814620695391850&id=814607098726543" data-width="500" data-show-text="true">
<blockquote class="fb-xfbml-parse-ignore" cite="https://www.facebook.com/permalink.php?story_fbid=814620695391850&id=814607098726543">Posted by <a href="https://www.facebook.com/Webdesign-Davos-814607098726543/">Webdesign-Davos</a> on <a href="https://www.facebook.com/permalink.php?story_fbid=814620695391850&id=814607098726543">Saturday, August 4, 2018</a></blockquote>
</div>
Diesen Artikel teilen

Hinterlassen Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*
*