Blogger - Facebook-Kommentare einbinden

Wenn Ihr das Facebook Social Plugin Comments verwenden wollt, habe ich die Vorgehensweise hier mal zusammengefasst. Grundsätzlich ist es möglich das Plugin in jede beliebige Webseite einzubinden, ich beschreibe hier das Prozedere speziell für den Blooger-Post, was sich aber nicht wesentlich von der Verwendung in anderen Seiten unterscheidet. Das Ergebniss seht Ihr hier in meinem Blog.

1. Schritt - Deaktivieren der Standard-Kommentare (nur Blogger)
Meldet Euch in Eurem Blog an, wechselt nach Design => Einstellungen => Kommentare => Ausblenden checken und die Einstellungen speichern.

2. Schritt - Facebook-Anwendung erstellen
Als nächstes erstellt Ihr hier eine Facebook-Anwendung. Das wichtigste hier ist die App-ID, die wird später gebraucht. Die App muss mit der Domäne (z.B. it4zwigge.blogspot.com) und Webseite (z.B. http://it4zwigge.blogspot.com/) verbunden werden.

3. Schritt - Code bereitstellen
Ich habe mich für die HTML5-Variante der Kommentare entschieden, vor allem weil XFBLM Probleme im IE9 gemacht hat. Am besten klickt Ihr hier auf Get Code:

Dann werden Euch unter dem Tab HTML5 zwei Codeschnipsel angeboten:

Im ersten Schnipsel ersetzt Ihr <APPID> mit Eurer App-ID (Zeile 6) und aufpassen das Kaufmannsund (&) vor appId muss so kodiert sein wie oben (&amp;).

Im zweiten Schnipsel ändert Ihr dann das Attribut data-href auf Eure URL:

<div class="fb-comments" data-href="http://www.it4zwigge.de/"
data-num-posts="2" data-width="500"></div>

Um Blogger-Posts zu referenzieren, muss das Ganze so aussehen:

<div class='fb-comments' expr:data-href='data:post.url'
data-num-posts='2' data-width='500'></div>

4. Schritt - HTML-Template modifizieren
Nun müssen die beiden Schnipsel noch an Ort und Stelle kopiert werden. Dazu wechselt Ihr nach Design => HTML bearbeiten => Widget-Vorlagen komplett anzeigen checken.
Um den ersten Schnipsel einzufügen sucht Ihr den Text <body, nach dem Body-Tag, muss dann das erste Schnipsel hin.
Für den zweiten Schnipsel sucht Ihr den Text data.post:body, nach diesem Tag wird unser Quelltext dann eingefügt. Nach dem Speichern der Vorlage sollten dann Kommentare wie unten zu sehen sein.

Blogger - Facebook-Kommentare einbinden

Wenn Ihr das Facebook Social Plugin Comments verwenden wollt, habe ich die Vorgehensweise hier mal zusammengefasst. Grundsätzlich ist es möglich das Plugin in jede beliebige Webseite einzubinden, ich beschreibe hier das Prozedere speziell für den Blooger-Post, was sich aber nicht wesentlich von der Verwendung in anderen Seiten unterscheidet. Das Ergebniss seht Ihr hier in meinem Blog.

1. Schritt - Deaktivieren der Standard-Kommentare (nur Blogger)
Meldet Euch in Eurem Blog an, wechselt nach Design => Einstellungen => Kommentare => Ausblenden checken und die Einstellungen speichern.

2. Schritt - Facebook-Anwendung erstellen
Als nächstes erstellt Ihr hier eine Facebook-Anwendung. Das wichtigste hier ist die App-ID, die wird später gebraucht. Die App muss mit der Domäne (z.B. it4zwigge.blogspot.com) und Webseite (z.B. http://it4zwigge.blogspot.com/) verbunden werden.

3. Schritt - Code bereitstellen
Ich habe mich für die HTML5-Variante der Kommentare entschieden, vor allem weil XFBLM Probleme im IE9 gemacht hat. Am besten klickt Ihr hier auf Get Code:

Dann werden Euch unter dem Tab HTML5 zwei Codeschnipsel angeboten:

Im ersten Schnipsel ersetzt Ihr <APPID> mit Eurer App-ID (Zeile 6) und aufpassen das Kaufmannsund (&) vor appId muss so kodiert sein wie oben (&amp;).

Im zweiten Schnipsel ändert Ihr dann das Attribut data-href auf Eure URL:

<div class="fb-comments" data-href="http://www.it4zwigge.de/"
data-num-posts="2" data-width="500"></div>

Um Blogger-Posts zu referenzieren, muss das Ganze so aussehen:

<div class='fb-comments' expr:data-href='data:post.url'
data-num-posts='2' data-width='500'></div>

4. Schritt - HTML-Template modifizieren
Nun müssen die beiden Schnipsel noch an Ort und Stelle kopiert werden. Dazu wechselt Ihr nach Design => HTML bearbeiten => Widget-Vorlagen komplett anzeigen checken.
Um den ersten Schnipsel einzufügen sucht Ihr den Text <body, nach dem Body-Tag, muss dann das erste Schnipsel hin.
Für den zweiten Schnipsel sucht Ihr den Text data.post:body, nach diesem Tag wird unser Quelltext dann eingefügt. Nach dem Speichern der Vorlage sollten dann Kommentare wie unten zu sehen sein.

Facebook/Blogger: Like Button für jeden Blogeintrag

Wenn man im Blogdesign, unter "HTML bearbeiten" das Häkchen bei "Widget-Vorlagen komplett anzeigen" gesetzt hat, findet man im Quelltext den Abschnitt <data:post.body/>.
Hier kann man dann unterhalb einen der beiden gezeigten Codeschnipsel einsetzen.
Wichtig hierbei ist das Referenzieren des jeweiligen Eintrags, dass wird mit expr:href="data:post.url" gemacht.

Beispiel mit Javascript SDK - XFBML (empfohlen):Um dieses Codeschnipsel zu verwenden muss man das Javascript SDK von Facebook im Blog-HTML referenzieren.

Beispiel mit IFrame:

<iframe src="http://www.facebook.com/plugins/like.php?href=data:post.url&layout=standard&show_faces=true&width=450&action=like&font=arial&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Wenn man alles richtig gemacht hat, sieht es dann so aus wie hier, also ein Like Button für jeden Blogeintrag. Dass heisst unter anderem, ein Besucher des Blogs kann mit einem Klick, den Eintrag in sein Facebook-Profil posten.

Facebook/Blogger: Like Button für jeden Blogeintrag

Wenn man im Blogdesign, unter "HTML bearbeiten" das Häkchen bei "Widget-Vorlagen komplett anzeigen" gesetzt hat, findet man im Quelltext den Abschnitt <data:post.body/>.
Hier kann man dann unterhalb einen der beiden gezeigten Codeschnipsel einsetzen.
Wichtig hierbei ist das Referenzieren des jeweiligen Eintrags, dass wird mit expr:href="data:post.url" gemacht.

Beispiel mit Javascript SDK - XFBML (empfohlen):Um dieses Codeschnipsel zu verwenden muss man das Javascript SDK von Facebook im Blog-HTML referenzieren.

Beispiel mit IFrame:

<iframe src="http://www.facebook.com/plugins/like.php?href=data:post.url&layout=standard&show_faces=true&width=450&action=like&font=arial&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Wenn man alles richtig gemacht hat, sieht es dann so aus wie hier, also ein Like Button für jeden Blogeintrag. Dass heisst unter anderem, ein Besucher des Blogs kann mit einem Klick, den Eintrag in sein Facebook-Profil posten.