Facebook Fan-Box Design anpassen mit CSS

Das Design der Facebok Fan-Box bzw. Like-Box ist sicherlich jedem bekannt. Es orientiert sich an dem Design von Facebook mit weiß und einigen blautönen. Dies hat einen hohen wiedererkennungswert zu folge, oftmals ist dies jedoch sehr unpassend bei vielen Designs. Auf dunklen Seiten ist dies z.B. total unpassend und zerschießt das komplette Design.

Das Design lässt sich eigentlich sehr leicht durch einen zusätzlichen Aufruf von ein paar CSS Klassen regeln, ist von Facebook selber jedoch schlecht bis garnicht dokumentiert.

Wichtig: Um das Design anzupassen muss das alte fb:fan anstatt des neuen fb:like-box benutzt werden, denn dort hat Facebook die Designanpassungen bisher nicht unterstützt. Die etwas ältere Facebook Lib wird geladen und mit der „profile_id“ wird eure Fan-Site mitgegeben – diesem Code muss lediglich der Link zur CSS Datei hinzugefügt werden (css=“fb.css?1″):

Umsetzung

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/de_DE"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="1149798085427047" stream="0" connections="8" logobar="0" width="253" height="220" css="fb.css?1"></fb:fan>

Dies sagt dem Facebook Frame das er die Datei fb.css für die Styleinformationen nutzen soll. Mit der ?1 wird lediglich der Revisionsstand der Datei angezeigt. Solltet ihr also ein Update machen wollen, einfach durch ?2 erneuern und die Datei wird neu geladen, ansonsten werden die CSS informationen gecached.

Nun kommen wir zur .css Datei – mit Firebug für Firefox, Chrome o.ä. könt ihr euch die Klassen im Detail anschauen. Ich habe mal eine Beispieldatei mit einigen ID’s und Klassen angelegt, welche den Rahmen entfernt und den Inhalt etwas cleaner macht, so das nur noch der Like Button, das Profilbild , etwas Text und die Profilbilder der nutzer angezeigt wird.

.fan_box a{
	color:#257580;
}
.fan_box{height:160px !important; }
.fan_box .full_widget{
  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{
  color:#2d8f9e;
  font-size:14px;
}
.fan_box .connect_action{
  padding: 0 0 10px 0 !important;
}
.fan_box .connections{
  padding: 0 !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #666;
}
span.total{
  color: white;
}
.fan_box .connections .connections_grid {
  padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
  padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
  font-family: Helvetica;
  font-weight: normal;
  color: #282828!important;
  padding-top: 1px !important;
}

Andre Teich

arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

Kommentar schreiben