Facebook Like Box einbinden und anpassen
Mit den Relaunch meines Blogs unter neuer Domain habe ich mich entschieden, nun auch einen Facebook-Account anzulegen. Logischerweise wollte ich auch so eine tolle Facebook Like Box auf meiner Seite haben. Wer mit dem Standard-Aussehen zufrieden ist, kann einfach den Facebook Like Box-Generator benutzen und den generierten Code einbinden. Ich wollte jedoch, dass sich die Facebook Like Box perfekt in mein Design integriert, sodass die Einbindung ein wenig aufwändiger wurde.
Profil-ID herausfinden
Zunächst musst du die ID deines Facebook-Accounts herausfinden. Dazu öffnest du einfach deine Facebook-Seite und schaust dir die URL an. In meinem Fall lautet die URL so:
http://www.facebook.com/pages/Techspread/144164052271461
Die Nummer am Ende ist hierbei meine Profil-ID. Eventuell versteckt sich die ID auch an etwas anderer Stelle in der URL, je nachdem von welchem Typ dein Profil ist und welche Seite du geöffnet hast.
Facebook Like Box einbinden
Um die Facebook Like Box einzubinden, musst du zunächst an der Stelle, wo die Like Box erscheinen soll, ein Element mit der ID fblikebox platzieren. In meinem Fall steckt die Facebook Like Box beispielsweise in einem Listenelement:
<li id="fblikebox"></li>
Danach musst du folgenden Codeschnipsel an das Ende deiner Seite also direkt vor </body> setzen:
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
document.getElementById('fblikebox').innerHTML = '<fb:fan profile_id="<profile_id>" height="<height>" width="<width>" connections="<connections>" stream="<stream>" header="<header>" css="<css_url>?<css_ver>"></fb:fan>';
FB.init({xfbml : true});
/* ]]> */
</script>
Dieser Block bindet zunächst das Facebook JavaScript SDK ein. Danach wird dem Element mit der ID fblikebox sein Inhalt zugewiesen. Diese Methode hat den Vorteil, dass XHTML-Validatoren den Quellcode als valide ansehen, da das fb:fan-Tag nicht standardkonform ist. Bei dem Codeschnipsel müsst ihr noch die folgenden Parameter anpassen:
| Parameter | Beschreibung |
| <profile_id> | Dies ist die ID deines Profils, die du bereits herausgefunden hast |
| <height> | Höhe in Pixeln |
| <width> | Breite in Pixeln |
| <connections> | Dieser Wert gibt an, wieviele Personen angezeigt werden sollen |
| <stream> | Wenn deine Kurznachrichten angezeigt werden sollen true ansonsten false |
| <header> | Wenn der Standard-Facebook-Titel anzeigt werden soll true ansonsten false |
| <css_url> | Hier musst du die absolute URL zu dem Stylesheet angeben, mit dem die Facebook Like Box designed werden soll |
| <css_ver> | Jedesmal, wenn du etwas an dem Stylesheet änderst, musst du diesen Wert erhöhen. Facebook nutzt nämlich einen Caching-Mechanismus, der sonst verhindert, dass Änderungen übernommen werden |
Facebook Like Box anpassen
Jetzt ist deine Facebook Like Box bereits funktionstüchtig. Nun musst du nurnoch eine CSS-Datei zum designen der Facebook Like Box erstellen. Um die benötigten Elemente herauszufinden, empfehle ich Firebug. In meinem Fall war nicht viel zu machen, ich wollte lediglich den Hintergrund transparent machen und den blauen Rahmen entfernen. Das CSS-Markup dafür sieht so aus:
.fan_box .full_widget {
background: transparent;
border: none;
}
Weiterführendes
Wer mehr mit dem Facebook JavaScript SDK machen möchte, sollte sich die Dokumentation zum Facebook JavaScript SDK anschauen.
Empfehlen
58 Kommentare
[...] Facebook Like Box einbinden und anpassen Schnell und einfach erklärt, sicher für Einige von [...]
Hallo, ich habe die Anleitung befolgt, leider mag er das CSS nicht nehmen. Kann ich das resten wegen dem Zähler?
Hey Tesu,
du musst jedesmal, wenn du was an der CSS-Datei änderst, den Zähler um einen erhöhen, sonst werden deine Änderungen nicht übernommen. Außerdem musst du darauf achten, dass dein Stylesheet als absolute URL angegeben wird.
Ich hoffe, das hilft dir
das Problem an der Sache ist, dass ist nicht genau weiss wie oft schon was geändert wurde
kann man da nicht einfach wieder bei 1 anfangen?
ok einfach nen anderes CSS verwenden und auf 2 setzen, dann geht´s.
@Tesu: Du musst ja nicht die Anzahl der Änderungen angeben, sondern einfach nur eine ID, die noch nie verwendet wurde. Dementsprechend immer höchzählen und nicht bei 0 anfangem. Kannst meinetwegen auch in 5er-Schritten hochzählen, das ist dem Facebook-Cache Banane
Das mit der Version lässt sich am einfachsten lösen (sofern JS Code mit PHP ausgibt)indem man als Version einfach das Modifizierungsdatum der CSS angibt (http://www.php.net/manual/de/function.filemtime.php)
@David Denker: Ist eine gute Idee, so spart man sich das manuelle anpassen.
@Patrick
Ich habe alles mögliche versucht mit deinem Code bekomme ich im iFrame nur einen großen Facebook Button mit Weiterleitung zur Facebook seite. !?!
Öööhm… Wie groß ist dein Element, in das du die Like Box einbetten willst? Was ist, wenn du die CSS-Formatierung erstmal außen vor lässt?
292×62 mit der größe habe ich schon gespielt, css auch schon ausgesetzt komisch, es scheint als ob er das alles ganrnicht lädt ..
Versuch mal, die ID doch selber zu ändern. Vielleicht macht da irgendwas Probleme. 62px Höhe kommt mir aber auch so etwas wenig vor…
Hab das gleiche Problem wie David. Es wird nur ein großer Facebookbutton geladen, die eingestellten Parameter verändern nichts.
Das gleiche bei mir, es kommt nur ein großer Facebook-Button. Habt ihr eine Lösung dazu?
Ich werd mir das gleich nochmal anschauen, bei mir hat das alles wunderbar geklappt.
Also ich habe es gerade noch einmal nachvollzogen, es läuft wunderbar: http://files.techspread.de/fblikebox/
Da ich keinen Facebook-Account mehr habe, hab ich mal Jeffrey’s ID missbraucht
Ist es irgendwie möglich, die Begrenzung auf nur 100 Connections zu umgehen?
Uff keine Ahnung, vermutlich nicht. Aber von der Einschränkung habe ich bisher auch nichts gewusst
Maximale Anzahl an Connections ist bei mir ebenfalls auf 100 begrenzt. Jemand eine Ahnung obs da eine Möglichkeit gibt zu tricksen? Würde gerne ca 500 Fans anzeigen…
Danke für den Tipp
Hat alles ganz gut geklappt, nur mit Firebug komme ich nicht so zurecht. Ich würde gerne Den oberen Teil der Like-Box, der so ein wenig bläulich ist einfärben, weiß aber nicht genau wie. Kannst du mir da vielleicht helfen?
Das ist das Element div.connect_top, was du anpassen musst
Im Stylesheet also entsprechend sowas wie:
div.connect_top { background: #ff0000; }Damit würdest du das zum Beispiel mit einem krassen Rot einfärben.
Danke dir
Irgendwie funktioniert das bei mir nicht. :/ Hab auch wie immer schön im Skript hochgezählt, aber es tut sich irgendwie nichts.
@Chaosmacherin: Hab grad nochmal richtig getestet. Die Farbe des “Headers” kannst du mit
.fan_box .full_widget .connect_top { background-color: #Farbe; }ändern.
Super, nun ist es perfekt.
Danke!
Danke mit dieser Anleitung hier hat es endlich geklappt !!! Klasse!!!
Hej Patrick,
ich wollte Dir auch endlich mal mitteilen, dass dank Deiner Anleitung die Fanbox auf meiner Seite endich valide ist.
Klasse, freue ich mich total darüber.
Lieben Gruß
Sylvi
Hey Patrick,
wollte eigentlich nur den like button anzeigen lassen ohne jeglichen schnickschnack. (Überschrift, Bilder, Name)
Sollte aber als Page laufen da ich “likes” sammeln möchte und ab einer repräsentativen Zahl diese sichtbar machen.
Muss ich den Umweg über css auch machen?
Grüße
Wilhelm
Hallo Patrick
Nach laaanger Suche habe ich deinen Beitrag gefunden und ihn schon mehrfach verwendet um Facebook einzubinden, mit Erfolg!!
Deine Anleitung könnte einfacher nicht sein! Echt Hammer.
Vielen Dank….
Greetz
Fabio
@Wilhelm: Sorry für die späte Antwort. Hmm meist du einfach nur den nur den Like-Button für Artikel? Da gibt es Plugins oder bestimmt auch Code-Schnipsel, da musst du aber selber mal schauen, den habe ich nie verwendet und ein Facebook-Konto habe ich auch nicht mehr
Kein Ding, danke für die Antwort.
Hab das jetzt so gelöst: http://www.wilhelmmeister.de
Nur diesen blöden Strich unterm Daumen bekomme ich nicht weg.
Wird nur in Chrome und Safari angezeigt. Verstehe die Welt nicht mehr
Moin,
ist ja fein, dass das funktioniert. Aber Fanbox ist nicht gleich Likebox! Sicher, dass die ein eigenes CSS akzeptiert?
@Dremel: Ich habe mich an die offiziellen Bezeichnungen von Facebook gehalten, schau mal auf diese Seite: http://developers.facebook.com/docs/reference/plugins/like-box/
Was du meinst, ist wohl der Like-Button (nicht Like-Box).
Nein. Ich rede von der LIKEBOX. Nicht von der FANBOX. Die LIKEBOX akzeptiert zu diesem Zeitpunkt kein eigenes CSS: http://forum.developers.facebook.net/viewtopic.php?pid=313909
@Dremel: Ist das hier nun eine Fan-Box oder eine Like-Box?
Das ist nämlich die Umsetzung dieses Artikels ^^
Wenn dieses supertolle Kommentarsystem nicht die Tags gelöscht hatte.. Egal.
Das ist ne Fanbox. Im Tag steht: fb:fan .
Wenn ich das richtig verstanden habe, entwickelt Facebook die Like-Box, also fb:like-box weiter. Wenn Du Dir mal die Parameter, auf die Du in vorhin verwiesen hast, anschaust, wirst Du sehen, dass es das Parameter css, und profile_id nicht mehr gibt. Ich habe mal ein bisschen rumprobiert. profile_id geht zwar immer noch mit der fb:like-box, aber man soll stattdessen href=linkzumprofil nehmen.
Dass die Like-Box kein CSS annimmt, weiß ich, deshalb habe ich oben ja fb:fan verwendet. Aber worin besteht der Unterschied zwischen der Fan-Box und der Like-Box?
Ich bin von ner Google-Suche auf die Seite hier gekommen. Mich hat es irritiert, dass du die Fan-Box als Like-Box bezeichnest.
Soweit ich weiß, soll die Like-Box die Fan-Box ersetzen, oder findest Du dafür noch einen Generator auf den Facebook Seiten?
Ich habe mich damit vorher nicht beschäftigt. Und auch mit facebook nicht wirklich.
Wer nicht auf facebook angemeldet ist, oder gerade keinen Cookie hat, der beweist, dass man mal irgendwann bei facebook angemeldet war, sieht als erste Zeile unter dem optionalem Header einen dicken fetten register-Button und dazugeörigen Text. Bei Seiten, bei denen es auf die Höhe etwas ankommt ist dieser einfach nur störend.
Ein vorher nicht dagewesener Footer mit dem Hinweis auf “Soziales Plug-in von Facebook” wird dann auch immer angezeigt.
Und du hast nur noch zwei Farbschemata. Hell und Dunkel. Also nix mehr mit Anpassen, da der ganze Kram in nem iframe nachgeladen wird.
Wahrscheinlich gibt es noch mehr signifikante Unterschiede.
Hi, danke für das gute Tutorial!
Bei mir wird die Höhe nicht korrekt übernommen, dh. der Stream ist immer recht kurz. Gibt es dafür eine Lösung? Danke schonmal!
Bei der Fan-Box hängt das auch davon ab, wieviele “connections” Du angegeben hast. Und ob Du die Höhe als Parameter im Tag bestimmst oder per CSS. Die Höhe des Streams wird in den Klasse(n) .fan_box und .page_stream_short definiert – Egal, was ich jetzt in Height reinschreibe, es sind bei mir immer 250 px.
Lasse einfach mal das height-Attribut im Tag weg. Ein aktueller Firefox sollte die Höhe automatisch berechnen. Dann kannst Du zumindest sehen, wie hoch die Box eigentlich sein sollte.
Habe das Höhen-Problem jetzt so gelöst:
.fan_box .page_stream_short { height: 1000px;}
Und im Script: height=”1000″
wunderbares tutorial!
hilft sogar nem recht ahnungslosen wie mir weiter
hätt nur ne frage:
was muss ich in die css schreiben damit ich in der gesamten like-box text und link-farbe ändern kann?
seit heute funktioniert die box mit der oben beschrieben variante nicht mehr. Hat sich da evtl. was verändert seitens facebook? Evtl. wurde die id “fblikebox” umbenannt? Freue mich über hilfreiche Antworten!
Hallo an Alle
Die oben beschriebene Variante funktioniert seit heute nicht mehr! Bitte um hilfe, bis jetzt hat die Variante immer einwandfrei funktioniert….
Vielen Dank für eure Hilfe!
Hallo nochmals an alle Leute
Habe soeben den Fehler gefunden, Facebook hat aus welchen Gründen auch immer eine Änderung vorgenommen.
Bevor das erste script eingebunden wird, folgendes davor schreiben:
Danach funktioniert es wieder! Vosllständige erklärung hier:
http://www.seo-trainee.de/die-verlorene-facebook-likebox-wiederbekommen/
Beste Grüsse
Hallo Fabio,
vielen Dank für den Hinweis. Funktioniert nun wieder einwandfrei!!!
Grüße
Moin,
hier funktioniert mal gar nichts mehr. Nach der Einbindung des Layers steht dort, wo früher mal die FANBOX war: “Öffentliches Facebook-Profil
Melde dich an, um diesen Inhalt zu sehen” Mehr steht da nicht mehr drinne… WOLLEN DIE MICH VERARSCHEN?
Hallo,
danke für die Anleitung.
Habe das Problem, dass ich den Anzeigebereich des Livestreams in der Höhe nur für Firefox ändern kann:
.fan_box .page_stream {
width: 890px;
background-color: #fff;
}
.fan_box .full_widget .page_stream {
height: 585px;
}
Bei IE und Safari klappts nicht. Habt Ihr ne Lösung parat?
Hier zu sehen:
http://www.fridaweyer.com/blog/index.htm
Hallo Patrick,
vielen lieben Dank für deine kleine, aber sehr feine, Anleitung =) Habe sie bei uns mal angewandt und ich finde das Ergebnis kann sich sehen lassen! Aber schau selbst > http://TopReview.de
Hallo, danke für die Anleitung, aber irgendwie klappt es nicht. Müsste doch alles stimmen, oder?
Jemand eine Ahnung, warum die Box eine Person doppelt anzeigt?
Ich habe bislang nämlich nur 4 Personen denen die Seite gefällt, die Box gibt aber 5 und somit einen doppelt an.
hallo…
ich finde die box von facebook an sich ok! wie bekomme ich aber die schriftfarbe gelb?
kannst mir helfen?
grüße und danke
Sorry, ich benutze kein Facebook mehr. Oben im Artikel habe ich doch FireBug erwähnt, im Internet gibt es zig Tutorials zu FireBug.
Hallo Patrick,
vielen Dank für die Beschreibung. Eine Frage habe ich aber noch, wie ändere ich die Schriftfarbe eines aktuellen Beitrages. Wenn ich stream=”true” habe ist die Schriftfarbe schwarz, ich hätte sie aber gern weiß…
mit
.fan_box .full_widget {
color: #FFFFFF;
}
klappt das aber nicht.
Kannst du mir bitte helfen??
Sorry, habe keine Like-Box zum Testen, da ich FB nicht mehr nutze. Wie ich oben beschrieben habe, hilft einem FireBug bei diesen Anpassungen ungemein.
Hallo
Genau nach Anleitung vorgegangen. Leider ohne Erfolg. Der Web-Developer zweigt mir ca. 50 css-Fehler an…
Wer hat noch einen Tipp für mich?
Hi, weiß jemand, warum bei mir keine Profilbilder angezeigt werden in meiner Likebox? Bei mir werden erst dann alle Profilbilder angezeigt, wenn ich eingeloggt bin… Sehr komisch.
Danke schonmal.
Hallo,
ich würde gerne eine Like Box auf unserer Seite, als Code einfügen.
Auf Facebook haben wir einen Benutzer angelegt! (Person) keine (Seite)
http://www.facebook.com/profile.php?id=100002561965995
Ist es möglich eine Like Box mit diesem Profil zu erstellen? Bei uns steht immer:
Could not retrieve id for the specified page. Please verify correct href was passed in.
Wenn ich bei Facebook Page URL die ID eingebe.