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
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
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.
Danke! Wusste vor deinem Beitrag gar nicht, dass die Likebox angepasst werden kann.
Sieht auf jedenfall schöner aus, wie die klassische Box.
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
@David
Welche Konfiguration hast Du denn laufen: Betriebssystem und Browser jeweils mit Versionsnummern?
BG Chris
Win7 und neuster Firefox, bei meiner anderen Page gehts problemlos
@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
Der Code funktioniert bei mir leider nicht. Ist das bei allen so?
Grüße
@David
Was genau funktioniert denn nicht?
BG Chris
Hi ich möchte auch die LikeBox miteinbinden, aber die Schriftgröße der Status ist immer so klein… wie kann ich diese vergrößern ?
@JoVolk
Schrift vergrößern, css-Datei Zeile 9… schon versucht?
BG Chris
Sag mal, kann man irgendwie die Anzahl der Fans/Likes unterdrücken?
@Hody
Warum sind denn die Likes ein Problem?
Hahaha… Luxusprobleme…
Erstmal… Schön, dass Du malwieder vorbeischaust. Ich versuch die Frage mal ernst zu nehmen
bg Chris
@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
….
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
@rrrk
Das hört sich doch schon besser an. Poste doch mal einen link, dann können das alle besser nachvollziehen.
bg Chris
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!
@Stony
Welches Element der Facebook-Like-Box meinst Du genau?
bg Chris
Den Status selber…
Also den Text welchen ich in Facebook eingebe…
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
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.
@Sebastian
…hast Du auch die o.g. Hochzählung im Textwidget vorgenommen, nachdem Du etwas im Code verändert hast? Mach das einfach nochmal.
bg Chris
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
@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
Vielen Dank für die Zusammenstellung!
Ist es richtig, dass die Höhe des angezeigten Livestreams nicht verändert werden kann?
Hallo Tim,
bitte definiere Life-Stream. Meinst Du die Likebox?
bg Chris:-)
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
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
Wie kann ich denn die Schriftfarbe im stream=true (in der Anzeige der aktuellen Pinnwand) ändern.
Bitte helft mir.
Hallo Alex,
bitte beschreibe einmal ganz genau, welche Schriftfarbe du meinst.
bg Chris
Hola,
nach viel Frust
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
@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
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.
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
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
Hallo Sebastian,
da gibt es einen tag “color” im code. Hast Du das ‘mal probiert?
bg Chris
Selbst Hey
hier ist der Link. So funktioniert es die Schriftfarbe bei der Facebook Fanbox einzustellen
http://www.myblogtrainer.de/facebook-fanbox-schriftfarbe-einstellen/
bg Chris
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?
okay, jetzt wird sie angezeigt ohne was verändert zu haben. scheint an facebook gelegen zu haben.
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
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…
Hallo Hody,
ich habe bisher keinen Weg gefunden.
bg Chris
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
Hallo Stephan,
immer wieder gerne. Schön, dass es jetzt funktioniert.
bg Chris
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
Hallo Stephan,
funktioniert doch alles ganz toll. Ich sehe 5 Bilder und nach meinem Klick darauf sind es sechs
bg Chris
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
ich glaube das ist zeitversetzt, weil der Facebook-Server einfach ein wenig langsam ist.
bg Chris
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
bei dem Widget-Button in der Sidebar wird kein Titel übernommen.
bg Chris
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
Hallo Chris,
noch ein Beispiel: http://www.fackelmann.de links unten
wenn ich auf gefällt mir klicke bekomme ich in meiner Facebookseite unter Neuigkeiten sofort einen Artikel fon Fackelmann gepostet.
Gruß Stephan
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
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
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
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
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
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
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
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
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
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?
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
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?
Irgendwie fehlt der Button Fanseite bei mir im Profil. Kann das sein?
Grußs Stephan
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
Hallo, klasse Anleitung!
Die Ladezeiten eines Blogs steigen aber enorm mit dem Facebook – Widget. Jedes Profilbild muss geladen werden. tools.pingdom.com
Gruß, Reiner
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
Danke Chris für die Tipps!
Gerd