Tutorial: Facebook Kommentarfunktion auf allen Webseiten einsetzen

Facebook ist nicht nur ein soziales Netzwerk sondern auch eine soziale Plattform. Eine Plattform, welche sich auf vielen Wegen auch außerhalb von facebook.com präsentiert und integriert. Bereits in früheren Beiträgen haben wir die Facebook Fanbox und das Livestream Widget vorgestellt.

Kommentarbox im Einsatz

Ein weiteres aber eher selten genutzte Widget ist die Facebook Kommentarbox. Mit ihr lässt sich praktisch in jeder beliebigen Webseite eine Kommentarfunktion ohne großen Aufwand realisieren, also auch außerhalb von normalen Blogs. Diese bietet folgende Funktionen:

  • Kommentieren mit und ohne Facebook Login
  • Facebook Login über Connect
  • In den Kommentaren werden Foto und Name aus Facebook angezeigt
  • Der Kommentar erscheint mit Verweis auf die Ursprungswebseite im Newsstream des Kommentierenden
  • Auf einer Webseite können mehrere Kommentarboxen gleichzeitig verwendet werden

Die Integration ist dabei denkbar einfach. Wie bei den meisten Facebook Widgets gibt es auch hier einen Assistenten, der bei der Einrichtung hilft. Das Vorgehen zum einbinden der Facebook Comment Box sieht so aus:

  1. Assistenten aufrufen.
  2. Page oben links auswählen.
  3. Gezeigten Quelltext auswählen und in die eigene Seite kopieren. Wenn es auf der Seite bereits eine Facebook Connect Verbindung gibt, muss nur die Zeile <fb:comments> </fb:comments> an der Stelle eingefügt werden, an welcher die Kommentarfunktion erscheinen soll.
  4. Über den Link “Kommentare verwalten” Einstellungen zu Moderatoren und Administratoren vornehmen.
  5. Testen und Veröffentlichen

Das Entwickler Wiki bietet hierzu auch noch einige weiterführende Informationen. Zum Beispiel welche Anpassungen bei mehreren Kommentarfelder nötig sind oder wie die Kommentare auch außerhalb der Webseite aus der Facebook Datenbank ausgelesen werden können. Zusätzlich hat das Facebook Entwicklerteam zu diesem Themenbereich auch noch ein Videotutorial erstellt, welches sich bei Vimeo findet.

How To: Create a Comments Box with Facebook Connect in 5 Minutes from Pete Bratach on Vimeo.

Über den Autor:

Phlow-Autor Jens Wiese

Jens Wiese: Jens hat Online Medien (B.Sc.) und Digitale Medien (M.Sc.) an der Hochschule Furtwangen studiert. Jens berät als Freelancer große internationale Unternehmen, die auf Facebook aktiv sind, entwickelt neue Applikationen, organisiert Workshops und entwirft individuell passende Strategien. Zudem hat er das Bio-Verzeichnis Biodukte.de gegründet.

Kommentare

