Facebook LikeBox anpassen – Anleitung

Die Facebook LikeBox anpassen, passend zum eigenen Design, stellt sich nicht auf Anhieb als leicht heraus. Mit dieser Anleitung kann es jeder auch ohne Programmierkenntnisse. Facebook selbst stellt eigentlich nur Codeschnipsel zur Verfügung, die auf weißen Hintergrund abzielen. Mit dieser Anleitung kann man eine Facebook LikeBox, auch Fanbox genannt, in allen Farben bzw. mit jeder Hintergrundfarbe realisieren.

Diese Anleitung stellt in den drei Schritten:
1. Text-Widget-Erstellung
2. CSS-Datei-Erstellung
3. Anpassung
alles zur Verfügung, was ein Anfänger braucht, um die Facebook LikeBox einzufügen und anzupassen. Dabei sollte man sich nicht, durch Code und Unbekanntes abhalten lassen. Selbst absolute Anfänger mit geringen Computer-Kenntnissen haben mit dieser Anleitung ihre Fanbox grafisch schön in ihre Website einbinden können.

Facebook LikeBox anpassen – Anleitung: Schritt 1 Text-Widget-Erstellung

Voraussetzung für eine LikeBox ist eine Facebook Fanpage. Das ist eine Seite, die man direkt in seinem Facebook Profil erstellen kann. Hat man diese Seite erstellt, kommt man zur Integration, der Fans dieser Seite in seine Website. Das geschieht mit einer Fanbox (=Likebox), die einen Facebook Like Button (=Gefällt mir Button) enthält und die Möglichkeit bietet sich direkt über eine Website einer Facebook Fanpage anzuschließen. Das kann so aussehen:

Facebook LikeBox

Facebook LikeBox


Zur Integration bzw. Implementierung der Facebook Fanbox erstellt man zuerst unter Design/Widget ein Text-Widget bzw. zieht ein Text-Widget in die Sidebar seiner Wahl.
Text-Widget

Text-Widget


In dieses Textwidget wird der folgende Code kopiert. Danach wird das Textwidget gespeichert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="fblikebox"></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/de_DE/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
<fb:fan profile_id="174414849241191" connections="10" stream="0" width="300" height="200" logobar="0" css="http://www.myblogtrainer.de/wp-content/themes/twenty-twelve/fblikebox.css?3">
</fb:fan>

Dabei wird müssen meine persönlichen Einstellungen, nach einem ersten Test, durch die eigenen ersetzt werden:
– appID
– profile_id
– URL zur CSS-Datei
Alle anderen Einstellungen können vorerst so bleiben. Wir kommen später auf die Anpassungen von Höhe, Breite, Verbindungen usw. zurück.

 

Facebook LikeBox anpassen – Anleitung: Schritt 2 CSS-Datei Erstellung

Dazu benötigen wir ein FTP-Programm (wie Filezilla) und einen Texteditor (wie Textwrangler). MIt dem FTP-Programm stellen wir die Verbindung zum Webserver unserer Website und mit dem Texteditor speichern wir den folgenden Code in eine Datei namens fblikebox.css:

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; }

Nachdem wir die Datei fblikebox.css erstellt haben, laden wir sie mit dem FTP-Programm in das aktuelle WordPress-Theme-Verzeichnis auf unserem Webserver. Das heißt normalerweise so:
mydomainname.de/wp-content/themes/pixeled_de_1.91
Danach finden wir die CSS-Datei unter Design/Editor und können sie dort wie im Folgenden beschrieben, anpassen.

 

Facebook LikeBox anpassen – Anleitung: Schritt 3 Grafische Anpassung

Die wichtigsten Anpassungsfunktionen sind:
– Breite
– Höhe
– Anzahl der dargestellten Kontakte
– Position des Facebook-Buttons
Breite und Höhe der Fanbox werden im Widget eingestellt. Momentan steht die Breite auf 300 und die Höhe auf 200 Pixel. Diese Zahlen muss man einfach nur der gewünschten Größe entsprechend im Textwidget verändern. Auch die Anzahl der dargestellten Kontakte wird dort unter Connections verändert.

Die Position des Facebook-Buttons kann man nach vertikaler Höhe in der CSS-Datei verändern. Momentan ist der Button 200 Pixel vom oberen Rand der Box entfernt. Auch diese Größe kann in der folgenden Zeile in der CSS-Datei beliebig angepasst werden.

