Ich bastele ja gerne an meiner WordPress-Seite herum und ändere nicht nur die optische Gestaltung, sondern greife hier und da „unter der Haube“ ein und schreibe kleinere Funktionen, die das Verhalten des Blogs an bestimmten Stellen beeinflussen. Daher bin ich natürlich schon etwas vorgeschädigt und kann solche Kleinigkeiten wie das Kommentar-Plugin recht schnell einbinden. Aber auch als unerfahrener WordPress-Betreiber wird der Einbau für dich sehr einfach sein.

1. Den Code zum Einbinden von Facebook bekommen

Auf der Seite der Facebook Developer Plugins gibt es einen kleinen Baukasten, mit dem du deine Kommentarbox basteln kannst. Voraussetzung ist natürlich, dass du bereits eine Facebook-App „registriert“ hast und benutzt. Da kaum noch ein Blog ohne Facebooks Like-Button auskommt, werden die meisten Blogger bereits eine solche Facebook-App-ID haben. Falls das bei dir nicht der Fall ist, musst du leider erst mal woanders nachschauen, wie du das einrichtest. Das ist aber auch nicht wirklich schwierig. Dannach kommst du einfach wieder hierher zurück und liest weiter ;-)

Auf der Facebook Developer Plugins-Seite für das Kommentar-Plugin gibt es ein paar einfache Einstellungen, die du nach deinem Geschmack verändern kannst. So bietet die Facebook für das Kommentar-Plugin zwei unterschiedliche Farbvarianten: light und dark. Zudem kannst du die Breite des Kommentar-Feldes in Pixel angeben, oder „100%“ wählen. Außerdem kannst du festlegen, wie deine Kommentare per default sortiert werden sollen – was genau der Unterschied zwischen „social“, „reverse time“ und „time“ ist, steht in der FAQ beschrieben. Schlußendlich spuckt dir das Tool mit einem Klick auf Get Code den fertigen Code aus. Hier kannst du dann noch einmal auswählen, ob du den Code als HTML5-Variante oder in der Facebook-eigenen XFBML-Variante einbinden willst. Ich habe mich für die HTML5-Variante entschieden – damit ist für mich der Quellcode insgesamt konsistenter.

2. Facebook-Kommentare in WordPress einbauen

Von diesem Code brauchst du in der Regel aber gar nicht alles. Wenn du schon den Like-Button eingebaut hast, wird bei dir das Facebook SDK-JavaScript bereits eingebunden sein und du brauchst das JavaScript-File kein zweites mal laden. Deshalb ist eigentlich nur eine Codezeile wichtig:

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

Dieses muss nur noch an die entsprechende Stelle im Seitentemplate eingebunden werden.

In meinem Theme gibt es ein eigenes Template für die Kommentare. In manchen Themes ist der Kommentarbereich auch in der single.php oder content-single.php drin. Suche doch einfach nach der Funktion wp_comments();in deinen Template-Dateien. An der Stelle, an der diese Funktion auftaucht, baut WordPress die Kommentare ein. Du kannst die Kommentare aber natürlich auch an jeder anderen Stelle in deinem Blog einbauen.

Anpassung des Codes

Um den Code einzubinden, braucht Facebook eine permanente URL, mit der es die Kommentare verknüpfen kann. Die URL example.com ist dafür denkbar ungeeignet. Du kannst hier zwar deine Domain angeben, aber sinnvoller ist es, die URL für den einzelnen Beitrag einzubinden. Denn Sonst stehen unter alles Beiträge auch immer alle Kommentare. Dazu musst du den Code nur geringfügig anpassen:

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

<?php the_permalink(); ?> Gibt die Permalink-URL aus, die auf den jeweiligen Beitrag verlinkt. Nur so bekommt jeder Beitrag einen eigenen Kommentar-Thread. Würde hier einfach die Hauptdomain z.B. mit der index.php bzw. index.html stehen, würden für die Startseite und alle Unterseiten ein einziges Kommentarfeld sämtliche Kommentare (scheinbar) zusammenhangslos sammeln. Selbstverständlich kann das auch gewollt sein, du musst es beim Einbinden nur wissen und entsprechend entscheiden.

Damit spuckt dir WordPress entsprechend den Vorgabe das Facebook Kommentar-Feld aus. Du kannst natürlich die Standard-WordPress-Kommentarfunktion aktiviert und parallel laufen lassen – so habe ich es ja auch getan. Denn es soll ja ein paar Menschen geben, die nicht bei Facebook registriert sind und es auch nicht sein wollen.

