Wie man Facebook-Videos in WordPress-Beiträge und -Seiten einbettet

Das Einbetten eines Facebook-Videos in einen WordPress-Beitrag oder eine Seite bedeutet, einen live abspielbaren Video-Player direkt in Ihren Inhalt einzufügen – entweder über einen URL-basierten oEmbed-Handshake oder ein iframe-Snippet – ohne Datei-Uploads. WordPress verarbeitet dies nativ über seine integrierte oEmbed-Anbieterliste, die Facebook enthält, was bedeutet, dass eine rohe Video-URL, die in den Editor eingefügt wird, ausreicht, um einen voll funktionsfähigen Player im Frontend zu rendern.

Dieser Leitfaden behandelt jede verfügbare Methode in technischer Tiefe: den Gutenberg-Block-Editor, den Classic Editor, den nativen Einbettungscode von Facebook und Drittanbieter-Plugins. Er behandelt auch die Authentifizierungsänderungen, die Facebook 2018 und 2023 eingeführt hat und die das naive URL-Einfügen für viele Benutzer unterbrechen – ein kritisches Detail, das die meisten Tutorials völlig auslassen.

Warum das Einbetten von Facebook-Videos komplexer ist als es aussieht

Facebook hat seinen anonymen oEmbed-Endpunkt im Oktober 2020 eingestellt. Seitdem erfordert jede oEmbed-Anfrage an graph.facebook.com/oembed_video eine gültige Facebook App ID und eine registrierte Domain. WordPress Core listet Facebook weiterhin als unterstützten oEmbed-Anbieter auf, aber ohne eine konfigurierte App ID schlägt die Einbettung still fehl und rendert nur einen Platzhalter oder eine rohe URL.

Dies ist der mit Abstand häufigste Grund, warum WordPress-Entwickler feststellen, dass das Einfügen einer Facebook-Video-URL auf Produktionsseiten „einfach nicht funktioniert”, obwohl es in einigen lokalen oder gecachten Umgebungen zu funktionieren scheint.

Das Verständnis dieser Einschränkung bestimmt, welche Methode Sie verwenden sollten.

Methode 1: Gutenberg-Block-Editor mit dem Facebook-Einbettungsblock

Der Gutenberg-Block-Editor bietet einen dedizierten Einbettungsblock mit einer Facebook-Variante. Dies ist der empfohlene Weg für die meisten WordPress-Installationen ab Version 5.0.

Schritt 1: Kopieren Sie die korrekte Facebook-Video-URL

Nicht alle Facebook-Video-URLs sind gleichwertig. Verwenden Sie die kanonische Share-URL, nicht die URL aus der Adressleiste Ihres Browsers, während Sie ein Video im Vollbildmodus ansehen.

1. Navigieren Sie in Ihrem Browser zum Facebook-Video.
2. Klicken Sie auf das Drei-Punkte-Menü (...) in der oberen rechten Ecke des Beitrags.
3. Wählen Sie Link kopieren.

Die resultierende URL sollte einem dieser Formate folgen:

• https://www.facebook.com/username/videos/1234567890/
• https://www.facebook.com/watch/?v=1234567890
• https://fb.watch/xxxxxxxxxx/

Vermeiden Sie URLs, die /reel/ enthalten, wenn Sie ein Standard-Video einbetten möchten – Reels verwenden einen anderen Endpunkt und werden möglicherweise nicht korrekt über den Standard-oEmbed-Pfad aufgelöst.

Schritt 2: Öffnen Sie Ihren Beitrag oder Ihre Seite im Block-Editor

Navigieren Sie in Ihrem WordPress-Dashboard zu Beiträge oder Seiten und öffnen Sie das Inhaltselement, das Sie bearbeiten möchten. Klicken Sie auf das +-Symbol, um einen neuen Block an der gewünschten Position hinzuzufügen.

Schritt 3: Fügen Sie den Facebook-Einbettungsblock ein

Geben Sie Facebook in das Block-Suchfeld ein oder navigieren Sie zu Einbettungen im Block-Panel. Wählen Sie den Facebook-Block. Ein URL-Eingabefeld erscheint.

Schritt 4: Fügen Sie die Video-URL ein und betten Sie sie ein

