wie man die Farbe von facebook like button ändert

Sie können das Farbschema des gesamten Buttons entweder auf hell oder dunkel ändern, aber das sind die einzigen Optionen, die erlaubt sind. Siehe die Markenrichtlinien :

  

Sie können die Größe zwar an Ihre Bedürfnisse anpassen,   Sie dürfen die Schaltfläche "Gefällt mir" nicht auf andere Weise ändern   (z. B. durch Änderung des Designs).

Ja, es kann gemacht werden. Ich werde Ihnen die ersten Schritte geben (nur um Farbe zu entfernen), dann können Sie eine weitere Untersuchung auf -Webkit-Filter: hue-rotate machen, um die Farbe zu ändern, wenn Sie nicht wollen, nur zu entferne es.

Fügen Sie zuerst eine #id zu Ihrem FB-Code hinzu:

Sie können Ihren Code so lassen, wie er gerade ist, fügen Sie einfach id="fboverlay" dort hinzu.

Bearbeiten Sie dann Ihre CSS und fügen Sie hinzu:

Oder was auch immer Sie möchten. Und das ist es.

Sicherlich verwendet es CSS3, daher ist es nicht 100% kompatibel (speziell mit alten Browsern), aber Sie wissen wie es ist ...

JA kann gemacht werden

NEIN Facebooks Markenrichtlinien scheinen das nicht zuzulassen

Siehe unten für technische Details oder probiere das Facebook Button Colorizer Werkzeug aus, das ich gebaut habe .

Drehen Sie die Taste rot (Chrome, Firefox, Safari, Opera)

Es ist möglich, die Farbe der Schaltfläche über CSS / SVG-Filter zu ändern. Diese können das Aussehen des Iframe-Inhalts beeinflussen. Danke an OleSchmitt dafür, dass er mich auf diese Strecke gebracht hat.

Webkit

Mit diesem Code kann ich derzeit die Farbe der Schaltfläche in Webkit-basierten Browsern rot machen:

stylesheet.css:

Wurde nur in Chrome getestet, sollte aber als Webkit-Funktion auch in Safari und Opera funktionieren, da beide ebenfalls Webkit-basiert sind.

Firefox

Firefox unterstützt die CSS-Entsprechungen der SVG-Filter noch nicht, aber Sie können hue-rotate durch Verknüpfung mit einem .svg-Filter zum Arbeiten bringen. Erstellen Sie einen SVG-Filter (entweder extern oder intern) und beziehen Sie sich auf das in Ihrem CSS:

Externe SVG-Datei

filters.svg:

Internes SVG-Fragment

page.html

stylesheet.css:

Es wird nur eine SVG-Referenz benötigt, entweder zu einer externen Datei oder zu einem Inline-SVG-Fragment. Nicht beide gleichzeitig.

Getestet in Chrome, Firefox und Opera sollte auch in Safari funktionieren. Schau dir dieses jsFiddle an.

UPDATE : Es scheint, dass Chrome und Firefox die an die (-webkit-) Filterregel übergebene URL ein wenig anders behandeln. Ein Browser löst es gegen das Stylesheet, in dem sich die Regel befindet, das andere gegen das HTML-Dokument. Ich hatte die merkwürdige Situation, dass interne Filter für Chrome funktionierten, aber nicht Firefox und externe Filter funktionierten für Firefox, aber nicht für Chrome. Wenn es für Sie nicht funktioniert, schauen Sie sich die URL sehr genau an. Am Ende habe ich die Style-Regel, die das SVG-Fragment bindet, einfach inline an den fb-like-Button gebunden. Das funktioniert auf beiden Browsern.

Was ist mit dem Internet Explorer?

IE ist bei der CSS-Unterstützung zurückgeblieben, aber sie werden irgendwann keinen Zweifel mehr haben. Bis dahin begrüße ich Vorschläge für den Umgang mit IE.

Was ich getan habe, weil ich gerade das gleiche Problem hatte, habe ich die Hintergrundfarbe von dunkelgrau nach weiß geändert (was ich mit dem Titel der Seite gleich losgelassen habe) Also habe ich die Farbe des Titels geändert, die Hintergrund zu Weiß und jetzt können Sie die dunkle Beschriftung sehen. Es ist das Beste, was ich tun könnte, weil ich die Schriftfarbe nicht ändern kann.

Es befindet sich in einem iframe -Element auf einer anderen Domäne; Sie können nicht ändern.

Sie können zwischen hellen und dunklen Motiven wählen.

@Mohammad Samim Samir inspirierte diese alternative Lösung ... er sagte .fb-like-box, es funktionierte nicht für @isherwood nur wegen der angehängten "-box", ".fb-like" für sich gefolgt von "{background: # f5f5f5;}" hätte es funktioniert.

Wie sieht es aus, nachdem der obige Stil auf stylesheet.css angewendet wurde

Es ist möglich, einfach eine CSS-Klasse mit dem Namen .fb-like-box {background: # f5f5f5; }