46 Antworten zu “Tutorial: Facebook Kommentarfunktion auf allen Webseiten einsetzen”

  1. Antoniya says:

    Hallo! Weiß jemand vielleicht, ob die Kommentar Box auch in einen FBML Reiter auf der eigenen Fanpage integriert werden kann? Ähnlich wie die Live Stream Box?

  2. web20typ_ – Meine Bookmarks vom 14. March bis 15. March says:

    [...] facebookmarketing.de | Tutorial: Facebook Kommentarfunktion auf allen Webseiten einsetzen – Ein weiteres aber eher selten genutzte Widget ist die Facebook Kommentarbox. Mit ihr lässt sich praktisch in jeder beliebigen Webseite eine Kommentarfunktion ohne großen Aufwand realisieren, also auch außerhalb von normalen Blogs. Diese bietet folgende Funktionen:<br /> <br /> * Kommentieren mit und ohne Facebook Login<br /> * Facebook Login über Connect<br /> * In den Kommentaren werden Foto und Name aus Facebook angezeigt<br /> * Der Kommentar erscheint mit Verweis auf die Ursprungswebseite im Newsstream des Kommentierenden<br /> * Auf einer Webseite können mehrere Kommentarboxen gleichzeitig verwendet werden facebook tutorial comments [...]

  3. Duhde says:

    Im Administratorenbereich der Box ist der Menüpunkt “Abonnenten der Benachrichtigung” enthalten. Sollte ich dann nicht eine Benachrichtigung erhalten, wenn ein User einen Kommentar einträgt? Oder worauf bezieht sich dieser Punkt, da ich bislang keinerlei Benachrichtigung erhalte?!

  4. facebookmarketing.de | Facebook Social Plugins: Like Button, Recommendations, Activity Feed, Like Box usw. – Die neuen und alten Plugins im Überblick says:

    [...] Facebook Comment Box ist schon etwas älter wir haben hier beschrieben wie ihr sie für eure Webseite nutzen könnt. Die Box erlaubt es Nutzern Kommentare auf einer Webseite zu hinterlassen und diesen Kommentar auch [...]

  5. Daniel says:

    Weiß jemand wie ich die anzahl der Kommentare für eine Bestimmte URL/ID an anderer Stelle auslese? Würde gerne auf der Hauptseite mit Headlines anzeigen wie viele Kommentare jeder artikel hat.

  6. Armin Tafertshofer says:

    Der Link zu der Kommentar Box ist tot. Ich würde die Möglichkeit gerne für eine Webseite nutzen. Hat jemand eine Ahnung?

  7. Birgit Olzem says:

    @Armin

    schauen Sie mal hier:
    http://developers.facebook.com/docs/reference/plugins/comments

    Dort kann man sich den Code für die Facebook Comments generieren.

    Übrigens gibt es für WordPress ein Facebook Connect Plugin, womit auch u.a. die Commentsbox integriert werden kann: http://www.sociable.es/facebook-connect/

    LG Birgit

  8. Katja says:

    Hallo!
    Haben die Kommentar-Box auf unserer Homepage eingebaut, bekommen aber keine Benachrichtigung, wenn jemand einen Kommentar hinterlässt. Weiß jemand, was ich einstellen muss, um Benachrichtigungen zu erhalten?
    Außerdem möchte ich gerne die Kommentare in einem Reiter auf die Facebook-Fanpage stellen. Weiß jemand, ob und wie das geht?

  9. Uwe says:

    ich schaffe es nicht diese Kommentarbox in meine Webseite einzubauen. Hat jemand mal ein komplettes Beispielskript, so wie es eingebaut werden muß?

  10. Marcus says:

    Ich bin auch garade an der Einbindung in meine Webseite gescheitert. Inspiriert hat mich das neue Buch “facebook – Marrketing unter Freunden” aber leider zu oberflächig :( Zudem finde ich nur Englische Versionen die sich einbinden lassen … Würde mich auch über eine gute Beschreibung für “kurzsichtige” freuen :)

  11. Peter says:

    Wenn ich die Comment Box einbinde, dann werden auf jeder Seite, alle Kommentare angezeigt. Kann ich das verhindern? Sodass auf jeder Seite auch nur die jeweiligen Kommentare angezeigt werden?

  12. Claudia Barfuss says:

    Mir geht es gleich wie Marcus. Kann die Kommentarbox einfach nicht einbauen.

  13. facebookfan says:

    Hallo,

    könnte mal bitte jemand die Antwort auf die gestellten Fragen in diesem Thread online stellen. Mich würde auch interessieren:

    1. Wie kann ich die Kommentarbox komplett in deutscher Sprache bekommen?
    2. Wie schaffe ich es, dass ich eine Benachrichtung bekommen, wenn eine neues Kommentar gepostet wurde. Weder die Einstellung im Adminbereich noch die Angabe meiner UID im vorgesehen Parameter brachten das gewünschte Ergebnis.

    Danke im voraus
    lg

  14. facebookmarketing.de | Social Plugins – Neue Features für das Facebook Kommentarmodul says:

    [...] wann genau Facebook die Änderungen plattformweit veröffentlicht ist nicht klar. Wer das Facebook Kommentar Modul nutzen will kann sich dieses Tutorial anschauen oder hier direkt zu Facebook [...]

  15. Thomas says:

    Das mit der Kommentarbox ist doch ein Witz!
    Ich habe etliche Webseiten PhP / Flash etc erstellt und warte sie regelmässig aber diese dämliche Kommentarbox kann man nicht einbinden -.-

  16. Meso says:

    Ich finde es immer schade, wenn Leute denken, Sie könnten Tutorials schreiben und dann völlig irreführende Anleitungen veröffentlichen. Leute, das geht so nicht! :-/

  17. Thomas says:

    Bei mir hat es nicht funktioniert. Kann es sein, dass ein CMS (EZPublish) den Einsatz behindert? Gibt es auch ein akutelles Video in deutsch dazu?

  18. Konstantin Kraska says:

    Wie binde ich das Comments Plugin von Facebook in meine Seite ein?

    Es reicht nicht nur sich über die Assistentenseite für das Comments Plugin den Quelltext erzeugen zu lassen. Für eine erfolgreiche Einbindung sind weitere sowie vorbereitende Schritte notwendig.

    Die Schritte dazu:
    1. http://developers.facebook.com/setup (Create an App) öffnen.
    bei
    Site Name: beispielseite.com eingeben (ohne www.)
    bei
    Seitenadresse: http://beispielseite.com/ (wichtig ist das / am ende euerer adresse, facebook will das so)
    bei Sprache wählt ihr eure gewünschte Sprache.

    nun auf create app klicken. Mann gelangt zu einem Sicherheitscode, diesen eingeben und es werden diverse daten angezeigt.

    Was Ihr nun benötigt ist die Anwendungsnummer.

    Anwendungsnummer kopieren und zu

    http://developers.facebook.com/docs/reference/plugins/comments

    Jetzt seid ihr im Code Generator von Facebook (für das Comment Feld eurer Website)

    Folgende Schritte durchführen:
    1. Unique ID = die von euch erstellte Anwendungsnummer
    2. Number of Comments = Wie viele Kommentare sollen angezeigt werden
    3. Width = Breite auf eurer Homepage

    Jetzt auf Get Code klicken und ihr habt den Code für eure Internetseite.

    Wollt ihr euer Kommentarfeld verwalten müsst ihr folgendes tun.

    Geht auf:
    http://developers.facebook.com/docs/reference/javascript/

    Nun kopier ihr euch den 2ten Quelltext auf der Seite der unter der Überschrift
    “Loading the SDK Asynchronously” steht und ersetzt in dieser Zeile

    FB.init({appId: ‘your app id’, status: true, cookie: true

    your app id mit eurer Anwendungsnummer.

    Jetzt fügt ihr den geänderten Code unter dem Code eures Kommentarfeldes ein und könnt dieses administrieren.

    Bei weiteren Fragen findet ihr mich unter
    http://www.facebook.com/#!/profile.php?id=100000935462235

    Unterstützt mich, wie ich euch und tretet meiner Gruppe bei:
    http://www.facebook.com/#!/pages/Siand-Streetwear/108996775820842

    MfG
    euer Konstantin

  19. Kevin says:

    So, und wie ist das nun mit einer Nachricht bei neuen Kommentaren?

    “Abonnenten der Benachrichtigung” nennt sich das in den Settings der Kommentarbox. Würde gerne wissen wie das funktioniert bzw. warum es eben nicht funktioniert.

    Wäre für mich sehr wichtig, dass das irgendwann mal klappt.

    Habt ihr eine Idee?

    Danke!

  20. Konstantin says:

    Also früher ging das wohl mit “Abonnenten der Benachrichtigung.”

    Mann musste nur send_notification_id=”uid” im Code einbauen und es hat funktioniert.

    UID ist die persönliche facebook userid (nicht der name sondern die von facebook individuell vergebene nummer)

    jedoch haben sich mit der Erneuerung einige parameter geändert oder sind weggefallen.
    so auch die funktion send_notification_uid

    hier ein ausschnitt
    Facebook has made some changes with some of the parameters that can be used with the fb:comments tag in Facebook pages. For example, the candelete parameter, which allowed users to delete comments, no longer works. Instead, it is now replaced with an option to report any comments for spam or any other reasons. Also, the send_notification_uid does not work on Facebook pages.

    MfG
    einfach über die facebookapp What is my ID rauszufinden.

    D

  21. Kevin says:

    Naja, also das funktioniert so leider nicht mehr.
    So ist es auch im Developer Forum zu lesen: Früher ging es, heute nicht mehr.

    Finde das wirklich etwas behämmert. Habe nämlich eigentlich keine Lust in meinem Blog jede Seite anzuklicken und zu gucken ob neue Kommentare vorhanden sind…What ever!

    Grüße!

  22. Ben says:

    Hi,
    Habe nun erfolgreich die Kommentarbox in eine Website eingebunden und in dessen Unterseiten (habe den Code kopiert und in ein andere Unterseite der Website wieder eingefügt). Das PROBLEM:
    schreibe ich nun ein Kommentar zu einem Thema auf einer Unterseite erscheint der Kommentar auf allen anderen Unterseiten! ALSO: Wie schaffe ich es die Kommentarbox für jedes Unterthema zu individualisieren?
    Ich hoffe ihr könnt mir weiterhelfen. Bitte um schnelle Rückmeldung.

    MFG

  23. Kevin says:

    Naja, bei mir klappt es so indem ich einfach kein “href” Tag angebe. Das hier ist bei mir alles, dann nimmt er sich den aktuellen URL Pfad:

    <!– FBML FBML –>

    Außen herum noch die FBML Kommentare damit das ganze W3C-valide wird. Die dazugehörige JS Datei kann auf meiner Website im Blog heruntergeladen werden ( http://www.ka-mediendesign.de/blog/facebook-xfbml-in-xhtml-v4/ ).

    Ansonsten einfach die Kommentare entfernen, damit es sichtbar wird.

    Grüße,
    Kevin

  24. Kevin says:

    Kann den Code hier wohl leider nicht posten, schreib mir einfach eine E-Mail (findest du auf meiner Website), dann schicke ich ihn dir.

    Grüße

  25. Ben says:

    @ Kevin

    Hi habe dir jetzt eine Mail geschickt

    mfg

  26. Nico says:

    Hallo zusammen,

    leider habe ich es noch nicht hinbekommen, die Kommentarfunktion für jede Seite extra zu individualisieren!
    Ich gebe zusätzliche eine URL an aber es funktioniert leider nicht!
    Kann mir hier jemand weiterhelfen?

    Vielen Dank und liebe Grüße

    Nico

  27. Kevin says:

    Für Kommentarboxen auf unterschiedlichen Seiten mit unterschiedlichen Kommentaren:

    Kein href=”", kein xid=”".

    Müsste dann gehen?!
    Kevin

  28. Nico says:

    Kevin! VIELEN DANK!! es geht!!!

  29. Kevin says:

    Gerne :)

  30. Philipp says:

    Hallo zusammen,

    in dem Video oben ist doch die Rede davon, dass man die Kommentare als gepostete RSS-Feeds überall hinleiten kann. Ist dem so? Ich würde gerne die Kommentare der Nutzer auf meiner Internetseite direkt auf meine Pinnwand leiten.

    Würde mich über eine Antwort von Euch sehr freuen!

    Gruß
    Philipp

  31. Philipp says:

    Ach so: Vielleicht noch ein wichtiger Hinweis. ->Auf die Pinnwand meiner Fanpage in facebook leiten. Vielleicht ist das mit der Fanpage ja wichtig.

    Danke und Grüße

  32. Felix says:

    Also bei mir hat alles gut geklapt hätte nur noch 2 Wichtige fragen:

    1) Wie stelle ich die Komentarbox auf deutsch? bei mir ist sie auf Englisch

    2) Wie kann ich einzelne Komentare löschen? (die nicht von mir sind)

  33. Kevin says:

    Hi Fleix,

    1) Dort wo du das JavaScrip SDK lädt, musst du anstatt “en_US” ein “de_DE” setzen. Die Stelle sieht ungefähr so aus: “…connect.facebook.net/de_DE/all.js…”

    2) Also ich habe es so gemacht, dass ich JavaScript SDK mit meiner AppID eingebunden habe und daher habe ich wahrscheinlich die Funktion des Löschens etc.

    Also wahrscheinlich eine App einrichten, damit FB merkt, dass du Admin davon bist.

    Bin da aber nicht ganz der profi ;)

    Grüße!

  34. Facebook Social Plug-Ins wie Like Box und Gefällt mir | MECK-Blog says:

    [...] Tutorial: Facebook Kommentarfunktion auf allen Webseiten einsetzen: http://allfacebook.de/tutorials/tutorial-facebook-kommentarfunktion-auf-allen-webseiten-einse… [...]

  35. André says:

    Hallo Community,
    leider scheitere ich bislang an der “Kommentare-verwalten-Funktion”. Die Darstellung der Box selber ist kein Problem aber ich finde keine Möglichkeit unerwünschte Kommentare zu löschen. Wenn man in Google nach dem Thema sucht, findet man eine Menge teils widersprüchlicher Anleitungen. Offenbar ändert Facebook die Schnittstelle auch von Zeit zu Zeit. Und auch wenn ich der Anleitung hier folge, finde ich nicht den beschriebenen Link “Kommentare verwalten”.
    Ich habe auch schon andere (anderswo beschriebene) Wege ausprobiert – über das Erstellen einer eigenen App mit eigener App-ID und eigenem API-Key: Selbes Ergebnis – Box läuft, Kommentarverwaltung nicht. Weiß jemand einen Rat?
    Vielen Dank vorab!

  36. Martin says:

    Hallo,

    Facebook scheint hier irgendwas geändert zu haben. Ich bekomme zwar einen Code-Snippet, aber ohne ID-Abfrage etc. Wenn ich diesen dann einsetze, funktioniert das ganze leider nicht…

  37. Michael Freitag says:

    Seit Facebook wieder ein Update hatte gibt es die Funktion überhaupt nicht mehr. Wie kann ich die Kommentarfunktion nun abonnieren? :-(

  38. Mahdi says:

    Ey, ich habe leider das selbe problem wie Ben.

    Ey Leute.

    Ich hab die Kommentar Box erfolgreich in meine Website eingebunden etc. aber wenn jemand jetzt einen Post von mir kommentiert, wird dieser eine Kommentar bei JEDEM Post angezeigt (Das selbe problem betrifft auch den Like Button) So, ich hab mir auch eure Kommentare aufmerksam durchgelesen, einer schrieb man sollte das “href” entfernen?

    Wenn ich jetzt aber das href lösche, dann steht auf meiner website in Rot “Das plugin benötigt href”

    Ich hoffe jemand kann mir aus diesem ganzen wirr-warr raußhelfen, währe euch sehr dankbar.

    Lg. ;)

  39. Theo Rademacher says:

    Gleiches Problem wie Mahdi, weiss wer Rat?

  40. Ali says:

    Hallo ich habe auch eine Kommenar Box erfolgreich eingefügt mein Problem ist wenn jemand postet dann verschwindet der zweite unter das ende vom wrapper obwohl angegebn ist height:100%

  41. Kaitlyn Zidek says:

    Der Memmingen Airport ist zwar der kleinste sowie höchstgelegene Verkehrsflughafen in Bayern, bietet den Passagieren dennoch ein breites Rahmenprogramm um das Reisen so angenehm wie möglich zu gestalten. Neben verschiedenen Shoppingmöglichkeiten finden sich auch Restaurants, die sich um das leibliche Wohl der Passagiere kümmern. Für die jüngeren Passagiere steht im Terminalbereich eine Kinderspielecke und im Außenbereich ein Spielplatz bereit.

  42. André says:

    Hi!
    Ich habe die Kommentar-Box auf in meinen Blog integriert. Soweit funktioniert auch alles.

    Nun habe ich aber das Problem, dass, wenn keine Kommentare vorhanden sind, zuviel Abstand nach unten vorhanden ist. Siehe hier: http://www.efficientdesignspace.de/efficient-design-space-trophy/efficient-design-space-trophy-bundesliga-de-kicker-de
    Das liegt daran, dass dem iframe zu viel Höhe mitgegeben wird (default: 204px). Woran liegt das? Auf anderen Seiten, die ich gesehen habe, ist das nicht der Fall.
    In meiner Testumgebung habe ich auch schon alle WP-Plugins ausgeschaltet, aber das hat auch nichts gebracht.

    Hat jemand eine Idee? Dafür wäre ich sehr dankbar!

  43. Markus Karten München says:

    Danke! Das funktioniert so prima!!

  44. Christian says:

    habe auch das Problem, dass wenn ein Artikel kommentiert wird dieser Kommentar bei allen anderen Artikel auch angezeigt wird.
    Das hier unten ist der entsprechenden quellcode

    (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/en_US/all.js#xfbml=1″;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

  45. Matthias says:

    wenn man nicht möchte, dass der Kommentar auf jeder Seite erscheint muss man eben immer die aktuelle Url an Facebook übergeben. Einfach die Url in dem DIV-Teil durch die aktuelle austauschen.
    z.B.:
    data-href=”"

  46. # dominik schmidt – Lesestapel: Nachrichten-Ticker, Netzbeschmutzer und Identität im Netz says:

    [...] Ich habe an anderer Stelle bereits geschrieben, dass ich Jeff Jarvis Gedankengänge sehr schätze. Einer der wenigen wahren Analysten der Entwicklungen rund um das Netz. Unter dem Thema One Identity or more? schreibt er über (echte) Identitäten im Netz und die Gegenseite, der Anonymität. Aufhänger ist die Einführung der Facebook-Kommentarfunktion. [...]


Nichts verpassen! Täglichen allfacebook.de Newsletter abonnieren:





Fan werden


WebMediaBrands
Mediabistro | SemanticWeb | Inside Network
Jobs | Education | Research | Events | News
Advertise | Terms of Use | Privacy Policy
Copyright 2012 WebMediaBrands Inc. All rights reserved.