Eingebettete Beiträge

Über eingebettete Beiträge kannst du einfach öffentliche Beiträge (von einer Seite oder 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)

Vollständigen Beitrag einfügen

Code generieren

Einstellungen

Einstellung	Beschreibung	Standard
`data-href`	Die absolute URL des Beitrags.	`n/a`
`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`
`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, an welcher 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 Plugin für eingebettete Beiträge oder ein anderes soziales Plugin verwenden zu können, musst du das Facebook-JavaScript-SDK deiner Website 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 async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

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

3. Tag für eingebetteten Beitrag platzieren

Platziere als Nächstes das Tag des eingebetteten Beitrags an einer beliebigen Stelle deiner Website. 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 async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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 Screenshot unten dargestellt.

5. Anpassen

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

URL eines Beitrags abrufen

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

Kopiere die URL des Permalinks aus der Adresszeile deines Browsers.
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 Website 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 Plugins 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 der eingebetteten Beiträge automatisch an die Breite des Containers angepasst.

WordPress

Wenn du bereits das Facebook SDK für JavaScript in deiner WordPress-Website verwendest, kannst du das Plugin 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 mithilfe des Snippets zum Kopieren und Einfügen einbettest (von jedem Facebook-Beitrag abrufbar), wird das Plugin für eingebettete Beiträge wahrscheinlich nicht angezeigt, da WordPress alle &-Zeichen in #038; konvertiert, sodass das Plugin nicht funktioniert.

Füge das Plugin stattdessen mithilfe des folgenden Codes hinzu:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v19.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></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.

FAQs

Wie zeige ich soziale Plugins in verschiedenen Sprachen an?

Wenn du die HTML5- oder XFBML-Versionen verwendest, musst du beim Instanziieren der Bibliothek den Sprachcode einbeziehen.

Ändere den Wert von js.src beim Laden des SDK, um dein Gebietsschema zu verwenden. Ersetze en_US durch dein Gebietsschema, z. B. fr_FR für Französisch (Frankreich):

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

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

Die unterstützten Gebietsschemata findest du in der XML-Datei der Facebook-Gebietsschemata.

Möglicherweise musst du die Breite eines sozialen Plugins anpassen, damit andere Sprachen vollständig angezeigt werden. Weitere Informationen dazu findest du auf unserer Seite Lokalisierung und Übersetzung.

Permalink

Was sehen Personen in eingebetteten Beiträgen?

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.

Permalink

Was passiert, wenn jemand einen Beitrag löscht oder die Zielgruppenauswahl des Beitrags ändert?

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

Permalink