Bis heute dachte ich, man kann die Facebook Fanbox nicht stylen, da ich sie bisher immer nur in der Standardausführung gesehen habe.

Erste Schritte ohne CSS

Falls ihr noch keine Fanbox angelegt habt, dann könnt ihr das hier machen. Bei mir geht es derzeit nicht, weswegen ich einfach den Code von der Facebookwiki Seite genommen habe. Erste Anpassungen können wir zunächst ohne CSS vornehmen:

<script type=”text/javascript” src=”http://static.ak.connect.facebook.com/connect.php/en_US”></script> <script type=”text/javascript”>FB.init(“API_KEY“);</script> <fb:fan profile_id=”YOUR_PAGE_ID” stream=”0″ connections=”10″ logobar=”1″ width=”300″ css=”" ></fb:fan> <div style=”font-size:8px; padding-left:10px”><a href=”http://www.facebook.com/PAGE_NAME”>PAGE_NAME</a> on Facebook</div>

stream: Auf 1 (anzeigen) oder 0 (verstecken)
connections: 0 (verstecken) oder einen Wert zwischen 1-100 für die Anzahl der angezeigten Fans (Standard ist 10)
width: Mindestens 200px (Standard ist 300px)
height: beliebig
css: URL zu der CSS Datei
logobar: 1 (anzeigen) für Facebook Logo anzeigen oder 0 (verstecken)

Man kann die Fanbox auch als iFrame einbinden, darauf gehe ich aber nicht ein. Dafür einfach auf die Wikiseite schauen – ist im Grunde das Gleiche.

Jetzt aber mit CSS

Gleich vorab, ich bin kein CSS-Ninja, aber hier ist der CSS Code mit Kommentaren, den ich für meine derzeitige Fanbox benutzt habe (siehe oben):

@charset "UTF-8";
/* CSS Document */

/*Style for the headerarea*/

.fan_box
.full_widget
.connect_top {
	border-style:none;
	background-color: #F8F8F8;
}

/*Style for the hole widget*/

.fan_box
.full_widget {
	border-style:none;

}

/*Link in Header*/

.connect_top a {
	color: #000000;
}

.connect_top a:hover {
	color: #000000;
}

/*Style for Fans*/

.fan_box
.connections {
	background-color: #F6F2EC;
	border-style:none;
}

/*Linkcolor in Streams*/

.page_stream a {
color: #000;
}

/*Style for the Stream*/

.fan_box
.page_stream {
background-color: #F8F8F8;
color: #555555;
border-style:none;
border-top:0px;
border-coloar: #F6F2EC;
height:325px;
}

Ich bin für Anregungen und Verbesserungen immer offen.

Left and right of the standard version with the customized version of CSS

Until today I thought, you can not style the Fanbox Facebook, as I have previously seen only in the standard version.

First steps without CSS

If you still do not have Fanbox created, which then can you here do. For me, it does not currently, so I just the code from the Facebookwiki have taken side. First, we can first make adjustments without CSS:

<Script type = “text / javascript” src = “http://static.ak.connect.facebook.com/connect.php/en_US”> </ script> <script type=”text/javascript”> FB.init (“API_KEY”);</ Script> <fb:fan profile_id=” YOUR_PAGE_ID “stream=”0″ connections=”10″ logobar=”1″ width=”300″ css=”"> </ fb: fan> <div style =” font -size: 8px; padding-left: 10px “> <a href=”http://www.facebook.com/PAGE_NAME”> page_name </ a> on Facebook </ div>

stream: 1 (show up) or (0 hidden)

0 connections (hide:) or a value between 1-100 for the number of fans displayed (default is 10)

width: At least 200px (default is 300px)

height: any

css: URL to the CSS file

logobar: (See 1) for logo or Facebook Profile (0 hidden)

You can embed the Fanbox as iFrame, but afterwards I’m not one. Simply on theWiki look – is basically the same.

But now with CSS

Just beforehand I’m not a CSS ninja, but here is the CSS code with comments, which I used for my current Fanbox (see above):

@charset "UTF-8";
/* CSS Document */

/*Style for the headerarea*/

.fan_box
.full_widget
.connect_top {
	border-style:none;
	background-color: #F8F8F8;
}

/*Style for the hole widget*/

.fan_box
.full_widget {
	border-style:none;

}

/*Link in Header*/

.connect_top a {
	color: #000000;
}

.connect_top a:hover {
	color: #000000;
}

/*Style for Fans*/

.fan_box
.connections {
	background-color: #F6F2EC;
	border-style:none;
}

/*Linkcolor in Streams*/

.page_stream a {
color: #000;
}

/*Style for the Stream*/

.fan_box
.page_stream {
background-color: #F8F8F8;
color: #555555;
border-style:none;
border-top:0px;
border-coloar: #F6F2EC;
height:325px;
}

I am always open to suggestions and improvements.

Related posts

1. Facebook & Twitter automatisch aktualisieren
2. Short Update:Bachelor, Berlin, Job und Facebook