Fügen Sie die kopierte URL in das Eingabefeld ein und drücken Sie Enter oder klicken Sie auf Einbetten. WordPress sendet eine oEmbed-Anfrage an die Facebook-API. Wenn eine gültige App ID konfiguriert ist (siehe den App ID-Abschnitt unten), wird der Video-Player sofort in der Editor-Vorschau gerendert.

Wenn Sie die Meldung *„Entschuldigung, dieser Inhalt konnte nicht eingebettet werden”* sehen, liegt das Problem fast sicher an der fehlenden App ID – nicht am URL-Format.

Schritt 5: Veröffentlichen oder Aktualisieren

Klicken Sie auf Veröffentlichen oder Aktualisieren. Der eingebettete Player ist jetzt im Frontend live.

Methode 2: Classic Editor (URL in einer eigenen Zeile)

Für Websites, die noch das Classic Editor-Plugin oder WordPress-Versionen vor 5.0 verwenden, funktioniert der oEmbed-Mechanismus über einen anderen Code-Pfad, basiert jedoch auf derselben zugrunde liegenden API.

Schritte

1. Kopieren Sie die Facebook-Video-URL mit demselben oben beschriebenen Verfahren.
2. Öffnen Sie Ihren Beitrag oder Ihre Seite im Classic Editor.
3. Wechseln Sie zur Registerkarte Visuell (nicht Text/HTML).
4. Fügen Sie die URL in einer eigenen Zeile ein, ohne umgebenden Text, ohne Hyperlink-Markup und ohne nachfolgende Zeichen.
5. Klicken Sie auf Veröffentlichen oder Vorschau.

Die WP_oEmbed-Klasse von WordPress fängt die URL während der the_content-Filterverarbeitung ab und ersetzt sie durch das iframe-Markup, das vom oEmbed-Endpunkt von Facebook zurückgegeben wird.

Kritischer Fallstrick: Wenn Sie die URL innerhalb eines Absatzes mit anderem Text einfügen, löst WordPress keine oEmbed-Auflösung aus. Die URL muss einen eigenständigen Absatz-Knoten im Beitragsinhalt belegen.

Methode 3: Nativer Einbettungscode von Facebook (iframe)

Diese Methode umgeht das oEmbed-System von WordPress vollständig und funktioniert unabhängig von der App ID-Konfiguration. Sie ist die zuverlässigste Option für öffentliche Videos.

So erhalten Sie den Einbettungscode

1. Navigieren Sie zum Facebook-Video.
2. Klicken Sie auf das Drei-Punkte-Menü (...) und wählen Sie Einbetten.
3. Facebook generiert ein <iframe>-Snippet. Kopieren Sie das vollständige Snippet.

Ein typisches Facebook-Video-Einbettungs-Snippet sieht so aus:

<iframe
  src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fusername%2Fvideos%2F1234567890%2F&show_text=false&width=560&t=0"
  width="560"
  height="314"
 
  scrolling="no"
  frameborder="0"
  allowfullscreen="true"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>

Einfügen des iframes in WordPress

In Gutenberg: Fügen Sie einen Benutzerdefiniertes HTML-Block hinzu und fügen Sie den iframe-Code direkt ein.

Im Classic Editor: Wechseln Sie zur Registerkarte Text (HTML-Ansicht) und fügen Sie den iframe an der gewünschten Position ein. Fügen Sie ihn nicht in der Visuell-Registerkarte ein – WordPress wird das HTML entfernen oder maskieren.

Den iframe responsiv machen

Facebooks Standard-iframe verwendet feste Pixelabmessungen, was auf mobilen Viewports zu Problemen führt. Umschließen Sie ihn mit einem responsiven Container:

<div>
  <iframe
    src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fusername%2Fvideos%2F1234567890%2F&show_text=false&width=560"
   
    scrolling="no"
    frameborder="0"
    allowfullscreen="true"
    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
  </iframe>
</div>

Der padding-bottom: 56.25%-Wert behält ein 16:9-Seitenverhältnis bei. Passen Sie ihn für 4:3-Inhalte auf 75% an.

Beheben der Facebook App ID-Anforderung

Wenn Sie möchten, dass die native oEmbed-Methode von WordPress (Methoden 1 und 2) zuverlässig funktioniert, müssen Sie eine Facebook-App registrieren und deren ID an WordPress übergeben.

