Facebook Kommentare für WordPress – App Erstellung, Code Einbindung und Moderation

in , ,

Facebook Kommentare machen Homepages, Blog und Online Shops wesentlich lebendiger. Nutzer sind nicht mehr dazu gezwungen ihre Daten einzutragen oder sich zu registrieren. Durch die Platzierung bzw. den Austausch der WordPress Kommentare mit den Facebook Code, steigt die Interaktion, die Nutzerbindung und auch die Besuchszeiten eurer Internetseite, Blog oder Shop. Für die Einbettung gibt es natürlich auch WordPress Plugins. Mit ein wenig Copy & Paste könnt ihr aber auch alles selbst machen. Heute nicht mit Videotutorial, sondern ganz klassisch mit Screenshots, weil es echt schnell geht, auch ohne Werbeagentur.

Key Facts -
Facebook App für die Nutzung erstellen
Kommentar Code generieren und einbetten
Screenshots zum developers Tutorial
Austausch von WordPress und Facebook Kommentarfunktion
Screenshots vom Austausch des Codes
Facebook Kommentarfunktion im Blog

Facebook App für die Nutzung erstellen

Tipp! Hier findest du unseren XXL Guide zum Thema Facebook Ads. In diesem Artikel lernt ihr:

  1. Facebook App für die Nutzung erstellen
  2. Kommentar Code generieren und einbetten

Falls ihr noch keine eigene Applikation in facebook for developers erstellt habt, ist das euer erster Schritt. Melde dich dafür einfach hier an und erstelle eine App:

Kommentar Code generieren und einbetten

Im nächsten Schritt generierst du deinen eigenen Code. Wichtig ist, dass du ihn in deine header.php bekommst. Das geht in der Regel über zwei Wege mit WordPress.

  1. Der beste Weg ist den Code in deinem Theme Backend einzubinden. Die meisten Themes unterstützen die Einbettung direkt aus dem Backend heraus. Dann musst du keine Veränderungen am Theme vornehmen. Den Code platzierst du dort, wo beispielsweise der Code von Google Analytics liegt.
  2. Direkt im Theme über dein WordPress Backend via Design > Editor. Danach öffnest du die header.php und fügst den Code sauber ein, am besten direkt nach dem <body> Tag.
  3. Empfehlung! Geht besser über euer Child Theme und verändert eine Kopie der header.php, dann habt ihr keine Probleme beim Theme Update.

Hier kannst du dir deinen Code generieren:

So sieht der generierte Code aus. Die appID ist dann jeweils eure individuelle ID.

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

Screenshots zum developers Tutorial

Hier noch einmal alle Steps in einzelnen Screenshots:

Austausch von WordPress und Facebook Kommentarfunktion

Neben dem Script bekommst du auch noch eine kleine Div-Box zur Einbettung im Front End der Seite. Die Vorgehensweise ist hier ähnlich zum Script. Nur das ihr die single.php bearbeitet. Wenn ihr mit einem Theme arbeitet, muss der Code unter Umständen auch in der comments.php oder ähnlichen platziert werden. So wie bei mir, im Beispiel. Den Code könnt ihr überall in eurer Seite einbinden oder nur auf Einzelseiten. Wir ersetzen die Kommentarfunktion direkt. Wer die Comments auf Einzelseiten will, fügt den Code einfach direkt in die Blogbeiträge, etc. ein. So veränderst du die Kommentarfunktion global.

Wichtig, du musst deine URL (in meinem Fall http://lukinski.com) für die globale Variante ersetzen durch:

<?php echo get_permalink(); ?>

  1. Direkt im Theme über dein WordPress Backend via Design > Editor. Jetzt öffnest du die single.php und ersetzt den WordPress Code bzw. klammerst ihn aus.
  2. Empfehlung! Geht hier genauso über euer Child Theme vor und verändert eine Kopie der single.php.
<div class="fb-comments" data-href="<?php echo get_permalink(); ?>" data-numposts="5"></div>

Voila.

Screenshots vom Austausch des Codes

In meinem Beispiel lag der Kommentar-Code nicht in der single.php, sondern in einer einzelnen comments.php. Diese habe ich in meine Child Theme kopiert und anschließend den gesamten Kommentar-Code durch die neuen Facebook Kommentare ersetzt. Wenn ihr in der single.php arbeitet, achtet darauf nur den Kommentar-Code zu entfernen. Im Beispiel wurde wie gesagt die gesamte comments.php ersetzt.

Facebook Kommentarfunktion im Blog

Fertig sieht das ganze dann so aus!

Marketing Blog 🔥