Facebook Like Button – Css Styling
18.10.2010 - 09:24
Achtung: Selbst gestaltete Like-Buttons werden ab dem 29. April 2011 angeblich nicht mehr funktionieren. Quelle: http://developers.facebook.com/blog/post/490
Überarbeitete Version. Im Stylesheet ist jetzt besser zu erkennen wie man die Größe ändert und die Pfade zu den Bilder anpasst. Aber vor allem gibts jetzt auch einen Unlike Button und einen Zähler.
Für den Button hier meine Schritt-für-Schritt-Anleitung und der neue Style.
Ich biete nur die Technik. Wie Ihr den Button gestaltet bleibt ja Euch überlassen.
Im Internet Explorer 8 will das Demo bei mir einfach nicht laufen:
http://martinrack.de/facebook-like-button-design/
Nicht, dass mir der IE wichtig sei, ich wollte es nur kurz anmerken. Schade, dass es mit den Browsern (hauptsächlich IE) heutzutage immernoch soviele Schwierigkeiten gibt.
Echt nicht? Letzte mal als ich es getestet hatte gings noch im IE.
@Martin: Nein, bei mir im IE8 leider nicht. Es bleiben im Bereich “Nachher” immer diese drei Facebook-Ladebalken dort. Und nichts geht weiter.
Witzig finde ich übrigens auch, wie es hier integriert ist:
http://designlenta.com/post/453/
(unters letzte Bild scrollen)
CSS-technisch nicht anspruchsvoll, aber sprach mir spontan aus dem Herzen.
@Simon: Bei mir funktioniert er im IE8 (Xp)
Sascha
Hallö,
also die Idee finde ich ganz nett, aber auch unter Opera macht der BigButton Ärger.
Pc nehm ich an? Auf dem Mac gehts mit Opera..
Den Ärger mit dem “BigButton”-Style in manchen Browsern (vor allem in älteren Browsern) könnt ihr über einen Umweg über Hintergrundgrafiken vermeiden. Also die Kreisform nicht über das CSS-Attribut “moz-border-radius” etc. bestimmen, sondern über ein “background-image”.
Es sind zwei Hintergrundgrafiken. Daher kann man sie einfach beliebig austauschen und muss im Style nur die Höhe und Breite anpassen…
Sascha
Ja, PC, richtig. ^^
moz-border-radius ist ja eigentlich eh nur Firefox-Konform.
Zu den Buttons:
Denke auch, dass die Buttons im Facebook-Style eher ansprechen, da die in dem Stil einfach bekannt sind.
Dennoch:
Um das ganze noch W3C valid für XHTML 1.1 zu bekommen gibt’s hier nen Artikel den ich verfasst habe.
http://www.ka-mediendesign.de/blog/facebook-markup-language-fbml-in-valid-xhtml/
Grüße!
Besteht auch die Möglichkeit nur einen Textlink mit der Like-Funktion zu versehen anstatt via CSS ein Bild zu verwenden? Hat einer von Euch einen tüchtigen Tipp für mich?
Herzlichen Dank im Voraus,
Martin
Bei der ersten Version wars noch ein Textlink. Also einfach den schwarzen Hintergrund und das Bild weglassen und den Text so formatieren wie man will. Nur Webfonts sind nicht möglich…
Martin
Ist es auch möglich den eigentlichen Text – also das ›Gefällt mir‹ – in etwas anderes zu ändern? Weil dieser blieb ja in der ersten Version gleich. Hab Dank im Voraus, Martin.
Nope, zumindest mit meiner Technik lassen sich die Texte nicht ändern. Nur die Sprache lässt sich festlegen..
Martin
Hab dennoch vielen Dank – sollte sich hier noch eine Lösung auftun, teile ich sie natürlich …
Ach doch, da fällt mir eine Möglichkeit ein… werd ich gleich mal testen.
Jo, es geht. Coole Idee :)
Ich kapiere grade nicht wie ich es dann auf der Startseite einbinde, wie hier bei Dmig :/ Und wo ich was genau einfüge habe ich auch noch nicht ganz raus… Ich möchte es in meine Sidebar bauen, dort wo sich momentan der einfache Facebook Kasten befindet. Und funktioniert das auch, obwohl ich schon das “einfach” schwarze Like Button Design nutze? Fragen über Fragen, ich hoffe du kannst mir weiterhelfen :)
Like Box oder Like Button? Geht mit beidem. Hier den XFBML-Code holen. Für den Like Button nimmste aber die Comment Box. Und diesen Code dann um css=”pfadzumstyle” erweitern. Nimm testweise ersteinmal den selben Pfad wie hier, dann müsste es schon funktionieren. Wenn es das tut nur noch die Dateien zu dir auf den Server holen und die Pfade anpassen..
Like Box :) Und Irgendwas mache ich falsch.. :/ Ich habe ja schon dein einfachen schwarzen Like Button unter jedem Beitrag, das halt alles wunderbar geklappt. Nur die Like Box zickt rum… Vielen Dank schonmal für die Mühe :)
Copy/Paste den Quelltext von hier, dann sollte es direkt klappen:
http://martinrack.de/like-button/fan-box/
AAHHHH Vielen Dank, erst dachte ich, ich sei bescheuert. aber der verschwindet ja wenn ich ihn geliked habe :D
Jo, für den hab ich noch keine “entlikebare” Variante.
Funktioniert das ganze auch für eine definierte URL, also zum Beispiel für eine Facebook Seite? Wenn ja wie? Wäre super wenn du mir helfen könntest.
Siehe 3 Kommentare weiter oben.
Vorsicht: manipulierter Like-Button! [Update] « Marcel Pauly
[...] noch von Haus aus vornehmen. Was darüber hinaus möglich ist, zeigen viele Tutorials und Demos im [...]
nastia
Hallo,
hoffe Du hast das Thema noch nicht aufgegeben und ich kann noch was fragen,
habe echt ga nichts mit XFBML gemacht und verstehe nur die Hälfte
….”unter “Webseite” die “Application ID” kopieren und im Code oben statt “your app id” einfügen.<—muss man hier auch die Webseitenadresse angeben?
Bis jetzt funktioniert bei mir das ganze noch nicht, kann jetzt aber nicht einfach so aufgeben..
Gruß
> Muss man hier auch die Webseitenadresse angeben?
Nein. Von Facebook brauchst du nur diese lange Zahl..
nastia
Danke für die Antwort! Funktioniert mit deinem css ganz gut
“Und vergesst nicht bei Änderungen im Stylesheet die Variable am Ende des Pfades zu ändern”
—>
fb.css?6 meinst Du dass wenn ich meine css abspeichere das am Ende auch so ein?6 oder !2 kommt?
anfänger :)
Bei jeder Änderung im Stylesheet die Zahl im Pfad zum Stylesheet ändern.
< fb:comments css="http://xxx.de/fb.css?6">< /fb:comments>
< fb:comments css="http://xxx.de/fb.css?7">< /fb:comments>
< fb:comments css="http://xxx.de/fb.css?8">< /fb:comments>
< fb:comments css="http://xxx.de/fb.css?9">< /fb:comments>
< fb:comments css="http://xxx.de/fb.css?10">< /fb:comments>
< fb:comments css="http://xxx.de/fb.css?11">< /fb:comments>
nastia
Wahrscheinlich nur mit?
nastia
Deine Antwort hatte ich nicht gesehen, weiter gegoogelt
Danke!
nastia
Wenn ich meine css Datei speichere mit ?und zahl dahinter wird es von Dreamweaver als plain text document gespeichert und es wird wohl nicht als css Datei interpretiert: Die facebook cmment box erscheint..hast Du vielleicht eine Vermutung ob es an Dreamweaver liegt ?
Nicht die Css-Datei mit einem ? im Dateinamen abspeichern, sondern in der Html-Datei im Code diese eine Stelle mit der Url zur Css-Datei. Die Css-Datei einfach mit dem Namen fb.css speichern und so lassen.
Optional könntest du zum besseren Verständniss auch den Namen der Css-Datei ändern. Aber dann zb so: fb1.css, fb2.css, fb3.css
Und im Html-Code dann: < fb:comments css="http://xxx.de/fb3.css">< /fb:comments>
nastia
Du bist ein Schatz, Danke!
hallo leute was ich immer noch nicht ganz auseinander halten kann . ist ob die leute wenn sie auf meiner seite auf den button klicken fans meiner facebookseite werden oder ob sie nur in iherer timline den link zu meiner webseite posten!?
letzteres oder?
schade . gibt es da noch andere möglichkeiten!?
besten gruss 12557
Klick doch einfach mal selbst drauf ;)
Also letzteres.
Nö. Entweder Fan werden oder Seite liken.
12557
danke dir martin .
wenn ich selbst drauf klicke poste ich lediglich den link . warscheinlich weil ich fan und admin bin . ich habs auch schon mit freunden getestet und bin mir immer noch nicht sicher . du schreibst entweder oder . das bedeutet ?
Du kannst deine Besucher deine Webseite oder deine Fanpage liken lassen – ganz wie du willst. Aktuell lässt du deine Besucher deine Webseite liken.
ah genau . so dacht ich mir das .
nur wie stell ich um das die leute meine fanpage liken also fan werden sobald sie auf meiner HP “deinen” button drücken?
kannst du mir das kurz erklären?
vielen lieben dank
aktuell hab ichs nach deiner anleitung so eingefügt:
window.fbAsyncInit = function() {
FB.init({appId: ‘114765636785′, 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);
}());
<fb:comments css="/facebookLIKE/FACEbookLIKE.css?17″>
Eine url=”" angeben:
<fb:comments url=”http://www.facebook.com/…/” css=”…”></fb:comments>
[HTML]<fb:comments url=”http://www.facebook.com/pages/formkoalitionde/114765636785” css="/facebookLIKE/FACEbookLIKE.css?17″>
[/HTML]
so schauts jetzt aus . ist das richtig so?
du darfst jetzt gerne testen . heheheh!!
wenn ich selber drauf geh steht auf meiner FB TIMELINE nur wieder gefällt ein link
Ist richtig so. Jetzt nur noch auf deiner Seite ändern…
sollte schon oben sein . vielleicht mal F5 drücken .
bist schon fan geworden? hahah oder gehts noch nicht ?
12557
der button geht nicht mehr seit heute . kann es sein das FB den
zugang geändert hat? geht es bei euch noch?
Siehe Post ganz oben… Hatte es schon vor 3 Wochen angekündigt und versucht so gut es geht zu verbreiten. Also den Button kann man jetzt nicht mehr direkt per Css stylen. Nur noch indirekt wie zb hier: http://www.designmadeingermany.de/2011/8267/
Och, und jetzt geht er wieder…
Gerold M
Naja nur das CSS-Verändern bei der Comment Box wird nicht mehr funktionieren, von der Like-Box ist ja keine Rede bis jetzt
Der mit Css veränderbare Like-Button ist aber Teil der Comment Box ;)
Nisaj
Mal ne Frage.. kann man die Iframe-Version des Like-Buttons auch in der Art ändern?! Weil diese gestylte CommentBox bei mir ziemlich lange fürs laden benötigt oder manchmal gar nicht aufhört zu laden.
Meines Wissens nach ist das die einzige Möglichkeit den Likebutton direkt zu stylen.
Nisaj
Und die Probleme mit der langen Ladezeit.. hast du die ebenfalls? Zu sehen ist dann dieser Ladebalken von Facebook. Kann man den irgendwie aussschalten?
Achja.. weißt du zufällig wie man die vordefinierte Größe der CommentBox ändert? Meine Inhalte die sich unter dem Button befinden haben nämlich anfangs einen extremem Abstand, der erst nach dem kompletten Ladevorgang verschwindet.
Danke für die Hilfe!
Den Ladebalken kriegt man weg indem man ein kleineres Div mit overflow:hidden aussenrum macht. Auf diesem Web verschwindet auch der extremen Abstand.
Aber siehe ganz oben die rote Schrift! Die gestylten Buttons werden nicht mehr lange funktionieren.
Nisaj
Okay, aber eine andere Möglichkeit den Like-Button an sein eigenes Design anzupassen gibt es nicht mehr, oder? Wenn nicht, dann ist das ja echt toll gemacht von Facebook.. und ich muss ich meinen Like-Button gut im Auge behalten.
Aber danke nochmal für den schnellen Rat!
Grüße,
Nisaj
Nicht direkt. Nur indirekt. Nichts wildes, aber ich mach demnächst ein neues Tutorial dafür. Muss mir nur mal irgendwie den Internet Explorer zum testen organisieren.
Kommentieren
dr
is der vidsuelle wiedererkennungswert beim like-button nicht viel wertvoller als eine fancy eigeninterpretation?