Facebook Fan Box Design

Das Facebook Fan Box Design wird mit ein paar Tricks einfach. Prinzipiell ist das Design sicherlich von Facebook so geschaffen worden, weil es die erfolgreichste Fan Box (=LikeBox) ist. Trotzdem kann es je nach Design der Website natürlich unterschiedliche Farbgebungen und Anordnungen geben, die website-spezifisch noch besser funktionieren. Alle Einzelheiten der Anpassung des Designs werden in der folgenden Schritt für Schritt – Anleitung klarer.

Facebook Fan Box Code – Basis-Darstellung (ohne CSS-Datei)

Den ersten Code für die Fan Box können wir, nach der Erstellung einer Facebook Fan Page von Facebook bekommen. Hier ist dieser Code in optimierter Form. Man kann ihn einfach in ein Text-Widget in der Sidebar kopieren und die eigene fan profile_id einsetzen.

1
<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="174414849241191" stream="0" connections="10" logobar="0" width="300" height="250"></fb:fan>
    Einstellungsmöglichkeiten für den Code:

  • Anzahl der Kontakt-Fotos: connections=”xx”
  • Facebook Logo: logobar=”x” (1 für Logo/0 für kein Logo)
  • Facebook Fan Box Breite in Pixeln: width=”xxx”
  • Facebook Fan Box Höhe in Pixeln: height=”xxx”

Das sieht dann Live so aus:



 

Facebook Fan Box Code – CSS: Verlinkung und Gestaltung

Um die Facebook Fan Box zu gestalten, muss man
1. eine CSS-Datei im Code verlinken
und
2. die CSS-Datei gestalten.

1. Verlinkung:
In den bisherigen Code fügt man einfach einen Link, der auf die CSS-Datei verweist hinzu. Der neue Code für die Facebook Fan Box sieht jetzt so aus:

1
<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="174414849241191" stream="0" connections="8" logobar="0" width="300" height="250" css="http://www.myblogtrainer.de/wp-content/themes/pixeled_de_1.91/fbfanbox.css?2"></fb:fan>

2. Gestaltung der CSS-Datei:
Wie man an dem neuen Link im Code (bitte an die eigene Dateistruktur anpassen) schon sehen kann, brauchen wir dann im Theme-Verzeichnis die Datei fbfanbox.css. Wir erstellen diese Datei mit einem einfachen Editor und kopieren den folgenden Code in die Datei:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.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-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #666;
}
span.total{
  color: #FF6600;
  font-weight: bold;
}
.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: "lucida grande",tahoma,verdana,arial,sans-serif;
  font-weight: normal;
  color: #666 !important;
  padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
right: 10px;
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;
}

Danach wird die Datei via FTP in das Theme-Verzeichnis von WordPress kopiert.
Man kann die CSS-Datei natürlich auch woanders hinlegen, insbesondere, wenn man nicht mit WordPress arbeitet.

