Gblack design

Facebook Kommentarfunktion

Anleitung facebook comments - Kommentarfunktion in eigene Webseite einbauen - html 5

Ich hatte folgende Probleme:

  1. ich wollte die Kommentarfunktion auf mehreren Unterseiten einbauen
  2. die JavaScript Datei auslagern
  3. eine Benachrichtigung erhalten, wenn es einen neuen Kommentar gibt
  4. die Kommentare im Moderation Tool angezeigt bekommen

Da ich keine passende Anleitung gefunden habe, möchte ich hier Schritt für Schritt erklären, wie ich zu meinem gewünschten Ergebnis gekommen bin.

 

1. Als erstes muss man eine neue App erstellen.
Dazu loggt man sich wie gewohnt bei Facebook ein und geht dann zu dieser Seite: https://developers.facebook.com/apps

Oben rechts auf Neue Anwendung erstellen klicken. Auf der nächsten Seite dann nur einen Anwendungsnamen eintragen. Z.B. Kommentare. Im nächsten Fenster das captcha eingeben und fertig. Jetzt landet man auf der Seite "Grundlegendes".

Unten bei "Wähle, wie sich deine Anwendung in Facebook integriert" klicken wir auf "Webseite mit Facebook-Anmeldung"; und tragen dort unsere Webseite in folgendem Format ein:
http://www.meine_domain.de/
Bitte den Schrägstrich am Ende nicht vergessen. Änderungen speichern und schon ist das Einrichten der App beendet.

2. Den Code für die Kommentarfunktion bekommen
Dazu geht man auf http://developers.facebook.com/docs/reference/plugins/comments/ Hier kann man mit dem Generator sich die Comment-Box zusammen stellen.

Bei URL gibt man die Seite an, auf der die Kommentarfunktion erscheinen soll. (Wenn man mehrere Kommentarfunktionen einbauen möchte, muss man dies nachträglich im Code machen, da jede Kommentar-Box ihre eigene URL haben muss, ansonsten werden alle Beiträge überall angezeigt. Später mehr dazu) Dann kann man noch die Breite und die Anzahl der Beiträge festlegen. Muss man aber jetzt nicht unbedingt machen, weil es sich hinterher immer noch leicht ändern lässt.

Nun klickt man auf "Get Code" und bekommt den Code angezeigt. In diesem Fenster ist es jetzt wichtig, die Zuordnung zur App-ID zu machen. Dazu wählt man bei "This script uses app ID of your app" den Namen aus, den wir der App zu Beginn gegeben haben. In unserem Fall war das "Kommentare". Damit erscheint die App-ID im Script.

Jetzt haben wir schon mal unser JavaScript, nun benötigen wir noch den Code zum Einbinden der Kommentarfunktion. Er wird in dem unteren Fenster angezeigt:

Dieser Code kommt dann an die Stelle, an der die Kommentar-Box erscheinen soll. Wenn ihr die Comments auf mehreren Unterseiten haben wollt müsst ihr beim Einbau in Eure Webseite auf folgendes achten:

data-href muss jeweils die URL der Unterseite haben z.B:

usw... Somit erhält jede Unterseite seine eigene Kommentar-Box und die geposteten Beiträge werden der jeweiligen Seite bzw. URL zugeordnet.

Ich habe noch data-mobile="auto-detect" mit reingeschrieben, somit wird die Kommentar-Box auch auf dem Handy richtig dargestellt. Mein fertiger Code sieht also so aus:

3. JavaScript auslagern und den Code in die Webseite einbinden
Um das Script auszulagern erstellt man sich eine *.js Datei in diese fügt man dann den Code, nur ohne script am Anfang und Ende. Die Datei habe ich fb-comments.js genannt und sie beinhaltet folgenden Code:

Diese Datei wird dann in der html-Seite vor </head> eingebunden:

Es wird zwar empfohlen das Script direkt nach dem geöffneten <body> Tag einzubinden, aber ich sehe dafür keinen Grund.

Jetzt kopieren wir noch folgenden Code an die Stelle, wo das Kommentarfeld auf der Webseite stehen soll:

Bitte daran denken, die URL für jede Box anzupassen. Jetzt haben wir es fast geschafft, es fehlen nur noch die meta Angaben im <head> Bereich.

4. Meta Angaben einfügen
Damit die Kommentare auch im Moderation Tool erscheinen müssen noch zwei Meta-Tags Angaben gemacht werden:

Hier muss die Facebook ID von Euch rein. Wie ihr an eure fb-ID kommt steht hier. Wichtig ist, dass die Nummer nicht in den geschweiften Klammern steht, so wie es bei Facebook vorgegeben ist.

Hier kommt noch mal die App-ID rein, die wir am Anfang beim Erstellen der App erhalten haben. Ihr könnt sie aber auch aus dem JavaScript kopieren :)

Jetzt müsste alles gehen und wenn ihr Euch eure Seite anseht und immer noch bei FB eingeloggt seid, müsste über der Kommentarfunktion die Moderationsleiste sichtbar sein. Nun kann man direkt auf der Seite moderieren oder über https://developers.facebook.com/tools/comments

Unter Einstellungen kann man dann noch festlegen, ob die Beiträge gleich freigeschaltet werden und ob man auch Kommentare via AOL, yahoo, hotmail usw. zulassen möchte.

Man kann auch noch mehr Meta Angaben machen, welche das sind und wie man die Kommentar-Box überprüft, findet man mit dem FB Debugger heraus. Falls nicht die Moderratorenansicht erscheint, gebt ebenfalls mal die betreffende URL in den debugger ein!

http://developers.facebook.com/tools/debug

 

Ich hoffe, diese Anleitung hilft euch bei der Installation von Facebook comments auf eurer Webseite weiter.

 

 

Sebastian Schwarz
Counter