Eingebettete Beiträge

Über eingebettete Beiträge kannst du einfach öffentliche Beiträge (von einer Seite der einer Person auf Facebook) in den Inhalt deiner Webseite aufnehmen. Du kannst nur öffentliche Beiträge von Facebook-Seiten und -Profilen einbetten.

Codegenerator

URL des Beitrags
Die Pixelbreite des Beitrags (von 350 bis 750)

Einstellungen

Einstellung Beschreibung Standard

data-href

Die absolute URL des Beitrags.

n/a

data-width

Die Breite des Beitrags. Min. 350 Pixel; Max. 750 Pixel. Lasse dies leer, um eine flexible Breite zu verwenden.

Flexible Breite

data-show-text

Wird auf den Fotobeitrag angewendet. Lege true fest, um den Text aus dem Facebook-Beitrag einzufügen (falls vorhanden).

false

Abrufen des Codes von einem Beitrag

1. Zum Beitrag navigieren

Du kannst den Einbettungscode direkt aus dem Beitrag selbst abrufen. Wenn der Beitrag öffentlich ist, klicke auf das Symbol, das oben rechts im Beitrag auf Facebook angezeigt wird.

Wähle im Dropdown-Menü die Option Embed Post aus:

Wähle bei Fotobeiträgen den Button Embed Post unten rechts:

2. Code kopieren und einfügen

Es wird ein Dialogfeld mit dem Code für die Einbettung deines Beitrags angezeigt. Kopiere diesen Code und füge ihn an der Stelle deiner Webseite ein, wo der Beitrag angezeigt werden soll.

Technische Einzelheiten dazu findest du im Abschnitt Manuelles Hinzufügen von Code.

Manuelles Hinzufügen von Code

Neben der Verwendung des Codegenerators kannst du den Code auch manuell einbetten.

1. Beitrags-URL abrufen

Zunächst musst du die URL des Beitrags abrufen, den du teilen möchtest. Der Beitrag muss öffentlich sein. Dies wird durch das graue Globussymbol direkt neben der Veröffentlichungszeit des Beitrags angegeben:

Zu Testzwecken kannst du diese Beispiel-URL einsetzen:

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. JavaScript-SDK laden

Um das Plug-in für eingebettete Beiträge oder ein anderes soziales Plug-in verwenden zu können, musst du das Facebook-JavaScript-SDK deiner Webseite hinzufügen. Du musst das SDK nur einmal auf einer Seite laden, am besten direkt nach dem öffnenden <body>-Tag:

<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Weitere Informationen zum Implementieren des JavaScript-SDK findest du im Leitfaden JavaScript-SDK – Kurzanleitung.

3. Tag des eingebetteten Beitrags platzieren

Platziere als Nächstes das Tag des eingebetteten Beitrags an einer beliebigen Stelle deiner Webseite. Ersetze {your-post-url} durch die URL deines Beitrags.

<div class="fb-post" data-href="{your-post-url}"></div>

4. Testen

Nach Abschluss dieser Schritte kannst du deinen eingebetteten Beitrag testen. Eine vollständige Integration sieht in etwa wie folgt aus:

<html>
  <title>My Website</title>
<body>
  <script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

Das Ergebnis unseres Testbeispiels wird im unten stehenden Screenshot dargestellt.

5. Anpassen

Weiter unten auf dieser Seite erfährst du, wie du Größe, Sprache und andere Einstellungen anpassen kannst.

Abrufen der URL eines Beitrags

Es kann vorkommen, dass dein Einbettungscode von einem CMS erstellt wird und du nur die rohe Beitrags-URL benötigst. Du kannst die URL eines Beitrags auf zwei Arten abrufen:

  1. Kopiere die URL des Permalinks aus der Adresszeile deines Browsers.
  2. Klicke mit der rechten Maustaste auf die Veröffentlichungszeit des Beitrags und kopiere die Linkadresse.

Beide Methoden sind im folgenden Screenshot rot hervorgehoben.

Per Graph API

Wenn du eingebettete Beiträge automatisch in deine Webseite integrieren möchtest, verwendest du wahrscheinlich die Graph API zum Aggregieren von Beiträgen. Möglicherweise verwendest du den Page Feed API-Endpunkt und den fields-Parameter permalink_url.

Für deine Anfrage an /{page-id}/feed?fields=permalink_url erhältst du folgende Antwort:

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

Layout in der Desktop-Version

Du kannst die Breite des eingebetteten Beitrags auf dem Desktop über das data-width-Attribut im Tag des eingebetteten Beitrags wie im folgenden Beispiel gezeigt anpassen. Wähle einen Wert zwischen 350 und 750 Pixel.

Verwende keine CSS-Style-Tags, um die Größe eines Plug-ins anzupassen. Dies kann zu Anzeigefehlern führen.

<!-- WRONG! -->
<style type="text/css">
.fb-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

<!-- CORRECT -->
<div 
  class="fb-post" 
  data-width="500"
  data-href="{your-post-url}">
</div>

Layout im mobilen Web

Im mobilen Web wird die Größe von eingebetteten Beiträgen automatisch an die Breite des Containers angepasst.

Wordpress

Wenn du bereits das Facebook SDK für JavaScript in deiner Wordpress-Webseite verwendest, kannst du das Plug-in für eingebettete Beiträge einsetzen, indem du deinem Wordpress-Beitrag einfach das fb-post-Tag hinzufügst:

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

Wenn du das Facebook SDK für JavaScript nicht verwendest und einen Beitrag per Kopieren und Einfügen des Codeausschnitts einbettest (von jedem Facebook-Beitrag abrufbar), wird das Plug-in für eingebettete Beiträge wahrscheinlich nicht angezeigt, da Wordpress alle &-Zeichen in #038; konvertiert, sodass das Plug-in nicht funktioniert.

Verwende stattdessen den folgenden Code, um das Plug-in hinzuzufügen:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v2.10'
    });
  }; 
  (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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

Wir veröffentlichen schon bald eine neue, einfache Wordpress-Integration.

FAQ

Wenn du die HTML5- oder XFBML-Versionen verwendest, solltest du den Sprachencode beim Instanziieren der Bibliothek hinzufügen.

Wenn du das SDK lädst, passe den Wert „js.src“ an deine Ländereinstellung an. Ersetze hierzu einfach „en_US“ durch deine Ländereinstellung, z. B. „fr_FR“ für Französisch (Frankreich):

// Beispiel 1:
'//connect.facebook.net/fr_FR/sdk.js';

// Beispiel 2:
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6"; 

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.

Der eingebettete Beitrag zeigt alle damit verknüpften Medien sowie die Anzahl der „Gefällt mir“-Markierungen, wie oft der Beitrag geteilt wurde und wie viele Kommentare er aufweist. Durch Einbetten von Beiträgen können Nutzer deiner Webseite dieselben detaillierten Informationen sehen, die auch auf Facebook.com angezeigt werden. Außerdem können Personen die Verfasser von Inhalten oder Seiten direkt über den eingebetteten Beitrag abonnieren oder mit „Gefällt mit“ markieren.

In diesem Fall wird die folgende Meldung anstelle des eingebetteten Beitrags angezeigt: