Blog-Trainer

WordPress-Seminare seit 2006

facebook-schulung

Achtung! Facebook-Posts in WordPress einbetten verschenkt Google-Juice (und was Sie dagegen tun können)

| 19.660 mal gelesen |

Seit heute kann man Facebook-Posts in beliebige Webseiten einbinden. Auf vielen Blogs kennt die Begeisterung keine Grenzen. Leider unterstützt Facebook noch nicht die einfache oEmbed-Methode, die das Einbetten von Tweets, YouTube-Videos, Tumblr-Posts oder Flickr-Fotos so bequem macht. Deshalb muss man zum Einbetten von Facebook-Posts umständlich Einbettungs-Code kopieren. Dieser Code hat leider ein paar Ecken und Kanten.

Aber eins nach dem anderen. Woher bekommt man den Einbettungscode? Loggen Sie sich in Facebook ein, suchen Sie den gewünschten Beitrag, klicken Sie auf den Winkel rechts oben im Post und klicken Sie auf „Beitrag einfügen“.

Einbettungscode für Facebook-Posts

Einbettungscode für Facebook-Posts

Kopieren Sie nun diesen Code in den WordPress-Beitrag, auf die WordPress-Seite oder in ein WordPress-Text-Widget. Der Code sieht etwa wie folgt aus:
<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/blogtrainer.wenzlaff/posts/656351397709751"> <div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/blogtrainer.wenzlaff/posts/656351397709751"> Beitrag</a> by <a href="https://www.facebook.com/blogtrainer.wenzlaff">Blogtrainer Wenzlaff</a>. </div> </div>
An der gewünschten Stelle sollte jetzt auf Anhieb der Facebook-Post auftauchen:

Prima! Wo aber ist das Problem?

Leider ist der Code etwas überladen. Am Anfang (bis zum schließenden </script>-Tag) steht ein Code-Snippet, das das Facebook Software Development Kit für Javascript aktiviert. Wenn Sie auf Ihrer Website bereits Like-Buttons oder Like-Box installiert haben, haben Sie wahrscheinlich auch längst das Facebook SDK aktiviert. (Ein Blick in den HTML-Quelltext der Seite hilft hier schnell weiter.) Probieren Sie also einmal, den Code bis zum schließenden Script-Tag zu entfernen. Funktioniert das Einbetten immer noch? Dann weiter!

Sieht doch schon viel übersichtlicher aus, oder?

<div class="fb-post" data-href="https://www.facebook.com/blogtrainer.wenzlaff/posts/656351397709751"> <div class="fb-xfbml-parse-ignore"> <a href="https://www.facebook.com/blogtrainer.wenzlaff/posts/656351397709751"> Beitrag</a> by <a href="https://www.facebook.com/blogtrainer.wenzlaff">Blogtrainer Wenzlaff</a>. </div> </div>

Schauen wir uns den verbleibenden Code genauer an, sehen wir, dass der zweite Divider eigentlich nichts weiter enthält, als zwei Follow-Links auf den Post und die zugehörige Facebook-Seite. Wozu? Um Link-Juice bei uns abzuziehen und dem Zuckerbub zu schenken! Also? Weg damit!

<div class="fb-post" data-href="https://www.facebook.com/blogtrainer.wenzlaff/posts/656351397709751"> </div>

Das ist alles, was übrig bleibt! Ein leerer Div mit zwei Attributen!

  • class=“fb-post“
  • data-href=“https://[Page-URL]/posts/[Post-ID]“>

Und das Einbetten funktioniert immer noch, wie man hier sieht:

Fazit

Wenn Sie Ihre WordPress-Seite beim Einbetten von Facebook-Posts nicht mit überflüssigem Code zumüllen wollen und auch nicht unbedingt Bock darauf haben, dem Zuckerbub Google-Juice zu schenken, dann putzen Sie den angebotenen Code mit ein paar schnellen Handgriffen.

Achtung! Facebook-Posts in WordPress einbetten verschenkt Google-Juice (und was Sie dagegen tun können) auf Facebook teilen
Achtung! Facebook-Posts in WordPress einbetten verschenkt Google-Juice (und was Sie dagegen tun können) auf Twitter teilen
Achtung! Facebook-Posts in WordPress einbetten verschenkt Google-Juice (und was Sie dagegen tun können) auf Google Plus teilen
Achtung! Facebook-Posts in WordPress einbetten verschenkt Google-Juice (und was Sie dagegen tun können) auf Xing teilen
Achtung! Facebook-Posts in WordPress einbetten verschenkt Google-Juice (und was Sie dagegen tun können) auf LinkedIn teilen

Das könnte Sie auch interessieren:

6 Kommentare

  1. Tja, machnes mal muss man bei WordPress schon Phantasie aufbringen um Probleme zu lösen. Danke für die Ausführungen ich werde das bei Gelegenheit mal testen.

    • @Christiana: Mit WordPress hat der Artikel eigentlich garnichts zu tun. Hier geht es nur um problematischen überladenen Facebook-Code. Das „Problem“ würde genauso bei TYPO3, Joomla, Drupal, (you name it) bestehen. Aber wer nutzt diese Oldtimer noch? 😉

  2. Pingback: Guten Tag. - Besserwerberblog • Marketing für Besserwerber

  3. Pingback: Facebook Post in Website integrieren - ToM 030

  4. Hallo Karl-Heinz,

    danke für denen Artikel den ich heute entdeckt habe – bin ein WP Anfänger – Gerade habe ich festgestellt das die schöne kurze Variante nicht mehr funktioniert. Leider. Gibt es eine „neue“ Möglichkeit dem Zuckerbub Google-Juice nicht zu schenke wenn ich Facebook Artikel einbinden will?

    Liebe Grüße von der Elbe, Ellerkalle

    • @Ellerkalle: Doch, es funktioniert nach wie vor. Die obigen Facebook-Posts sind mit dem oben beschriebenen Code eingebunden. Solange sie im Artikel zu sehen sind, funktioniert auch die beschriebene Variante. Einfach die Post-ID ermitteln, in den Code einsetzen, und es funzt.