Facebook-Kommentarfunktion einfügen ♥♥♥

"Wie binde ich die Facebook-Kommentarfunktion unter bestimmten Posts meines Blogbeitrags ein?"
Diese Frage möchte ich heute beantworten.
Die Einbindung selbst ist sehr einfach und erfordert kaum technisches Wissen, solange ihr brav meinen Anweisungen folgt ;)







Schritt 1:




Geht in Blogger -> Vorlage -> HTML bearbeiten.







Drückt Strg+F und gebt im Suchfeld <Body> ein.
Der Internetbrowser wird nun den <Body>-Tag im HTML-Bereich automatisch suchen und auswählen.
Fügt direkt nach <Body> folgenden Code ein:


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



Klickt nun auf "Vorlage speichern".

Schritt 2:
Erstellt nun einen neuen Post, in welchem die Kommentarfunktion eingefügt werden soll. Nachdem dieser fertig ist, klickt ihr auf "HTML".
Jetzt benötigen wir diesen Code:

<div class="fb-comments" data-href="DEIN_LINK" data-num-posts="5" data-width="470">
</div>

Die Zahl Fünf steht hier für die Anzahl der Facebook-Kommentare die angezeigt werden. Der Besucher hat hierbei jedoch die Möglichkeit auf "Mehr anzeigen" zu klicken, um alle Kommentare einzusehen.
470 markiert die Breite des Gadgets. Beide Zahlen können nach belieben angepasst werden.

 
Nachdem alle Einstellungen angepasst wurden, muss nur noch der Link zum Post eingefügt werden, welcher kommentiert werden soll. Dieser Link kann herausgefunden werden, ohne dass man den Beitrag hierfür veröffentlichen muss.
Klickt einfach rechts auf "Permalink". Dieser Link wird in den Code eingefügt.










Füge unter HTML den Code ein und klicke anschließend auf "Veröffentlichen" - Fertig!




So sieht es dann aus:



Bei dunklen Hintergründen empfehle ich dieses Layout:

Der Code hierfür ist:

<div class="fb-comments" data-href="DEIN_BLOGLINK" data-width="470" data-num-posts="5" data-colorscheme="dark"></div>


Falls Fragen zu diesem Tutorial offen sind, könnt ihr mir gerne jederzeit an jennie@cplove.de schreiben. Auch über einen kleinen Besuch auf meinem Blog würde ich mich sehr freuen :)

18 Kommentare

  1. Bei mir findet der das beim HTML Code nicht..

    AntwortenLöschen
  2. Muss man den zweiten Code dann jedes Mal in seinen neuen Posts mit einfügen?

    AntwortenLöschen
    Antworten
    1. Leider ja, Lari.
      Das ist momentan die einzige Möglichkeit, die Facebook-Kommentarfunktion zu nutzen, ohne eine Facebook-App zu erstellen.

      Löschen
    2. Nehme es als Vorlage ;) Einstellung -> Posts & Kommentare -> Vorlage.

      Löschen
    3. Was muss man denn dann anstatt "DEIN-LINK" bei der Vorlage eingeben?:)

      Löschen
    4. Ok, ich habe anstatt meinem Post-link einfach dem von meinem Blog da eingefügt und es ist jetzt unter jedem post. Aber es ist halt im Post, hat jemand einen Tipp oder geht das nicht anders?

      Löschen
  3. Kann das Feld nicht in der Vorlage eingebettet werden wie z.B. der Pin It Button von Pinterest?
    Ich hatte den Code in den
    Einstellungen-Posts und Kommentare-Vorlage veröffentlichen
    eingefügt. Das ginge schon, aber ich hätte es dann doch gerne unter dem Post, so in der Region des regulären Kommentarfeldes.
    Ginge das?

    AntwortenLöschen
  4. Ich habe mich auch an einem Html Tutorial versucht und wollte euch fragen wie es geworden ist :)

    LG

    http://t-h-e-daily-life.blogspot.de/2013/01/html-tutorial-hover-sidebar-pictures.html#more

    AntwortenLöschen
  5. danke für das tolle Tut! Hab es gleich eingebaut :) Danke :)

    AntwortenLöschen
  6. Ich habe es jetzt auch zweimal eingebaut, aber obwohl ich jedes Mal wie beschrieben den Link vom Permalink in die HTML Vorlage eingebaut habe, steht unter dem Kommentarfeld "Warnung: duoderderrestderwelt.de/xxxxx" kann nicht gefunden werden, obwohl es der richtige Link ist :( Weiß jemand, woran das liegen könnte?

    AntwortenLöschen
  7. Antworten
    1. OK habs hingekriegt aber das Kommentarfeld ist jetzt in meinem post und das sieht irgendwie kacke aus haha

      Löschen
  8. also ich kann nichtmal die geschlossene klammer nach < body in meine suchmaske eingeben... dann machts nur laut "pling" und die Suchmaske wird rot... also er sucht gar nichts... und von allein finde ich das < body > überhaupt nicht... ich nehme mal an, dass es deshalb in der Suchmaske rot wird... :-/

    AntwortenLöschen
    Antworten
    1. bei mir passiert genau dasselbe. komisch das bei mir der body-Tag nicht gefunden werden kann. Bei den anderen kommentaren hört es sich zumindest so an, als ob der body-Tag vorhanden wäre.

      schade hätte das tut gerne begonnen :(

      Löschen
  9. Hat schon jemand herausgefunden, wie man als Blogersteller Benachrichtigungen erhalten kann, wenn jemand kommentiert? :D

    AntwortenLöschen
  10. Hallo, dein Artikel war mir gerade sehr hilfreich. Danke dafür. Mir ist nur noch nicht ganz schlüssig, wie es unter den einzelnen Posts erscheint. Praktisch unter den Posts. Vielen Dank im voraus für deine Antwort.

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!