1
.fan_box .full_widget { height: 200px;

 

Danach muss man noch eine kleine Besonderheit beachten. Wenn man die CSS-Datei verändert, muss man jedesmal eine kleine Veränderung am Textwidget vornehmen, damit man die Datei auch wirklich aktualisiert und sie nicht aus dem Cache geladen wird. Man muss die Zahl hinter dem Fragezeichen hochzählen, also nach der ersten Änderung auf 4, nach der zweiten auf 5 usw.

1
/fblikebox.css?3">

Das Anpassen der Facebook LikeBox ist damit abgeschlossen. Natürlich können noch weitere Veränderungen vorgenommen werden. Dazu ändert man einfach alle anderen Variablen, die man in der CSS-Datei sieht und probiert aus, was einem gefällt.

Ich werde in nächster Zeit in diesem Artikel noch weitere Änderungsmöglichkeiten und Formatierungen vorstellen. Dazu bitte ich Euch den RSS-Button zu klicken, Euch die Seite mit Facebook oder Twitter zu merken oder ein Bookmark zu setzen. Dann werdet Ihr automatisch über die Änderungerungen informiert bzw. könnt die Seite immer wieder finden.

Allen, die Ihre Facebook LikeBox noch feiner designen wollen, bzw. jeden einzelnen Punkt der CSS-Datei verstehen wollen, empfehle ich diesen Link…

Ich freue mich, wenn Ihr mir Eure Ergebnis-Links in einem Kommentar postet, und falls Ihr noch weitere Optimierungsmöglichkeiten für die LikeBox oder den Code kennt, freue ich mich auch über Kommentare…

 

66 Gedanken zu „Facebook LikeBox anpassen – Anleitung

  1. Alex

    Danke! Wusste vor deinem Beitrag gar nicht, dass die Likebox angepasst werden kann. :-) Sieht auf jedenfall schöner aus, wie die klassische Box.

    Antworten
  2. David

    Ich bekomme die Box einfach GAR nicht angezeigt, wenn ichs mit dem normalen iframe code mache, klappts.
    Komischerweise läuft dein Code auf einer anderen Seite perfekt…
    Gruüße

    Antworten
    1. Chris Andersen

      @David
      Es ist schwer es ohne Beispiele zu reproduzieren. Schreib doch mal die beiden Links auf bzw. schick sie mir an meine E-mail-Adresse, wenn das besser passt.
      BG Chris :-)

  3. JoVolk

    Hi ich möchte auch die LikeBox miteinbinden, aber die Schriftgröße der Status ist immer so klein… wie kann ich diese vergrößern ?

    Antworten
    1. Chris Andersen

      @Hody
      Hahaha… Luxusprobleme…
      Erstmal… Schön, dass Du malwieder vorbeischaust. Ich versuch die Frage mal ernst zu nehmen ;-) Warum sind denn die Likes ein Problem?
      bg Chris

  4. rrrk

    @chris

    Ich darf das so einbinden.(und wer liest tos) Das ist der Standard Fanbox embed code. Das wird im iframe angezeigt … bzw nur der stream.
    ————————-

    FB.init(“”);

    ——————————————–

    Das alles funktioniert super soweit und ich hab mit Firebug die ganzen klassen rausgefummelt und das ganze angepasst, wie ich es brauche … ich muss vermutlich nicht dazu sagen, dass ich mit dem stylesheet einiges an cacheleveln produziert habe :D ….

    Das was ich meine ist, dass der Stream in einem iframe angezeigt wird. Der Inhalt des Streams passt sich an den frame an, in jedem Browser außer Firefox, da läuft die Schrift nach rechts unter den Scrollbalken, was unten einen horizontalen produziert. Was hässlich ist. Meine Hoffnung gestern abend war, dass evtl jemand spontan auf 3 die klasse weiß, die die Breite im Frame beeinflusst. Ich hatte gestern auch die Schnauze voll.
    Ich werde das am Woe nochmal in Angriff nehmen. Vermutlich muss ich die breite des Streams begrenzen, bzw diesem einfach einen Wert mitgeben.

    gruß rrrk

    Antworten
  5. Stony

    Hallo Chris!

    Dein Beschrieb hat mich also echt weitergebracht!
    DANKE an dieser Stelle!
    Nur noch eine Frage:
    Ich kriege die Schriftgrösse des Status einfach nicht grösser…
    Weisst du evtl. was ich falsch mache?
    Danke!

    Antworten
    1. Chris Andersen

      Wenn Du auf meine live Like-Box oben rechts schaust, gibt es zwei Stellen, wo man myblogtrainer verändern kann. Meinst Du das im Header oder über den Bildern?
      bg Chris :-)

  6. Sebastian

    Hi Chris, danke für das Tutorial aber leider hat Facebook mittlerweile ein paar Änderungen vorgenommen, anders kann ich mir nicht erklären, dass es bei mir nicht möglich ist die Anzahl der anzuzeigenden Fans zu ändern.

    Antworten
  7. Alex XY

    Streamhöhe ist nicht anpassbar und er funktioniert nur mit dem wert =”true”

    So hat der Stream aber einen Scroll-balken und eine vordefinierte Größe von ca. 350px

    Weiss wer was ich machen kann da ich en Stream auf 1000 pixel höhe einbauen will auf der HP

    Antworten
    1. Chris Andersen

      @Alex
      hast Du schon einmal versucht die LikeBox-Ausmaße an allen möglichen Stellen im Code zu verändern, an denen width und height angegeben sind?
      bg Chris :-)

  8. Tim

    Vielen Dank für die Zusammenstellung!
    Ist es richtig, dass die Höhe des angezeigten Livestreams nicht verändert werden kann?

    Antworten
    1. Tim

      Hallo Chris, ja ich meine die Like-Box und konkret eigentlich den Teil der Like-Box, in dem die Posts/ Einträge der Seite zu sehen sind. Beste Grüße, Tim

    2. Chris Andersen

      Hallo Tim,
      also… nur, um uns hier einmal kommunikativ zu sychronisieren.
      Ich habe in meiner Like-Box hier einen oberen Bereich mit meinem Thumbnail-Bild, dem Namen meiner Facebook-Seite und dem Facebook Like-Button.

      Darunter kommt ein Bereich mit meinen Fans bzw. Kontakten, unter denen die Namen stehen.

      Ich gehe davon aus, dass Du den unteren Bereich meinst. Die Höhe des unteren Bereiches kannst Du im Code im Text-Widget (Zeile 14) und in der CSS-Datei (Zeile 2) verändern. Dann solltest Du noch die Connections in Zeile 14 erhöhen.

      Ich hoffe das hilft.
      beste Grüße
      Chris :-)

  9. Alex

    Wie kann ich denn die Schriftfarbe im stream=true (in der Anzeige der aktuellen Pinnwand) ändern.

    Bitte helft mir.

    Antworten
    1. rrrk

      Hola,

      nach viel Frust :D

      Style für den text im stream

      .uiStream .uiStreamMessage {
      color: #fff;
      font-size: 11px;
      font-weight: normal;
      }

      .uiStream .uiAttachmentDesc, .uiStream .uiStreamPassive, .uiStream .uiStreamRobotextBeforeMessage, .uiStream .uiAdminAttribution {
      color: #fff;
      }

      style für die links

      .fan_box a {
      color:#00FF3A;
      }

      .fan_box a:hover{
      text-decoration: none;
      }

      style für die höhe … achtung connectionhöhe + streamhöhe = höhe im embed im html

      .fan_box .page_stream_short{
      height:650px !important;
      margin-bottom:30px;
      }

      und …

      firefox und firebug um die classes zu bekommen und dann überschreiben und testen ;)

      MEIN PROBLEM :)

      Warum ist der Inhalt des iframe im Firefox größer als
      in IE und Chrome???
      FF hat einen horizontalen scollbar….

      Jedmand einen Tip oder eine Lösung?

      gruß

      rrrk

    2. Chris Andersen

      @rrk
      Wenn Du die Facebook Likebox anpassen willst, können anscheinend die Browser Probleme machen. Das ist nichts neues, denn jeder Browser will gerne neue Standards schaffen, um die User zu binden.

      Am besten ist es, Du nutzt die Standard-Codes zum Einbetten von Facebook-Elementen. Diese Standard-Codes funktionieren meistens mit allen Browsern. Wenn Du zaubern möchtest ;-) musst Du hier auch Zauberer sein und den Code beherrschen, denn sonst wird es meist teuer.

      Wenn die Standard-Codes von Facebook nicht funktionieren, empfehle ich bei Facebook direkt zu fragen, denn daran sind die am meisten interessiert.

      Außerdem… bist Du Dir sicher, dass Du Facebook laut deren TOS im iframe einbinden darfst. Das mögen viele der Social Communities nicht und wehren sich scriptmäßig dagegen.

      bg Chris :-)

  10. ralf

    Bei meiner Like box werden meist immer nur 3 personen angezeigt, obwohl 7 auf den gefällt mir button geklickt haben. an einem anderen tag werden 7 angezeigt, dafür aber 2 in doppelter ausführung, obwohl ich die connections auf 6 gesetzt hatte.

    Antworten
    1. Chris

      Hallo Ralf,
      das ist halt so am Anfang. Ab einer größeren Anzahl von Fans erledigt sich das von selbst. Facebook hat da noch Potenzial ;-)
      bg Chris

  11. Sebastian

    Kleine Änderungen, wie Rahmenfarbe oder Boxhöhe kann ich ja direkt im Code vollziehen, z.B. durch Hinzufügen von height=”xxx”. Weißt Du, ob es da auch ein Kürzel für die Schriftfarbe gibt?

    Beispiel:

    Gruß und Dank,

    Sebastian

    Antworten
  12. christian

    Also ich habe jetzt mehrfach alles nach Anleitung umgesetzt, aber bei mir will die fbfanbox einfach nicht angezeigt werden.
    Theoretisch müsste doch auch wenn ich nichts am Queltext veränder die von dir kommen, oder? Kommt nämlich auch nicht.
    Ich habe WordPress Version 3.1.2. Gibts mit der Version vielleicht Probleme?

    Antworten
    1. christian

      okay, jetzt wird sie angezeigt ohne was verändert zu haben. scheint an facebook gelegen zu haben.

    2. Chris

      Hallo Christian,

      ja Facebook zuckt manchmal ein wenig. Ist aber meistens nach einem Tag wieder ok. Die Fanbox erleidet oft ähnlich Auswirkungen und funktioniert deshalb manchmal nicht richtig.
      bg Chris :-)

  13. Hody

    Kann man die Twitter Box auch so anpassen wie die FB Like Box. Ich habe sie einfügt, sie müsste aber noch weiter nach links und farblich angepasst werden…

    Antworten
  14. Stephan

    Hallo Chris,

    nochmal Danke für deine Hilfe.
    Hatte nicht nur Probleme mit dem einbinden von Facebook, irgendwie funktioniert mein Firefox bzw. Vista nicht richtig. Werd das System mal neu aufsetzen.

    Gruß Stephan

    Antworten
  15. Stephan

    Hallo Chris,

    vielleicht kannst du mir ja nochmal helfen.

    Bii meiner Seite in Facebook sehe ich links “3 Personen gefällt das” . Wie schaffe ich es das ich dieentsprechenden Fotos dazu sehe.

    Vielen Dank im Voraus
    Stephan

    Antworten
    1. Chris

      Hallo Stephan,
      funktioniert doch alles ganz toll. Ich sehe 5 Bilder und nach meinem Klick darauf sind es sechs ;-)
      bg Chris :-)

  16. Stephan

    Hallo Chris,

    ich habs hinbekommen.
    Kann es sein, das es irgenwie zeitgesteuert ist ob Beitrage aus der Pinnwand in Neuigkeiten übernommen werden?

    Ich hatte einen Beitrag 17 Stunden alt — wurdeübernommen

    Gruß Stephan

    Antworten
  17. Stephan

    Hallo Chris,

    ich meine die Facebook Like Box mit Button mit den Kontaktbildern als Widget in der Sidebar.

    Durch was oder welchen Parameter wird etwas in die Neuigkeiten übernommen.

    Gruß Stephan
    Hier mal ein Dankeschön für deine Hilfe

    Antworten
  18. Stephan

    Hallo Chris,

    hab mich gerade bei unter “gefällt mir” eingetragen und sofort erscheint bei mir unter Facebook der Artikel “Wie kann ich meine Blog-Nische finden?” von Myblogtrainer.

    Genauso würde ich das auch gerne haben. Kriegs aber nicht hin. Muss man da ev. Einstellungen auf der Seite machen?

    Gruß Stephan

    Antworten
    1. Chris

      Hallo Stephan,
      da muss man zwei Dinge unterscheiden.
      – Facebook Like Button im Artikel
      – Facebook Like Box mit Button mit den Kontaktbildern als Widget in der Sidebar

      Klickst Du den Like Button wird der Artikel-Titel auf Deiner Facebook-Site veröffentlicht, wohingegen ein Klick auf den Button im Widget in der Sidebar die Fan-Seite bei Facebook erwähnt, man also Fan der extra angelegten Fan-Seite wird.

      Probier es einfach mal hier aus und Du wirst sehen wie die Aufteilung ist.
      hth Chris :-)

  19. Stephan

    Hallo Chris,

    Danke für den Link.
    Ich bekomme es schon hin dass eine Fanbox oder ein e Like-Box angezeigt wird und das diese auch funktioniert.

    Meine Problem ist folgendes:
    Wenn ich auf “Gefällt mir” klicke soll auch etwas in meiner Facebookseite unter Neuigkeiten eingetragen werden. Das habe ich schon bei anderen Seiten gesehen, ausprobiert und es war auch ein Text auf meiner Facebookseite gestanden.

    Beispiel: WebmarketingBlog.at

    Leider bekomm ich das nich hin.

    Gruß Stephan

    Antworten
  20. Stephan

    Hallo Chris und Walert,

    mein Betriebssystem ist Vista. Das mit der fblikebox hab ich hinbekommen nur hab ich jetzt das folgende Probelm. Wenn ich z.B. auf gefäält mir klicke wir auf meiner Pinnwand kein Eintrag vorgenommen. Ich möchte dann auf meiner Seite stehen habe dass mir die Seite gefäält. Beim Like-Button ist das anscheinend kein Problem.

    Gruß Stephan

    Antworten
    1. Chris

      Hallo Stephan,
      überprüf doch einmal, ob Deine ID im Code und auf Deiner Facebook-Seite übereinstimmt. Irgendwie kommt es ja nicht zum Kontakt.
      Außerdem schick ruhig einen Link mit, wo man das betrachten kann, dann ist die Fernanalyse leichter.

      Auch Dir empfehle ich diesen Link:
      http://www.myblogtrainer.de/facebook-fan-box-design/
      …da sieht man den Code besser auf einen Blick.
      bg Chris :-)

  21. Walter

    Hallo chris.
    Danke für den guten Ratschlag hier. Connects korrigiert, möchte aber trotzdem den Abstand vom Titel bis Beginn (dzt etwa 50 px) um die Hälfte verringern :)
    Vielleicht gibts ne Möglichkeit. LG para1

    Antworten
    1. Chris

      Hallo Walter,

      Schau Dir einmal genau diese Seite an:
      http://www.myblogtrainer.de/facebook-fan-box-design/

      …und bearbeite im 2. Code in den Zeilen 32-43 entsprechend die Pixelgrößen.
      Wenn es nicht klappt definier bitte genau welchen Abstand Du meinst. (z.B. Unterkante k von Facebook bis Oberkante P von Personen.) Das ist vielleicht ein wenig unkonventionell, aber ggf. effektiv.
      bg Chris :-)

  22. Walter

    Hallo Stefan.
    Super Widget, gratuliere.
    Habe leider ein Problem, der obere Abstand ist zu groß von der Leiste zum ursprünglichen Inhalt.
    Kann man evtl. einstellen, wieviel Userbilder angezeigt werden ?
    Bitte was habe ich falsch gemacht ??
    Danke

    Antworten
    1. Chris

      Hallo Walter,
      der obere Abstand sieht gut aus…
      Die Anzahl der angezeigten Kontakte in der Facebook Fanbox kannst Du über Connections im ersten Code einstellen.
      bg Chris :-)

  23. Stephan

    Oh Mann,

    hab jetz rausbekommen das man erst bei Facebook angemeldet sein muss um die Likebox zu sehen. Das ist aber nicht gut. Gibts da nicht eine andere Möglichkeit?

    Gruß Stephan

    Antworten
    1. Chris

      Hallo Stephan,
      das wäre mir neu. Veränderst Du auch immer die fortlaufende Zahl bei Veränderung des Codes, wie oben in der letzten Grafik beschrieben?

  24. Stephan

    Irgenwie funktioniert das mit der Facebook Likebox im Firefox 3.6.13 nicht. Hier auf der Seite rechts wird die Likebox auch nicht angezeigt, nur ein weißes Feld. Im Opera funktioniert es wunderbar.

    Gruß Stephan

    Antworten
    1. Chris

      Hallo Stephan,
      Du hast mich grad mal kurz nervös gemacht ;-)
      Daraufhin hab ich Deine Firefox-Version installiert. Alles funktioniert wunderbar.
      Welches Betriebssystem hast Du denn laufen?

    1. Chris

      Hallo Stephan,
      Du brauchst auf jeden Fall sowohl eine Facebook Fanbox als auch eine Twitter Fanbox. Wenn nicht bei Dir, wo sollte es denn sonst passen? Wahrscheinlich kannst Du sogar noch weitergehen und noch weitere Communities für die Top Etablissements Deiner Stadt gründen. Feedback-Möglichkeiten bzw. Interaktivität fehlt aber auf jeden Fall auf Deiner Website. ;-)
      bg Chris :-)

  25. Reiner

    Hallo, klasse Anleitung!
    Die Ladezeiten eines Blogs steigen aber enorm mit dem Facebook – Widget. Jedes Profilbild muss geladen werden. tools.pingdom.com

    Gruß, Reiner

    Antworten
    1. Chris

      das ist nicht nur Facebook ;-)…
      ich träume immer noch von einer Statistik, die mir genau sagt, mit welcher genauen Bandbreite und zu welchem Prozentsatz User zugreifen.
      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>