Wichtiger Hinweis:
Der vorher eingefügte Link im obigen Code hat am Ende einen Zusatz: ‘?1′. Dieser Zusatz bezeichnet den Cache-Level der Facebook Fan Box. Bei jeder Änderung der CSS-Datei muss man die 1 mit der Anzahl der Änderungen ersetzen. Also bei der ersten Änderung 2, dann 3, usw. damit nicht die alte Datei aus dem Cache geladen wird und die Veränderungen nicht dargestellt werden. Diese Funktion braucht man insbesondere, wenn man mit den folgenden Einstellungsmöglichkeiten das Design der Box verändert.

    Einstellungsmöglichkeiten zum Design mit der letzten CSS-Datei:

  • Zeile 1-3: Underline Hover Effect wurde für alle Links innerhalb der Fan Box entfernt, um Konflikte zu vermeiden.
  • Zeile 4-9: Rahmen um das Fan Box Widget sind entfernt worden und die Höhe auf die Widget-Höhe gesetzt. Der Hintergrund ist entfernt worden und die Vorbereitung für die Entfernung des Like-Button sind getroffen. Man muss “important” nutzen, um den CSS-Code im Widget zu überschreiben.
  • Zeile 10-13: Hier haben wir den hellblauen Hintergrund für den Header der Fan Box und alle Seitenabstände entfernt.
  • Zeile 14-16: Vollständige Entfernung des Profilnamen und -bildes.
  • Zeile 17-19: Entfernung der Seitenabstände in Zusammenhang mit dem Like-Button.
  • Zeile 20-27: Einstellung der Abstände zwischen den Fan Box Kontakten. Der obere Rand wurde entfernt und Einstellung des Fonts für den Text: x Personen gefällt myblogtrainer.de.
  • Zeile 28-31: Einstellung der Fontgröße und -farbe der Anzahl dargestellter Fans.
  • Zeile 32-34: Abstand zwischen Textzeile und aktuellen Fan-Kontakten.
  • Zeile 35-37: Abstand zwischen die aktuellen Fan-Kontakten.
  • Zeile 38-43: Einstellung des aktuellen Fan-Namens. NICHT die Schriftart wechseln, da sonst die Ausrichtung zu den Fan-Kontakten verschoben wird.
  • Zeile 44-49: Der Like-Button, wird nach unten rechts positioniert, weil wir dem Haupt-Widget eine relative Positionierung zugewiesen haben. Immer wenn eine relative Positionierung zugewiesen wird, kann man diese dazu nutzen, Elemente innerhalb des Hauptelements mit den Attributen Top, Bottom, Left, je nachdem, wo man das Element haben möchte, zu positionieren. Wir haben Bottom auf die Position 0 und Right auf die Position 10 Pixel gestellt. 10 Pixel, weil wir auch beim rechten Abstand der Fan-Kontake 10 Pixel gewählt hatten und damit das Fan-Bild richtig ausgerichtet wird.
  • Zeile 50-55: Entfernung von Abstand und Rand des Like-Buttons von seinen ihn umgebenden Tabellen-Daten, damit er richtig ausgerichtet wird.

Die Kombination aus dem Widget-Code und der CSS-Datei sieht Live nun so aus (Der Hintergrund ist transparent.):



Fehlersuche:
Sollten Neueinstellungen bei der Änderung der CSS-Datei nicht dargestellt werden, sollte man, wie oben erwähnt, den Cache-Level des CSS-Links im Widget-Code anpassen.

Das Facebook Fan Box Design wird von Facebook immer einmal wieder verändert. Wir werden diese Datei bei Veränderungen von Facebook aktualisieren. Also RSS oder anderen Bookmark setzen. Wie sieht Dein Facebook Fan Box Design aus und was hast Du anders gemacht? Poste Deinen Link im Kommentar.

