Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

Facebook Kommentare in WordPress einbinden

Da gerade in unserer WordPress Gruppe auf Facebook die Frage aufkam, wie man denn die WordPress interne Kommentar-Funktion mit „Facebook Kommentare“ ersetzen kann, dachte ich mir ich schreib mal ein kurzen Beitrag hierzu. Zwar gibt es auch Plugins zum Einbinden von Facebook Kommentaren, aber das ist eine so simple Sache, dass man hierzu definitiv kein WordPress Plugin benötigt und es in 1-2 Minute, selbst als „Laie“ (wie im Gruppen-Posting gerade bestätigt wurde), selbst hin bekommt. Also keine Angst, einfach mal machen!

Zunächst einmal musst du auf https://developers.facebook.com/docs/plugins/comments gehen. Dort kannst du dir das Facebook Plugin generieren lassen, welches gleich in das Template kommt.

Kurz zu den Einstellungen:

  • URL: Diese kannst du erstmal auf „example.com“ lassen, wird gleich komplett ersetzt.
  • Width: Hier gibst du die Breite deines Themes an, bzw von der Stelle wo das Kommentarfeld eingebunden werden soll. Wenn du nicht weißt wie Breit deine Seite ist, kannst du es einfach offen lassen.
  • Number of Posts: Hier wird definiert, wie viele Kommentare angezeigt werden sollen, bevor man weitere per Klick laden muss
  • Color Scheme: Hier kannst du noch, wie bei Facebook Like Buttons etc., das Farbeschema (hell oder dunkel) auswählen.

Wenn du alles eingestellt hast, klickst du unter den Kommentaren auf „Get Code“ und bekommst dann im Tab „HTML 5“ zwei Code-Snippets angezeigt:

<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&appId=XXXXXXXXXXXXXX&version=v2.0";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

… und …

<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>

Das obere musst du unter Design » Editor in die header.php setzen, falls du noch kein Plugin hast, was diese Zeile generiert. Am besten direkt nach dem -Tag.

Als nächstes gehst du unter Design » Editor in die single.php und suchst nach der Zeile, wo die WordPress Kommentare generiert werden:

<?php comments_template( '', true ); ?>

… und ersetzt diese mit dem zweiten Snippet:

<div class="fb-comments" data-href="http://example.com/comments" data-numposts="52" data-colorscheme="light"></div>

Damit die Kommentare nun noch deinem jeweiligen Beitrag zugewiesenw erden können, müssen wir die URL unter „date-href“ auf die des aktuellen Beitrags ändern. Hierzu fügst du einfach zwischen die beiden „“  ein. Am Ende sollte es dann so aussehen:

<div class="fb-comments" data-href="<?php echo get_permalink(); ?>" data-numposts="5" data-colorscheme="light"></div>

..und voilá, das war ’s auch schon. War super easy, oder? :)

Ü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

6 Kommentare

Blogschau Mai – Unsere WordPress Fundstücke 4. Juni 2014 um 15:19

[…] möchten wir euch einen weiteren How-To Artikel zeigen, den wir auf WP Snippets gefunden haben. André Köbel zeigt hier auf leicht verständliche Weise die Möglichkeit, die […]

Avatar von Eric

Eric 11. Juni 2014 um 18:47

Hoi Holger, wie es der Zufall will, ist das gerade ein Thema bei mir gewesen. Beim ReDesign am Wochenende habe ich auch FB und G+ Kommentarfelder als Optionale Kommentiermöglichkeit eingefügt.

Nun meine Frage, kennst du evtl ein Tool wo ich sehe wer wann wo ein Google+ oder FB Kommentar hinterlassen hat. Du weisst ja selbst sonst müsste man jeden einzelnen Beitrag einzeln aufrufen was bei ein paar Hundert Beiträge extrem mühsam wäre :) Evtl hst du j ein Tipp für mich – danke

Antworten

Top WordPress Fundstücke 24. Juni 2014 um 12:09

[…] möchten wir euch einen weiteren How-To Artikel zeigen, den wir auf WP Snippets gefunden haben. André Köbelzeigt hier auf leicht verständliche Weise die Möglichkeit, die […]

Avatar von Patrick

Patrick 1. Mai 2015 um 14:48

Super toller Tipp, wir haben es heute bei blogg.de direkt eingebunden. Es funktioniert!

Antworten
Avatar von Ines

Ines 7. Juni 2015 um 15:09

Hey,
wo muss ich den Text einfügen wenn ich keine „single.php“ habe?
Bzw wo kann sie sein? .. bei anderen Themes hab ich das alles prima nach dieser Anleitung hinbekommen aber jetzt kann ich die single.php nicht finden …. :(
LG Ines

Antworten
Avatar von Christian

Christian 9. Juni 2015 um 8:08

Hallo Ines,

der Fallback für die single.php ist die index.php. Da müsstest du dann den Code einfügen.

https://developer.wordpress.org/files/2014/10/wp-template-hierarchy.jpg

Gruß
Christian

Antworten
Avatar von Anna

Anna 23. Oktober 2016 um 20:05

Vielen dank für den tollen Artikel und die ausführliche Information. Die Informationen sind ziemlich hilfreich.

Gruß Anna

Antworten
Avatar von Promilounge

Promilounge 28. Februar 2017 um 8:22

Danke für diese tolle Erklärung haben es heute in unserer Seite promilounge.de dank dieser Anleitung integriert, da unsere Leser viel über Facebook kommen.

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.
*
*