Wir nutzen Cookies & das Facebook Besucheraktions-Pixel für statistische Zwecke. Einverständnis bestätigen: OK

Mehr Infos: Datenschutzbestimmungen

Google Adwords Premier Google Partner Badge
 

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:

Verfasst von Arwin Barsekhian

 

Hat dir dieser Beitrag gefallen?

Über den Autor

Blog
Unter „Blogredaktion“ werden Fachbeiträge verschiedener Experten aus dem Unternehmen ohne Autorenkennzeichnung publiziert. Ihr habt Fragen oder Anregungen zu einem speziellen Beitrag? Kein Problem, die Blogredaktion steht euch dafür gerne hier zur Verfügung.

Hinterlasse einen Kommentar

  • D.V. 20.04.2011, 16:09 Uhr

    Vielen Dank für diese toll recherchierte Info. Jetzt bin ich nur auf die vielen kreativen Ergüsse gespannt, die verschiedene Design-Laien mit dieser neuen Möglichkeit verursachen. Hoffentlich sehen wir nicht bald Pril-Blumen und animierte Gifs als Like-Buttons ;).

    Wenn das Ganze jedoch professionell umgesetzt wird, dann macht es absolut Sinn, denn ein Like-Button, der in das Design einer HP eingebunden wird, lässt das Gesamtkonstrukt interaktiv und dabei hochprofessionell wirken.

    VG
    D.V.

  • Mario Porst 20.04.2011, 16:35 Uhr

    Ich würde nicht ganz so viel verändern, da der Button ja einen Wiedererkennungswert hat. Ich habe auch schon von Phishing-Methoden mit gefälschtem like Button gehört. Daher würde ich einen solchen Button, der nicht original aussieht erst gar nicht klicken – außer ich kenne die Seite gut bzw. schaue ich mir den Link dann genau an…

  • Arwin Barsekhian 27.04.2011, 10:31 Uhr

    Da bin ich der selben Meinung wie Mario. An diesen Like-Button würde ich persönlich auch keine CSS Änderungen vornehmen, da der Like Button wie Mario schon sagt einen Wiedererkennungswert hat. Aber wer dennoch seinen Like Button ändern möchte, kann evtl. mein Beitrag helfen 😉

  • Voucher 28.04.2011, 14:27 Uhr

    Nun wird das “SDK Asynchronously Script” benötigt.

    Eigentlich wird nur etwas JavaScript benötigt, und selbst wenn man wirklich Facebooks SDK einsetzen müsste, würde ich eher vom JavaScript SDK sprechen. Dabei erschreckt weniger die krude Übersetzung (hey, jeder hat mal einen schlechten Tag), als vielmehr die Tatsache, dass hier jemand nicht verstanden haben kann, um was es eigentlich geht – das CSS anpassen wollen und gleichzeitig gängige Begriffe nicht zu kennen… auweia;-)

  • Arwin Barsekhian 28.04.2011, 15:29 Uhr

    Vielen Dank für den Hinweis. Die entsprechende Stelle habe ich abgeändert.

  • FreemanTS 11.05.2011, 9:06 Uhr

    Hallo, Ich hab eine kleine Frage und zwar will ich auf meiner Neuen HP den Gefällt mir Button rein machen jetzt hab ich mir das von Facebook machen machenlassen aber da steht dann Like und da kommt meine Frage wie kann ich das auf Gefällt mir ändern?

  • Arwin Barsekhian 11.05.2011, 9:20 Uhr

    Hallo @FreemanTS

    Um den Facebook Button “Like” auf “Gefällt mir” zu bekommen, muss lediglich im Code der Teil mit “en_US” in “de_DE” abgeändert werden.

  • FreemanTS 11.05.2011, 10:14 Uhr

    super danke dir.

  • Peter 13.05.2011, 18:23 Uhr

    Interessant, vielleicht könnt ihr auch mal einen Artikel schreiben, wie man einen Facebookbutton erstellt, der einen vorgegebenen Text auf der eigenen Pinnwand postet

  • Hirsch Nadja 14.05.2011, 0:04 Uhr

    sehr interessant, danke für den tollen Tip

  • Marco 31.05.2011, 10:10 Uhr

    Da gebe ich Mario Recht. Viele kennen einfach das Original und klicken drauf, wenn dieser völlig anders aussieht, muß der Gast sich erst daran gewöhnen.

  • Manuela Wenkmann 13.07.2011, 18:46 Uhr

    Sehr interessant, danke für den super Tipp.

  • Christin 14.07.2011, 13:03 Uhr

    Hey.
    Danke für die tolle Beschreibung und die Möglichkeit.
    Da ich gebeten wurde die Größe des Buttons zu ändern, habe ich es gleich ausprobieren können.
    Es hat alles super funktioniert.
    Kaum habe ich es dann auf allen Seiten eingefügt. Hat es nicht mehr funktioniert. Der Button ist da, aber man kann nicht “liken”. Wenn man es versucht erhält man einen Fehler. Klickt man auf den Fehler-Link, bekommt man diese Infos: Warnung
    Required Property Missing – og:title is required
    Required Property Missing – og:type is required
    Required Property Missing – og:url is required
    Required Property Missing – og:image is required
    Dann habe ich ewig herumprobiert. Nach einiger Zeit ging es plötzlich wieder. Also habe ich es wieder auf einer weiteren Seite eingebaut: Gleiches Spiel.
    Ich habe keine Idee mehr woran es liegen könnte, aber vielleicht hatte ja jemand das gleiche Problem?
    Über eine Rückmeldung würde ich mich total freuen.
    Christin

  • Christin 14.07.2011, 13:05 Uhr

    Ergaenzung:
    Der Fehler-Link erscheint nur, wenn die css-styles nicht aktiviert sind.

  • Martin 08.10.2011, 23:19 Uhr

    Hallo Arwin,

    ich habe ein Problem mit der Anpassung des Like-Buttons und ich hoffe, dass du mir helfen kannst.

    Und zwar habe ich unter meinen Artikeln eine neue Box mit Google Plus, Twitter und Facebook.

    Aber der Facebook-Button will sich einfach partou NICHT an die erste Stelle setzen lassen. Was mach ich falsch? Ich hab schon echt alles versucht und bin echt am verzweifeln >.<

    Hier eine Beispiel-URL, ganz runter scrollen: http://www.promicabana.de/daniela-katzenberger-bringt-memoiren-raus/

    Danke!
    Martin

  • Arwin Barsekhian 28.10.2011, 14:14 Uhr

    Hallo Martin,

    sorry ich habe eben gerade deinen Eintrag gelesen. Aber wie ich sehe hast du dein Problem bereits gelöst. Solltest du weitere Fragen haben, kannst du dich gern wieder melden 😉

  • Jan 30.07.2012, 2:38 Uhr

    Gefällt mir!

  • Matthias 28.03.2013, 16:40 Uhr

    Ich sage nur: Facebook wird als Markt deutlich überschätzt.

  • Anno07 07.04.2013, 22:05 Uhr

    Für eine gewisse Individualität nicht schlecht, aber stehen Aufwand-Nutzen in einem guten Verhältnis?