Tag: Facebook Fanbox

Facebook Fanbox Schriftfarbe einstellen

von Chris Andersen am Mrz.12, 2012, unter Online Marketing

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

.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:

<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.