Schritt 1: Erstellen Sie eine Facebook-App

1. Gehen Sie zu developers.facebook.com und melden Sie sich an.
2. Klicken Sie auf Meine Apps > App erstellen.
3. Wählen Sie den App-Typ Consumer.
4. Schließen Sie den Setup-Assistenten ab. Sie müssen die App für die grundlegende oEmbed-Nutzung nicht zur Überprüfung einreichen.
5. Kopieren Sie Ihre App ID aus dem App-Dashboard.

Schritt 2: Fügen Sie die App ID zu WordPress hinzu

Der sauberste Ansatz ist, die App ID über die functions.php Ihres Themes oder ein site-spezifisches Plugin hinzuzufügen:

add_filter( 'oembed_fetch_url', function( $provider, $url, $args ) {
    if ( strpos( $provider, 'facebook.com' ) !== false ) {
        $provider = add_query_arg( 'access_token', 'YOUR_APP_ID|YOUR_CLIENT_TOKEN', $provider );
    }
    return $provider;
}, 10, 3 );

Ersetzen Sie YOUR_APP_ID und YOUR_CLIENT_TOKEN durch die Werte aus Ihrem Facebook App-Dashboard unter Einstellungen > Erweitert > Client-Token.

Alternativ übernehmen mehrere Plugins dies automatisch – insbesondere Embed Plus for Facebook und WP Facebook oEmbed Fix.

Methode 4: Drittanbieter-Plugins für erweiterte Kontrolle

Plugins sind die richtige Wahl, wenn Sie Funktionen über die grundlegende Wiedergabe hinaus benötigen: benutzerdefinierte Player-Abmessungen, Lazy Loading, GDPR-Zustimmungsgates oder Feed-basiertes Einbetten.

Smash Balloon Social Post Feed ist die am weitesten verbreitete Option. Nach der Installation und Facebook-Kontoautorisierung bietet es einen Shortcode und einen Gutenberg-Block mit detaillierten Steuerelementen für Player-Breite, Autoplay-Verhalten und Untertitelanzeige.

Embed Plus for Facebook konzentriert sich speziell auf die oEmbed-Authentifizierung und ist eine leichtgewichtige Lösung, wenn Ihr einziges Ziel darin besteht, das App ID-Problem zu beheben, ohne ein vollständiges Social-Feed-Plugin hinzuzufügen.

WP YouTube Lyte / Embed Optimizer (vom WordPress Performance-Team) kann Facebook-Einbettungen lazy-loaden, um zu verhindern, dass der iframe das Seitenrendering blockiert – eine bedeutende Core Web Vitals-Verbesserung auf inhaltsreichen Seiten.

Methodenvergleich

Leistungs- und Core Web Vitals-Überlegungen

Facebooks Einbettungs-iframe lädt mehrere Drittanbieter-Skripte von connect.facebook.net, die 200–600ms render-blockierende Latenz hinzufügen und sich negativ auf die Werte für Largest Contentful Paint (LCP) und Total Blocking Time (TBT) auswirken können.

Praktische Gegenmaßnahmen:

• Facade-Muster: Ersetzen Sie den iframe durch ein statisches Thumbnail und laden Sie den echten Player erst beim Klick des Benutzers. Der Lite YouTube Embed-Ansatz kann für Facebook mit einer benutzerdefinierten Facade angepasst werden.
• loading="lazy"-Attribut: Fügen Sie loading="lazy" zum iframe-Tag hinzu, um das Laden zu verzögern, bis das Element in den Viewport eintritt.
• Selbst gehostete Video-Alternative: Wenn das Video Ihr eigener Inhalt ist, erwägen Sie, es direkt in die WordPress-Mediathek hochzuladen oder es auf einem VPS mit einer Video-Streaming-Konfiguration zu hosten. Dies eliminiert die Abhängigkeit von Drittanbieter-Skripten vollständig.

Für WordPress-Websites mit hohem Traffic, bei denen die Seitengeschwindigkeit die Konversion direkt beeinflusst, gibt Ihnen der Betrieb Ihrer eigenen Serverinfrastruktur auf einem Dedicated Server vollständige Kontrolle über Caching-Header, CDN-Integration und Skript-Ladereihenfolge – nichts davon ist in gemeinsam genutzten Umgebungen verfügbar.

