Facebook LIKE Button unter jedem Blogspot Blogbeitrag automatisch anzeigen lassen

Facebook bietet seit geraumer Zeit die Möglichkeit an, auf externen Seiten den aus Facebook gewohnten Like-Button anzuzeigen. Das funktioniert auch, mit einer kleinen Veränderung des Codes, bei blogspot.com, bzw. blogger.com Blogs. Klickt ein Facebook User in Deinem Blog auf diesen Button, dann erstellt er damit einen Eintrag im Aktivitäten Fenster auf seinem Facebook Profil mit dem Inhalt „Username xyx gefällt Beitragstitel“, wobei das Ganze mit einem Link zum entsprechenden Beitrag auf Denen Blog verknüpft wird.

Damit hat jeder Besucher Deines Blogspot-Blogs die Möglichkeit, jeden Artikel mit nur einem einzigen Klick in sein Facebook-Profil zu posten, ohne den Umweg über Facebook (Seite öffnen, Link kopieren und eintragen, abschicken) gehen zu müssen. Deine Leser können damit also Deine Beiträge verlinken, Du bekommst dadurch u.U. mehr Leser. Wie Du das Ganze automatisch unter jeden Deiner Beiträge einbaust, erkläre ich Dir im folgenden. (Die Facebook-Likebox, bei mir im Blog auf der rechten Seite eingebaut, ist eine andere Funktion, die ich Dir in Kürze auch erklären werde).

Facebook bietet mehrere Varianten an. Ich habe mich hier für die entschieden, die nur den Button anzeigt und daneben eine Zahl, wie viele User den Button bereits gedrückt haben. Das Ganze passiert dann anonym, es werden in Deinem Blog keine Usernamen angezeigt. Ich habe gemerkt, dass eine Anzeige des Namens die User eher davon abschreckt diesen Button zu drücken, daher hier die anonyme Variante.

Als erstes musst Du Dich unter blogger.com in Dein blogspot Dashboard einloggen. Dort wechselst Du auf VORLAGE und dann auf HTML bearbeiten. Du solltest Dir nun eine Sicherheitskopie Deines Templates herunterladen. Wie Du das machst, habe ich hier erklärt. Nun setzt Du das Häkchen bei Widget-Vorlagen komplett anzeigen (letzteres fällt weg, falls Du schon den neuen Editor mit den Zeilennummern und mehrfarbigem Inhalt verwendest). Im Vorlagenfeld suchst Du nun nach dem Ausdruck:

<data:post.body/>

Falls Du nicht den kompletten Text mit den Augen durchsuchen möchtest, nutze doch einfach die Suchfunktion Deines Browsers, normalerweise mit der Tastenkombination strg und f bei PCs oder cmd und f bei Macs. Dann einfach data:post.body ins Suchfeld eingeben und freuen, dass es so einfach war. Beim neuen Editor von Blogspot wird mit derselben Tastenkombination die editorinterne Suche verwendet, die aber genauso funktioniert.

Direkt darunter, also in einer neuen Zeile, fügst Du folgenden Code ein:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=180&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:180px; height:30px;' align='right'/>
</b:if>

und speicherst das Ganze mit VORLAGE SPEICHERN ab. Das war auch schon alles.

Sollte es im Template Deines Blogs mehrmals eine Fundstelle für

<data:post.body/>

geben, dann wiederholst Du diesen Eintrag bitte jeweils. Er wird zwar nur an einer Stelle genutzt werden, an den anderen stört er allerdings nicht. Und da ich hier nicht alle Templates auswendig kenne ist dies immerhin eine Möglichkeit es funktionierend und nicht störend hinzubekommen. Um weitere Fundstellen zu finden, klicke einfach auf weitersuchen, im neuen Editor einfach nochmal ins Suchfeld gehen und ENTER drücken. Hier mal ein Beispiel, wie es im neuen Editor aussehen würde wenn der Code an der richtigen Stelle eingegeben wurde:



Wenn Du Dir jetzt einen Beitrag in Deinem Blog anschaust, siehst Du unter dem Beitragstext den „Gefällt mir“ Button.

Egal ob Du auf der Startseite nur Textauszüge anzeigst oder die kompletten Beiträge, der Button erscheint dort nicht. Öffnest Du jedoch einen einzelnen Beitrag ist der Button unter Deinem Text sichtbar. Willst Du den Button aber auch auf Deiner Startseite unter jedem Beitrag sehen, dann lässt Du einfach die erste und die letzte Zeile des Codes weg.

Drückt ein Leser den Button und war vorher bereits bei Facebook eingeloggt, dann erhöht sich nur die Zahl neben dem Button und das wars (der Eintrag ins Profil passiert unsichtbar). War der Leser noch nicht eingeloggt, dann öffnet sich ein keines Popup-Fenster mit der Aufforderung sich einzuloggen. Die einzugebenden Daten „sieht“ nur Facebook.

Wie das Ganze aussieht und was passiert kannst Du hier ausprobieren, schaue hinterher einfach in Dein Facebook Profil und Du wirst dort auch sofort das Ergebnis sehen.


Wie Du siehst, wird immer der Beitrag selbst empfohlen. Deinen ganzen Blog empfehlen geht natürlich auch, siehe hier bei mir in der linken Sidebar (analog zur Likebox). Auch dazu gibt es in Kürze eine Anleitung von mir.

Zwei kleine Dinge noch am Ende erwähnt, quasi als Belohnung für alle, die bis hierher gelesen haben. Willst Du den Button nicht rechts, sondern links angezeigt bekommen, so tauschst Du einfach das RIGHT im Code gegen ein LEFT aus. Und hast Du einen Blog mit einem dunklen Hintergrund, so wie hier bei mir, dann mach aus dem LIGHT ein DARK, so wirkt es dann stimmiger im Design. Und jetzt, viel Spaß damit!