21 Gedanken zu „Facebook Fan Box Design

  1. Prypjat Syndrome

    Hi. Weiß jemand Rat, warum ich in meiner Likebox auf meiner Website nur dann Leute angezeigt bekomme, wenn ich eingeloggt bin in Facebook?

    Danke für eure Hilfe. :)

    Antworten
    1. Chris Andersen

      @Prypjat
      ich sehe in Deinem Quelltext ein Facebook-Skript. Irgendwas ist da schiefgelaufen, denn normal ist das nicht. Integriere das die Facebook-LikeBox einfach nochmal nach der hier aufgeführten Anleitung. Dann müsste es funktionieren.
      bg Chris :-)

  2. Hody

    Hallo,
    wie bekomme ich den Hintergrund in eine eine andere Farbe, Du schreibst nur:

    Zeile 10-13: Hier haben wir den hellblauen Hintergrund für den Header der Fan Box und alle Seitenabstände entfernt.

    Okay und wie heisst die Syntax für die Farbe? #Nummer funktioniert nicht, dark oder light funktioniert auch nicht?

    Antworten
    1. Chris

      Hallo Hody,
      hab schon alles abgesucht. Bin mittlerweile soweit, dass ich Dir empfehle ‘mal eine kleine Tabelle per Text-Widget in die Sidebar einzubinden, einen Tabellenhintergrund zu definieren und dann die Facebook-Likebox draufzustellen.
      bg Chris :-)

    2. Hody

      Bin soweit nun mit der Umsetzung zufrieden habe die Farben fuer mein Greyzed Theme angepasst – sieht aktuell aber auch o.k. auf dem Urlaubs-Theme an – wie findest Du die Idee mit einem Urlaubstheme?

    3. Chris

      Gute Idee :-)
      Muss ich mir auch einmal überlegen ;-)
      …Übrigens… ich hoffe es bringt Dir etwas, wenn ich auf den Napster-Button klicke ;-)
      bg Chris :-)

  3. Adrian

    kann man die funktion gefällt mir nicht mehr einstellen, und wie erhalte ich eine verlinkung der eigenen Seite in ” dir gefällt xxxxx
    xxxx sollte dabei verlinken auf facebook…

    Adrian

    Antworten
    1. Chris

      Hallo Adrian,
      wo hast Du das denn bisher genau eingestellt?
      …und… welche Seite willst Du genau verlinken?
      bg Chris :-)

    2. Adrian

      HI Chris
      ich habe genau so alles eingestellt wie du es oben beschrieben hast, habe nur die Position des Buttons verändert. mir ist soweit alles klar wie ich es einstelle, jedoch nicht, wie ich den firmenname auf meine landingpage auf facebook ziehen kann.
      Ich habe mal einen test aufgesetzt :URL:
      http://www.bueropiraten.com/likebox/

    3. Chris

      Hi Adrian,
      sieht sehr gut aus.
      Bzgl. deiner letzten Frage… was meinst Du genau damit? Bitte definiere Firmenname. Verstehe ich Dich richtig? Willst Du Dein Facebook-Profil moobilux umbenennen?
      bg Chris :-)

    4. Adrian

      Nein, das währe ja kein problem. Ich möchte das der Name moobilux in der Likebox auf das Facebookprofil verlinkt, den ansonsten gefällt mir das Design (abgesehen von den farben, doch die änder ich noch)

    5. Chris

      Hi Adrian,
      ich hab Dich nicht vergessen… heute ist viel zu tun… WordPress-Kurse usw.
      Irgendwo haben wir den Link gelöscht, denn er war ja in der Grundversion vorhanden. Die Stelle müssen wir finden.

      Ansonsten… willst Du den Link wirklich? Ist es nicht klüger, wenn Du die User nicht zu Facebook wegschickst, sondern sie nur den Facebook-Like-Button klicken und auf Deiner Homepage bleiben?
      bg Chris :-)

  4. Dominik

    Ich habe das mit dem Button jetzt eigentlich so wie es mir gefällt. Man sieht ihn jetzt auch komplett. Habe die Höhe angepasst.

    Vielen dank nochmal.

    Und ich bin auch nicht böse wenn Ihr Fan werdet ;-)

    Antworten
    1. Chris

      Sieht gut aus.:-)
      schön, dass es mit der Anleitung geklappt hat.

      …ich frag mich halt prinzipiell, warum Facebook den Button oben hat. Wahrscheinlich sind es repräsentative Erfahrungswerte. Der Button ist da oben schon am auffälligsten und er SOLL ja geklickt werden.

      Mit einem design-theoristischen Ansatz im Hinterkopf müsste der Button entweder oben in der Mitte oder unten rechts sein, vielleicht sogar unten rechts halb über den Rand herausragend.
      bg Chris :-)

    1. Chris

      Tja… das mit dem “nur” ist halt bei der Facebook Fan Box etwas kompliziert.
      – Was hast Du denn jetzt genau wo im Code verändert?
      – …und was hast Du schon ausprobiert, um den Button in die Mitte zu bekommen?

      Ansonsten… Deine Box ist anscheinend nicht hoch genug, da der Facebook Like Button nicht vollständig dargestellt wird.

  5. Dominik

    Hallo, ich habe die FB Fan Box bei mir auch angepasst. Jedoch möchte ich den Button gerne versetzten.

    Er soll ein klein wenig mehr in die Mitte. Wie kann ich das anstellen.

    Ich bin jetzt kein absoluter Noob in CSS, aber hier weiß ich nicht weiter!

    Antworten
    1. Chris

      Hallo Dominik,
      Zur Verschiebung des Facebook Fan Box Button musst Du Dir Zeile 44-55 anschauen. Mit der Beschreibung dieser Zeilen im obigen Artikel sollte es eigentlich funktionieren. Falls nicht, schreib bitte, was Du genau versucht hast.
      Die Positionierung des Facebook Like Button kann durch die Attribute Top, Button, Left und Right vorgenommen werden. Darüber hinaus kannst Du natürlich mit der Anzahl der Kontakten und der absoluten Breite der Fan Box spielen.
      …und zeig uns Deine Facebook Fan Box, wenn sie fertig ist.
      bg Chris :-)

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>