Seit einer Veränderung in Facebook im April 2010 kann nun der beliebte Like Button auf jeder Internetseite integriert werden. Allerdings behält der Button immer die gleiche Form und Gestalt bei. In diesem kurzen Tutorial erklären wir, wie man seinen eigenen Facebook Like Button erstellen und mit CSS stylen kann.
Die Facebook Api
Facebook bietet eine ausgereifte Api an, mit der es möglich ist, Inhalte von Facebook auf seiner eigenen Internetseite zu veröffentlichen und auch Inhalte von seiner eigenen Seite in Facebook zu integrieren.
Mehr Informationen zur Api gibt es unter: http://developers.facebook.com/docs/api
Um unseren eigenen Facebook Like Button auf unsere Internetseite zu integrieren benötigen wir zuerst folgenden Javascript Code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'DEINE_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>
Dieser wird am Ende der HTML Seite aber noch vor dem schließenden </body>-Tag eingefügt. Somit ist die Facebook Api fast einsatzbereit.
In diesem Javascript Code muss lediglich noch die DEINE_APP_ID durch eine gültige Facebook App Id ersetzt werden. Man bekommt diese von: http://www.facebook.com/developers/createapp.php Dazu ist natürlich ein verifizierter Facebook Account nötig.
Den individuellen Like Button integrieren
An die Stelle auf der der Facebook Like Button erscheinen soll wird folgender Code eingefügt:
<fb:comments css="http://www.gurkcity.de/css/facebook.css?1"></fb:comments>
Dieser Code fügt an der Stelle eine Facebook Comment Box ein. In dieser Box sind viele Informationen enthalten die wir für unseren Facebook Like Button nicht benötigen. Allerdings kann man mit dem Attribut css ein Stylesheet angeben, welches auf diese Box angewendet wird. Dadurch ist es möglich mit Stylesheets das Aussehen der Box zu verändern und unnötige Elemente in der Box zu verbergen. Auch das Facebook Like Button typische Hintergrundbild und die Farben können mittels der CSS Datei umgeändert werden.
Tip: CSS Cachebreaker
Wer sich schon immer mal gefragt hat warum hinter einer CSS Datei ein Fragezeichen und eine Zahl oder ein Buchstabe steht:
Diese Technik kann man als Cachebreaker bezeichnen. Viele Content Managment Systeme wie Drupal oder Wordpress und auch die Facebook Api stecken die CSS Dateien in einen Cache. Will man nun einen veränderte CSS Datei hochladen wird diese evtl. nicht mehr berücksichtigt, da noch die alte CSS Datei im Cache existiert.
Gibt man dem CSS Verweis nun einen anderen Namen mit Fragezeichen und Buchstabe/Zahl wird der Cache automatisch geleert. Das heißt dass der eigentliche Dateiname erhalten bleibt und nur der Verweis sich verändert.
Browser interpretieren die Fragezeichen und Buchstabe/Zahl Kombination im Verweis zur CSS Datei nicht.
Man sieht, dass es mittels der Facebook API ganz einfach ist, seinen eigenen Facbook Like Button mittels CSS zu stylen.
Bookmarks:
Delicious Facebook Google Yahoo Mr. Wong Linkarena Digg