Datenschutz, DSGVO und Cookie-Einwilligung

Wenn ein Besucher eine Seite mit einer Facebook-Einbettung lädt, setzen Facebooks Skripte Drittanbieter-Cookies und können Verhaltensdaten sammeln – selbst wenn der Besucher kein Facebook-Konto hat. Unter der DSGVO (EU), LGPD (Brasilien) und CCPA (Kalifornien) stellt dies eine Drittanbieter-Datenverarbeitung dar, die eine ausdrückliche Benutzereinwilligung erfordert, bevor der iframe geladen wird.

Implementieren Sie ein Einwilligungsgate mit einem Plugin wie Complianz oder Cookiebot, das den iframe durch einen Platzhalter ersetzt, bis der Benutzer die entsprechende Cookie-Kategorie akzeptiert. Dies ist für Websites mit EU-Traffic nicht optional – es ist eine gesetzliche Anforderung.

Fehlerbehebung bei häufigen Einbettungsfehlern

Video zeigt einen Platzhalter oder eine fehlerhafte Einbettung im Editor, funktioniert aber im Frontend: Dies ist ein bekanntes Gutenberg-Rendering-Problem. Die Editor-Vorschau verwendet die Sitzung des Admin-Benutzers, die möglicherweise nicht den korrekten oEmbed-Cache hat. Löschen Sie den oEmbed-Cache, indem Sie die _oembed_*-Post-Meta-Einträge für den betroffenen Beitrag löschen, oder verwenden Sie den WP-CLI-Befehl:

wp post meta delete <post_id> --match-prefix=_oembed_

„Entschuldigung, dieser Inhalt konnte nicht eingebettet werden” im Frontend: Fast immer durch die fehlende App ID verursacht. Befolgen Sie die oben genannten App ID-Konfigurationsschritte.

Video wird korrekt eingebettet, verschwindet aber nach einem WordPress-Update: WordPress aktualisiert seine oEmbed-Anbieterliste regelmäßig. Eine Änderung des Facebook-API-Endpunkts kann bestehende Einbettungen unterbrechen. Überprüfen Sie die wp-includes/class-oembed.php-Anbieterliste und vergleichen Sie sie mit dem aktuell dokumentierten Endpunkt von Facebook.

Einbettung funktioniert in der Staging-Umgebung, aber nicht in der Produktion: Facebooks oEmbed-API validiert die anfragende Domain anhand der Liste der erlaubten Domains der App. Fügen Sie Ihre Produktionsdomain zum Feld App-Domains der Facebook-App unter Einstellungen > Allgemeines hinzu.

Private oder Gruppen-Videos können nicht eingebettet werden: Facebooks oEmbed-API stellt nur öffentlich zugängliche Videos bereit. Es gibt keine unterstützte Umgehungslösung für private Inhalte – die einzige Option ist, das Video herunterzuladen und es unabhängig zu hosten, zum Beispiel auf einem VPS mit cPanel mit einem für direktes Streaming konfigurierten Medienverzeichnis.

Hosting-Überlegungen für WordPress-Websites mit Rich-Media-Einbettungen

Seiten mit eingebetteten Video-iframes sind deutlich schwerer als Standard-Inhaltsseiten. Jede Facebook-Einbettung löst DNS-Lookups, TCP-Handshakes und Skript-Downloads von Facebooks CDN bei jedem nicht gecachten Seitenaufruf aus.

Wenn Ihre WordPress-Website auf Shared Web Hosting läuft, ist die serverseitige Verarbeitungszeit nicht der Engpass – die clientseitigen Drittanbieter-Anfragen sind es. Wenn Sie jedoch auch Video-Dateien selbst hosten oder eine medienlastige Website betreiben, werden die Bandbreiten- und I/O-Limits des Shared Hostings zu relevanten Einschränkungen.

Für Websites, die eingebettete Social-Videos mit originalen Medieninhalten kombinieren, wird eine VPS Hosting-Umgebung mit Object-Caching (Redis oder Memcached), einem Full-Page-Cache (Nginx FastCGI-Cache oder Varnish) und einem ordnungsgemäß konfigurierten CDN messbar bessere Core Web Vitals-Werte liefern als jede gemeinsam genutzte Umgebung.

