Fehler beim Einbetten von Facebook-Posts in WordPress
Früher war alles besser: zumindest was das Einbetten von Facebook-Posts bei WordPress anging.
Bis vor ein paar Wochen war das Einbetten von Posts einer Facebook-Seite in WordPress-Seiten denkbar einfach. Ein Klick auf den kleinen Pfeil oben rechts des Posts, den man einbetten möchte, dann kopierte man den generierten Code und fügte ihn bei WordPress im Text-Teil ein. Seit ca. zwei Monaten funktioniert dieser Link aus mir unerfindlichen Gründen jedoch nicht mehr richtig (evtl. hat es etwas mit der Umstellung der API zu tun?). Statt des Bildes oder Videos erscheint dann im Ergebnis nur noch Text und das noch in einem merkwürdigen Format:
Lösungen zum Einbetten von Facebook-Einträgen bei WordPress
Die folgenden drei Lösungsvorschläge haben mir bei meinen beiden Seiten geholfen, sind aber leider nicht allgemeingültig und funktionieren auch nicht bei jeder WordPress-Installation. Variante 3 ist aber bisher am erfolgversprechenden und hat bei drei verschiedenen Seiten funktioniert. Aber einen Versuch ist es ja Wert, oder? ;) Lasst mich gerne wissen, wenn ihr noch weitere Ideen habt und ich nehme sie gerne hier auf.
Variante 1: Link kopieren
Die einfachste Variante (die übrigens hier auf meinem Blog funktioniert hat) ist es, einfach auf den jeweiligen Post zu klicken und dann aus dem Browserfenster den Link zu kopieren. Den Facebook-Link dann einfach in die Visuelle Bearbeitungsmaske eingeben und schon erscheint der Post automatisch und kann wie gewohnt von den Usern geliked, geteilt und kommentiert werden. Und so sieht das Ganze dann aus:
Variante 2: Alte Einbettungs-Variante nutzen
Glücklicherweise hatten wir in unserem Code noch die vorherige Einbettungs-Variante von Facebook, die noch funktionierte. Dort können wir jetzt durch das Austauschen von Links quasi die alte Variante nachbauen. Das ist zwar etwas mühsam, aber immer noch besser, als wenn es gar nicht funktioniert.
<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/de_DE/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/SEITENNAME/posts/POSTNUMMER" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/SEITENNAME/posts/POSTNUMMER">Beitrag</a> von <a href="https://www.facebook.com/SEITENNAME">NAME DER SEITE</a>.</div></div>
Ich habe die Teile des Codes markiert, die Du austauschen musst, um deinen Post einbetten zu können. Dieser Code muss dann kopiert und in der Text-Bearbeitungsmaske eingefügt werden. Diese Variante funktionierte leider nicht auf diesem Blog, klappt jedoch wunderbar bei der Arbeit.
Variante 3: Neuer Einbetten-Code + zusätzlicher SDK-Aufruf
Diese Version scheint bisher die vielversprechendste, wenn auch etwas umständlich. Klickt zunächst auf den kleinen Pfeil oben rechts auf dem Facebook-Beitrag, den ihr einbetten wollt, und dann auf „Beintrag einbetten“. Kopiert dann den automatisch generierten Code und fügt diesen in die Text-Bearbeitungsmaske bei WordPress ein.
In nächsten Schritt müsst ihr nun den rot markierten Teil des Codes löschen.
<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/de_DE/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/seehuus.hotel/posts/454571798038226:0" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/SEITENNAME/posts/POSTNUMMER"><p>Live vom Niendorfer Strand. Traumhaft! Und ja, der Himmel ist wirklich so blau! ;)www.seehuus-Hotel.de</p>Posted by <a href="https://www.facebook.com/SEITENNAME">NAME DER SEITE</a> on <a href="https://www.facebook.com/SEITENNAME/posts/POSTNUMMER">Freitag, 15. Mai 2015</a></blockquote></div></div>
Nun hängt ihr an den verbleibenden Teil noch folgende Endung an:
<script>window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v2.3' }); }; (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/de_DE/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
Jetzt sollte das Ganze funktionieren.
Andere Ideen?
Vielleicht hat es dem Einen oder Anderen ja geholfen, das Problem zu lösen. Wenn nicht, freue ich mich über andere Anregungen und Tipps und/oder Diskussionen über das Thema.
Natürlich habe ich auch schon versucht, Facebook wegen dieses Problems zu kontaktieren. Aber natürlich hört man wieder einmal nichts vom [ironie] wunderbaren Kundenservice [/ironie]. Warum das Problem in dieser mittlerweile doch schon recht langen Zeit immer noch nicht von Facebook behoben wurde, kann ich nicht nachvollziehen. Ich kann doch schließlich nicht die Einzige sein, die dieses Problem hat, oder?