Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

Facebook Embedded Posts – Statusmeldungen in WordPress einbetten

+++ Breaking News +++, so fingen gestern viele Blogbeiträge auf verschiedenen Blogs zum Thema Facebook / Social Media an. Facebook hat nämlich gestern Abend um 19:00 die „Embedded Posts“ vorgestellt. So ist es ab sofort möglich öffentliche Beiträge von Facebook Seiten oder privaten Profilen direkt in eure Webseite oder euren WordPress Blog einzubinden. Die Funktionen sind hierbei wie bei einem normalen Posting. Das heißt einen Embed Post kann man liken, kommentieren und teilen.

Um das ganze selbst in eurem WordPress Blog oder eurer WordPress Seite zu benutzen habe ich ein kleines Tutorial geschrieben. Als erstes müsst ihr das „JavaScript SDK“ in euer Theme einbinden. Hierzu geht ihr unter Design » Editor und geht dort in die Kopfzeile (header.php).

Nach dem <body>-Tag bzw. <body <?php body_class(); ?>> fügt ihr folgenden Code ein.

[js]<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>[/js]

 

Nun könnt ihr alle Facebook Plugins direkt über die <fb:>-Tags innerhalb eurer Beiträge und Seiten benutzen.

Das Snippet dazu sieht wie folgt aus.

[html]<fb:post href="urlzumpost"></fb:post>[/html]

…bzw. so, mit einem Permalink zu einem Facebook Status.

[html]<fb:post href="https://www.facebook.com/endgeek/posts/10200234978146145"></fb:post>[/html]

Den Permalink bzw. die URL zu einem einzelnen Facebook Status erhaltet ihr, wenn ihr auf die Uhrzeit (z.B. 6 minutes ago) unterhalb eines Beitrags klickt.

wordpress-permalink-rausfinden

 

Live sieht das Ganze dann so aus:

 

Hinweis: Sollte die Fehlermeldung kommen, obwohl eure Beiträge öffentlich sind:

This Facebook post is no longer available. It may have been removed or the privacy settings of the post may have changed.

…, müsst ihr u.U. die „Abonnieren-Funktion“ für euer Profil aktivieren. Wie das geht habe ich vor einiger Zeit mal hier beschrieben.

 

UPDATE 1

Kurz nachdem ich diese Anleitung geschrieben habe, bin über ich das Plugin von Torben Leuschner gestoßen, welches mit Hilfe eines Shortcodes die oben genannte Funktion erstellt. Für wen die erste Variante also zu kompliziert ist, der kann sich gerne sein Plugin installieren. Innerhalb eines Beitrags müsst ihr mit folgendem Shortcode arbeiten:

[html][fb-posts href="urlzumpost"][/html]

…welcher ausgefüllt dann so aussieht:

[html][fb-posts href="https://www.facebook.com/endgeek/posts/10200234978146145"][/html]

 

UPDATE 2

Wem weder die Plugin- noch die von mir beschriebene Variante sinnvoll erscheint, der kann sich durch eingabe der URL auch den benötigten Code generieren lassen. Ein solcher Generator wird von Herrn Bekaan auf http://fb-embed.reloado.com/ bereitgestellt. Hierzu muss lediglich die Kopierte URL in das Textfeld eingegeben werden und nachdem man auf Daten Absenden klickt bekommt man den Code zum implementieren des Facebook Status, der wie folgt aussieht:

[html]<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>
<fb:post href="https://www.facebook.com/endgeek/posts/10200234978146145"></fb:post>
[/html]

Die Lösung ist vor allem für „Nicht-WordPress-Seiten“ sehr sinnvoll, oder wenn wirklich nur 1-2 mal die Embedded Posts Funktion von Facebook genutzt werden sollte. Denn somit wird das Facebook SDK nicht jedesmal geladen, sondern nur innerhalb der entsprechenden Beiträge bzw. der jeweiligen Unterseiten.

Zeitgleich gibt es auf reloado.com auch noch ein Plugin, welches ähnlich wie das o.g. von Torben funktioniert.

 

UPDATE 3

Ebenfalls ein sehr interessantes Plugin wird auf hier allfacebook.de vorgestellt. Nach dem installieren muss nicht per Shortcode o.Ä. gearbeitet werden. Einfach die URL zum Facebook Status in den Editor von WordPress kopieren und der Status wird automatisch eingebunden.

 

Ich hoffe ich konnte euch mit diesem kleinen Tutorial ein wenig weiter helfen und würde mich über Feedback freue. :)

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

4 Kommentare

Avatar von Torben Leuschner

Torben Leuschner 1. August 2013 um 10:25

Vielen Dank für die Erwähnung meines Plugins, André :)

Antworten
Avatar von André Köbel

André Köbel 1. August 2013 um 10:29

Ist ja ein klarer Mehrwert für einige Leser, von daher gerne. ;)

Antworten

Facebook Updates: Alles Neue macht der August ;-) | webdots blog 1. August 2013 um 15:18

[…] Solltet ihr so wie wir noch auf die altmodische Art und Weise dieses Plugin nutzen wollen, so seht euch doch einfach mal diese Anleitung an – funktioniert einwandfrei: http://drwp.de/facebook-embedded-posts-statusmeldungen-in-wordpress-einbetten/ […]

Avatar von katharina

katharina 6. November 2013 um 14:00

Hallo,

liege ich richtig mit der Annahme, dass die oben beschriebenen Vorgänge nur dann funktionieren, wenn man wordpress installiert hat. Aber nicht, wenn man wordpress nur online nutzt?

Falls ja, gibt es auch für letzteres eine Lösung?

Freue mich auf Feedback!
Katharina

Antworten
Avatar von Christian Lang

Christian Lang 6. November 2013 um 19:48

Hallo Katharina,

du meinst für einen WordPress.com Blog? Dort ist bereits ein feines Feature eingebaut. Du musst einfach die Facebook Post URL in deinen Editor eintippen – also direkt in deinen Artikel. Die URL wird dann automatisch in einen Embedded Post umgewandelt.

Wie du an die URL deines Posts kommst, wird ja oben beschrieben!

Viele Grüße
Christian

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*