Die Absicherung Ihres WordPress-Admins und Ihrer Einbettungs-Endpunkte mit einem gültigen SSL-Zertifikat ist ebenfalls unerlässlich – Facebooks API wird oEmbed-Antworten an Nicht-HTTPS-Ursprünge verweigern. Wenn Ihre Website noch nicht auf HTTPS ist, beginnen Sie mit einem SSL-Zertifikat, bevor Sie Einbettungsprobleme beheben.

Wichtige technische Erkenntnisse

• Facebooks oEmbed-Endpunkt erfordert seit Oktober 2020 eine App ID. Jedes Tutorial, das dies nicht erwähnt, ist veraltet.
• Der Gutenberg-Einbettungsblock und die Classic Editor-URL-Methode basieren beide auf derselben WP_oEmbed-Klasse und derselben App ID-Anforderung.
• Die native Facebook-iframe-Methode ist der zuverlässigste Fallback für öffentliche Videos und erfordert keine API-Anmeldedaten.
• iframes mit festen Abmessungen müssen für korrektes mobiles Rendering in einen responsiven CSS-Container eingeschlossen werden.
• Facebook-Einbettungen laden Drittanbieter-Skripte, die Core Web Vitals beeinflussen. Implementieren Sie Lazy Loading oder ein Facade-Muster auf leistungssensitiven Seiten.
• DSGVO-Konformität erfordert ein Einwilligungsgate, bevor der iframe geladen wird – nicht nur ein Cookie-Banner.
• Private Facebook-Videos können durch keine unterstützte Methode auf externen Websites eingebettet werden.
• Stellen Sie immer sicher, dass Ihre Produktionsdomain in den erlaubten Domains der Facebook-App aufgeführt ist, um Staging-zu-Produktions-Unterbrechungen zu verhindern.

Häufig gestellte Fragen

Warum zeigt meine Facebook-Video-Einbettung einen fehlerhaften Platzhalter anstelle des Videos?

Die wahrscheinlichste Ursache ist eine fehlende oder falsch konfigurierte Facebook App ID. Seit Oktober 2020 erfordert Facebooks oEmbed-API eine registrierte App ID mit Ihrer Domain in den erlaubten Domains. Konfigurieren Sie die App ID in WordPress mit dem oembed_fetch_url-Filter oder installieren Sie ein Plugin, das dies automatisch handhabt.

Kann ich ein privates Facebook-Video in WordPress einbetten?

Nein. Facebooks oEmbed-API löst nur öffentlich zugängliche Video-URLs auf. Videos, die auf Freunde, Gruppen oder bestimmte Zielgruppen beschränkt sind, können durch keine unterstützte Methode auf externen Websites eingebettet werden. Die einzige Alternative ist, das Video herunterzuladen und auf Ihrem eigenen Server zu hosten.

Verlangsamt das Einbetten von Facebook-Videos meine WordPress-Website?

Ja, messbar. Jede Facebook-Einbettung lädt Skripte von connect.facebook.net, die render-blockierende Latenz hinzufügen. Mildern Sie dies, indem Sie loading="lazy" zum iframe hinzufügen, eine Click-to-Load-Facade implementieren oder ein Plugin wie Embed Optimizer verwenden, um die Skriptausführung zu verzögern.

Benötige ich ein Plugin, um Facebook-Videos in WordPress einzubetten?

Nicht unbedingt. WordPress unterstützt Facebook oEmbed nativ, aber Sie müssen eine gültige App ID konfiguriert haben, damit es nach 2020 funktioniert. Wenn Sie den nativen iframe-Einbettungscode direkt von Facebook verwenden, ist überhaupt kein Plugin erforderlich.

Ist es legal, Facebook-Videos auf meiner Website einzubetten?

Das Einbetten öffentlich geteilter Facebook-Videos über Facebooks offiziellen Einbettungsmechanismus ist im Allgemeinen gemäß Facebooks Nutzungsbedingungen erlaubt, sofern das Originalvideo kein Urheberrecht verletzt. Das Einbetten löst jedoch Facebooks Tracking-Skripte aus, was für Websites mit EU-Besuchern DSGVO-Verpflichtungen schafft. Implementieren Sie immer ein Cookie-Einwilligungsgate, bevor Sie den iframe laden.