Dienstag, 27. April 2010

Facebook “Gefällt mir” (aka Like) in Blogger nachrüsten

Blogger und der Facebook Like Button Wir wissen es: Facebook und Google streben die Weltherrschaft an.
Das ignoriere ich mal kurzerhand und werde euch erklären, wie man die relativ neue “Gefällt mir” (oder neudeutsch auch “Like”) Schaltfläche von Facebook in Blogger nachrüsten kann, so dass die Facebook-Nutzer ihr Gefallen gleich unter jedem Blogartikel mit einem Klick ausdrücken können.
Der Aufbau und die Anwendung des Like-Buttons sind auf der Facebook-Entwicklerseite erklärt: Like Button
Facebook-Ansicht des Like Buttons Dort kann man auch den Standard-HTML-Code generieren, den man mittels IFRAME dann in die eigene Webseite integrieren muss. Wenn man dann auf den Button klickt, erscheint dieser Vorgang des “Mögens” inklusive des Links zum Artikel im eigenen Facebook-Profil (siehe Bild rechts).
Für Blogger muss man natürlich noch etwas am Code herumfeilen, so dass der direkte Link zum Artikel dynamisch in den Code eingefügt wird. Hier könnt ihr sehen, wie ich das gemacht habe:

 <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=520&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:520px; height:60px'/>

ACHTUNG: Die vier Anführungszeichen “ sind durch &quot; zu ersetzen, der Browser wandelt das automatisch zur Anzeige hier in Anführungszeichen (trotz Code-Tag!) um. Direkte Anführungszeichen werden im XML-Code des Blogger-Template wohl nicht funktionieren, der Code sollte also so aussehen:

Code-FragmentDiese Zeile könnt ihr ebenfalls so verwenden, wobei die Breite des IFRAMES (hier 520 Pixel) eurem Template angepasst werden sollte. Ansonsten ist das generisch und sollte auch bei euch in eurem Blogger-gehosteten Blog ohne weiteres funktionieren. Ihr müsst euch nur noch eine Stelle in einem DIV-Container suchen, an der ihr den Code im Template einfügt. Ich habe ihn ans Ende des Artikels gestellt, direkt nach dieser Code-Zeile:

<div style='clear: both;'/> <!-- clear for photos floats -->
Das wiederum hängt stark vom Template ab und da kann ich keine allgemein gültigen Hinweise geben, hier ist etwas Probierei gefragt.
Wie bei jeder Änderung am Blogger-Template bitte vorher eine Sicherung der XML-Datei machen, sonst könnt ihr schneller etwas zerschießen als euch lieb ist! Und wer gar nicht weiß, wie man das Template editiert (Blogger => Dashboard => Layout => HTML bearbeiten) sollte am besten ganz die Finger davon lassen.
Damit bremst ihr dann auch die Weltherrschaftsbestrebungen von Facebook etwas aus! Tongue out
Allen anderen: Viel Spaß beim Mögen!

blog comments powered by Disqus

Design von Dicas Blogger, angepasst durch Mario Ruprecht