Die Anzahl der Kommentare anzeigen

Ein nettes Feature finde ich immer, die Anzahl der Kommentare für einen Beitrag an verschiedenen Stellen einzublenben. In meinem aktuellen Theme habe ich sie beim Kommentare-Icon als „Benachrichtigungs-Anzahl“ eingebaut und gebe sie außerdem in der Überschrift zu den Kommentaren an (zum Beispiel als „3 Kommentare bisher“ oder ähnliches). An und für sich genommen ist es nicht schwierig, die simple Anzahl der Kommentare vom Facebook-Plugin zu bekommen – ebenso wenig wie für die Standard-Kommentare mit der WordPress-eigenem Kommentarfunktion. Diese beiden aber zu verknüpfen ist ein wenig aufwändiger.

Ohne groß darauf einzugehen, hier einfach nur kurz die beiden Funktionen zum Auslesen und zum Ausgeben der Kommentar-Anzahl. Sie befinden sich beide in der Theme-eigenen functions.php und werden dannan der jeweils benötigten Stelle als PHP-Funktion aufgerufen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*
 * This function is supposed to fetch the amount of comments.
 * It should get the amount of Facebook comments and the
 * amount of WordPress comments.
 * Used to display amount of comments in article metadata.
 * Reference: http://wordpress.stackexchange.com/a/18737/29055 (Facebook)
 * Reference: http://wordpress.stackexchange.com/a/108047/29055 (Wordpress)
 */
 
function get_comments_count() {
	global $post;
	$url = 'https://graph.facebook.com/';
	$posturl = get_permalink($post->ID);
	$url .= $posturl;
 
	$filecontent = wp_remote_retrieve_body(wp_remote_get($url, array('sslverify'=>false)));
	$json = json_decode($filecontent);
	$count = $json->comments;
	if ($count == 0 || !isset($count)) {
		$count = 0;
	}
 
	$facebook_comments = $count;
	$wordpress_comments = $post->comment_count;
	$total_comments = $facebook_comments + $wordpress_comments;
 
	/* only one variable can be returned. If all three variables are needed,
	 * there is no way around using an array. */
 
	return $total_comments;
 
}
 
/*
 * Helper function to echo the variables as text for heading etc.
 */ 
 
function get_comments_header() {
 
	$total_comments = get_comments_count();
 
	if( $total_comments == 0 ) {
		echo 'Noch kein Kommentar, sei der Erste!';
	} elseif ( $total_comments == 1 ) {
		echo 'Ein Kommentar bisher. Schreib den Zweiten!';
	} elseif ( $total_comments > 1 ) {
		echo $total_comments . ' Kommentare. Schreib noch einen!';
	}
 
}

Wie werde ich benachrichtigt, wenn jemand einen Beitrag mit dem Facebook Kommentar-Plugin kommentiert?

Ganz einfach: über die normalen Facebook-Benachrichtigungen. Genau auf dem gleichen Weg also, wie wenn einer deiner Freunde einen Status oder ein Foto oder sonst etwas von dir kommentiert.

Wichtig ist hier nur, dass du in deinem Blog zuvor deine Profil-ID als Administrator mit <meta property="fb:admins" content="YOUR_FB__PROFILE_ID"> angibst – sonst weiß Facebook ja nicht so recht, wen es benachrichtigen soll. Angeblich werden alle Administratoren der Facebook-App, die man ja für das Plugin sowieso erstellen bzw. haben muss, benachrichtigt – aber das hat bei mir nicht funktioniert. Ich musste mich zusätzlich noch als Administrator angeben.

Da mir das manuelle hinzufügen dieser Tags für Facebook zu aufwändig war, habe ich mir ein WordPress-Plugin gesucht: Simple Facebook Open Graph Tags. Dieses Plugin kann nämlich noch ein wenig mehr, als nur diese Administrator-ID in den Quellcode einbauen. Mit Hilfe dieses Plugins kannst du zum Beispiel auch festlegen, welches Bild erscheinen soll wenn dein Beitrag in Facebook geteilt oder kommentiert wird.

Und so sollte dann dein WordPress-Blog mit dem Facebook Kommentar-Plugin funktionieren.

Hat dir der Beitrag geholfen? Dann lass es mich doch wissen. Wenn noch irgend etwas unklar ist oder nicht funktioniert – dann erst recht!

Kommentar hinterlassen

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.