Die Social Plugins von Facebook lassen sich mit Css schön an das Design der eigenen Seite anpassen. Nur bei dem Like Button funktioniert dies leider nicht. Und dennoch ist es mir auf Design made in Germany gelungen. Der Trick ist: Anstatt den Like Button zu verwenden, nimmt man die Comment Box, in welcher der Like Button schon integriert ist und versteckt das Kommentarformular einfach. Dabei ist alles möglich was Css hergibt.
Vorher:
Nachher:
Variante:
Klickt ruhig auf ihn, wenn Euch der Tipp gefällt.
Für alle die sich mit den Social Plugins nicht auskennen oder noch nie angepasst haben:
Ersteinmal benötigt man für die Comment Box das JavaScript SDK. Aber keine Sorge, dafür müsstet Ihr nur folgende Zeilen in den Footer einfügen sofern nicht schon vorhanden:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>Wer eine eigene App-Id haben will, kriegt sie hier. Von nun an könnt Ihr bei allen anderen Social Plugins auf die Javascripte und Iframes verzichten und direkt den viel übersichtlicheren XFBML-Code mit mehr Optionen verwenden.
Nun einfach folgendes an die Stelle wo der Like Button erscheinen soll:
<fb:comments css="http://martinrack.de/fb.css?6"></fb:comments>
Jetzt sieht Euer Like Button auch schon so wie im obigen Beispiel aus. Um ihn an Euer Design anzupassen oder auch nicht, solltet Ihr nur ein eigenes Stylesheet für den Button anlegen und den Pfad im XFBML-Code anpassen. Als Vorlage könnt Ihr Euch natürlich meinen Style anschauen, kopieren und verwenden. Hier die Variante. Beachtet auch das Hintergrundbild, welches mein Herzchen beinhaltet und ebenfalls nach belieben verändert werden kann. Und vergesst nicht bei Änderungen im Stylesheet die Variable am Ende des Pfades zu ändern, da Facebook externe Dateien zwischenspeichert.
Damit der Button auch im Internet Explorer funktioniert:
<html lang="de" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">