Facebook like (Gefällt mir) Button per CSS anpassen
Auch der Facebook “Gefällt mir” Button lässt sich per CSS anpassen bzw. so gestalten wie man sich das wünscht. Hier wird einfach die Facebook „Comment Box“ eingebunden und per CSS das Kommentarfeld versteckt. Anschließend ist es möglich per CSS die Farben entsprechend anzupassen oder einen Hintergrund zu vergeben.
Um den Facebook „Gefällt mir“ Button per CSS anpassen zu können, wird zu allererst eine APP ID (Application ID) benötigt. Unter dem folgenden Link erhält man die benötigte APP ID: Create APP
Doch bevor wirklich eine APP ID vergeben wird, muss das entsprechende Konto bestätigt sein, was nur mit der Eingabe einer Handynummer oder Kreditkarte möglich ist.
Die Mehrheit überlegt sich hier zweimal ob der Facebook „Gefällt mir“ Button wirklich per CSS angepasst werden muss oder ob man doch lieber die Standard Version nutzt.
Hat man aber ein bestätigtes Facebook Konto, so kann man eine eigene Anwendung erstellen, womit man oben in der URL auch immer die eigene APP ID eingeblendet bekommt.
Zu allererst wird folgendes oben im HTML Tag eingebunden:
[php]<html lang=“de“ xmlns:og=“http://opengraphprotocol.org/schema/“ xmlns:fb=“http://www.facebook.com/2008/fbml“>[/php]Den folgenden Teil kopieren und im Footer einbinden, dabei die eigene APP ID nicht vergessen.
[php]<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>
[/php]
Anschließend einfach den folgenden Code an die gewünschte Stelle setzten.
[php]<fb:comments css=“http://domain.de/css/fb.css?1″></fb:comments>[/php]Nun einfach die CSS-Datei wie gewünscht anpassen, unwichtiges ausblenden oder ein Hintergrundbild hinzufügen und fertig. Nach jeder CSS Änderung muss die Variable hinten um eins hochgeschraubt werden, andernfalls werden keine Änderungen angezeigt.
Auch die Facebook Like Box kann man per CSS anpassen und hierzu wird auch keine APP ID benötigt. Weiterführende Informationen dazu:
- Facebook LikeBox CSS Anpassung
- Facebook like button