Facebook Fanbox Schriftfarbe einstellen

Will man bei der Facebook Fanbox die Schriftfarbe einstellen, reicht es nicht die einfache Facebook-Version zu verwenden. Stattdessen wird der Code in zwei Dateien aufgeteilt. Einen für das Widget und einen für eine neue CSS-Datei. Die Verknüpfung dieser beiden Fanbox-Dateien ermöglicht dann weitere Möglichkeiten, auch über die Schriftfarbe hinaus.

Facebook Fanbox Code für die CSS-Datei

1
2
3
4
5
6
7
8
9
10
11
12
13
.fan_box a:hover { text-decoration: none; }
.fan_box .full_widget { height: 200px; border: 0 !important; background: none !important; position: relative; }
.fan_box .connect_top { background: none !important; padding: 0 !important; }
.fan_box .profileimage, .fan_box .name_block { display: none; }
.fan_box .connect_action{ padding: 0 !important; }
.fan_box .connections{ padding: 0 !important; border: 0 !important; font: normal 12px Arial, Helvetica, sans-serif; color: #666; }
.fan_box .connections .connections_grid { padding-top: 10px !important; }
.fan_box .connections_grid .grid_item{ padding: 0 5px 10px !important; }
.fan_box .connections_grid .grid_item .name{ font: normal 11px Arial, Helvetica, sans-serif; color: #666 !important; padding-top: 1px !important; }
span.total{ color: #666666; font-weight: bold; }
.fan_box .connect_widget{ position: absolute; bottom: 0; right: 0; margin: 0 !important; }
.fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; }
.fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; }

Diese Datei speichern wir unter dem Namen fb1.css und legen sie via FTP im WordPress-Verzeichnis
…/wp-content/themes/mytheme/
ab.

Facebook Fanbox Code für das Widget

Nun müssen wir diese Datei nur noch mit dem Facebook-Code für das Text-Widget verknüpfen. Dazu enthält der folgende Code den Link für unsere neue CSS-Datei. Der Code für das Widget sieht dann so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="fb2"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '174414849241191', 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>
<fb:fan profile_id="174414849241191" connections="8" stream="0" width="215" height="200" logobar="0" css="http://www.myblogtrainer.de/wp-content/themes/pixeled_de_1.91/fb2.css?4">
</fb:fan>

Im Code sind auszutauschen:
– 1. Zeile: fb2 (Dateinamen der CSS-Datei
– 4. Zeile: appID
– 14. Zeile: profileID
– 15. Zeile: Pfad zur CSS-Datei

Facebook Fanbox Dateien verknüpfen

Hier gibt es nun einen kleinen Trick. Man muss bei jeder Veränderung des Codes die Zahl hinter der CSS-Datei-Adresse hochzählen. Momentan steht sie auf 4. Die nächsten Versionen wären also 5, 6 usw.

Facebook Fanbox Schriftfarbe einstellen

Die folgenden zwei Beispiele zeigen die Veränderung der Schriftfarbe. Die Veränderungen sind in folgenden Zeilen der CSS-Datei vorgenommen worden:
– Zeile 6: Weiße Kontaktnamen
– Zeile 9: Orange Überschrift






Zum Dank für diese Erklärung zur Veränderung der Schriftfarbe der Facebook Fanbox ist umbedingt der Like-Button zu klicken. ;-)

Was hast Du an Deiner Facebook Fanbox verändert? Schreibe einen Kommentar…

Ein Gedanke zu „Facebook Fanbox Schriftfarbe einstellen

  1. Silver

    Ich habe schon ein paar mal versucht die Fanbox in unseren Blog einzubauen. Irgendwie wollte sie jedoch nicht so richtig ins Design passen. Mit den Tips hier werde ich es noch mal versuchen. Jetzt kann ich ja etwas experimentieren :)

    Danke für die hilfreichen Tipps.

    Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>