Facebook Like Box einbinden und anpassen

veröffentlicht am 14. August 2010

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.

Kommentare

Hallo, ich habe die Anleitung befolgt, leider mag er das CSS nicht nehmen. Kann ich das resten wegen dem Zähler?

Kommentar #1 von Tesu am 23. August 2010


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 🙂

Kommentar #2 von Patrick am 23. August 2010


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?

Kommentar #3 von Tesu am 23. August 2010


ok einfach nen anderes CSS verwenden und auf 2 setzen, dann geht´s.

Kommentar #4 von Tesu am 23. August 2010


@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 😀

Kommentar #5 von Patrick am 23. August 2010


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)

Kommentar #6 von David Denker am 16. September 2010


@David Denker: Ist eine gute Idee, so spart man sich das manuelle anpassen.

Kommentar #7 von Patrick am 16. September 2010


@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. !?!

Kommentar #8 von David Denker am 16. September 2010


Ööö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?

Kommentar #9 von Patrick am 16. September 2010


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 ..

Kommentar #10 von David Denker am 16. September 2010


Versuch mal, die ID doch selber zu ändern. Vielleicht macht da irgendwas Probleme. 62px Höhe kommt mir aber auch so etwas wenig vor…

Kommentar #11 von Patrick am 16. September 2010


Hab das gleiche Problem wie David. Es wird nur ein großer Facebookbutton geladen, die eingestellten Parameter verändern nichts. 🙁

Kommentar #12 von Benjamin am 27. September 2010


Das gleiche bei mir, es kommt nur ein großer Facebook-Button. Habt ihr eine Lösung dazu?

Kommentar #13 von Enrico am 30. September 2010


Ich werd mir das gleich nochmal anschauen, bei mir hat das alles wunderbar geklappt.

Kommentar #14 von Patrick am 30. September 2010


Also ich habe es gerade noch einmal nachvollzogen, es läuft wunderbar.

Kommentar #15 von Patrick am 30. September 2010


Ist es irgendwie möglich, die Begrenzung auf nur 100 Connections zu umgehen?

Kommentar #16 von Zip am 30. September 2010


Uff keine Ahnung, vermutlich nicht. Aber von der Einschränkung habe ich bisher auch nichts gewusst 🙂

Kommentar #17 von Patrick am 30. September 2010


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…

Kommentar #18 von Yannik am 25. Oktober 2010


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?

Kommentar #19 von Chaosmacherin am 10. November 2010


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.

Kommentar #20 von Patrick am 10. November 2010


Danke dir 🙂

Kommentar #21 von Chaosmacherin am 11. November 2010


Irgendwie funktioniert das bei mir nicht. :/ Hab auch wie immer schön im Skript hochgezählt, aber es tut sich irgendwie nichts.

Kommentar #22 von Chaosmacherin am 11. November 2010


@Chaosmacherin: Hab grad nochmal richtig getestet. Die Farbe des „Headers“ kannst du mit

.fan_box .full_widget .connect_top {
   background-color: #Farbe;
}

ändern.

Kommentar #23 von Patrick am 11. November 2010


Super, nun ist es perfekt. 🙂 Danke!

Kommentar #24 von Chaosmacherin am 11. November 2010


Danke mit dieser Anleitung hier hat es endlich geklappt !!! Klasse!!!

Kommentar #25 von Alex am 14. November 2010


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

Kommentar #26 von Sylvi am 11. Januar 2011


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

Kommentar #27 von Wilhelm Meister am 20. Januar 2011


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

Kommentar #28 von Fabio am 20. Januar 2011


@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 😛

Kommentar #29 von Patrick am 26. Januar 2011


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 😉

Kommentar #30 von Wilhelm Meister am 26. Januar 2011


Moin,

ist ja fein, dass das funktioniert. Aber Fanbox ist nicht gleich Likebox! Sicher, dass die ein eigenes CSS akzeptiert?

Kommentar #31 von Dremel am 24. Februar 2011


@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).

Kommentar #32 von Patrick am 24. Februar 2011


Nein. Ich rede von der LIKEBOX. Nicht von der FANBOX. Die LIKEBOX akzeptiert zu diesem Zeitpunkt kein eigenes CSS.

Kommentar #33 von Dremel am 24. Februar 2011


@Dremel: Ist das hier nun eine Fan-Box oder eine Like-Box? 😀 Das ist nämlich die Umsetzung dieses Artikels ^^

Kommentar #34 von Patrick am 24. Februar 2011


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.

Kommentar #35 von Dremel am 24. Februar 2011


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?

Kommentar #36 von Patrick am 24. Februar 2011


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.

Kommentar #37 von Dremel am 24. Februar 2011


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!

Kommentar #38 von Andreas am 28. Februar 2011


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.

Kommentar #39 von Dremel am 28. Februar 2011


Habe das Höhen-Problem jetzt so gelöst:

.fan_box .page_stream_short { height: 1000px;}
Und im Script: height=“1000″

Kommentar #40 von Andreas am 01. März 2011


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?

Kommentar #41 von patrick am 15. März 2011


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!

Kommentar #42 von stefan am 16. März 2011


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!

Kommentar #43 von Fabio am 16. März 2011


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

Kommentar #44 von Fabio am 16. März 2011


Hallo Fabio,

vielen Dank für den Hinweis. Funktioniert nun wieder einwandfrei!!!

Grüße

Kommentar #45 von stefan am 16. März 2011


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?

Kommentar #46 von Dremel am 16. März 2011


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?

Kommentar #47 von Thomas am 18. März 2011


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

Kommentar #48 von iPfriem am 27. April 2011


Hallo, danke für die Anleitung, aber irgendwie klappt es nicht. Müsste doch alles stimmen, oder?

Kommentar #49 von vertretungsplan am 10. Mai 2011


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.

Kommentar #50 von Marcus am 12. Juni 2011


hallo…

ich finde die box von facebook an sich ok! wie bekomme ich aber die schriftfarbe gelb?

kannst mir helfen?

grüße und danke

Kommentar #51 von sebastian am 13. Juli 2011


Sorry, ich benutze kein Facebook mehr. Oben im Artikel habe ich doch FireBug erwähnt, im Internet gibt es zig Tutorials zu FireBug.

Kommentar #52 von Patrick am 13. Juli 2011


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??

Kommentar #53 von Alex am 08. August 2011


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.

Kommentar #54 von Patrick am 08. August 2011


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?

Kommentar #55 von Lackschuh am 09. August 2011


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.

Kommentar #56 von Prypjat Syndrome am 25. August 2011


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.

Kommentar #57 von Rollingmitsu - Team am 02. Oktober 2011


Hallo.

Ich würde die like box gern auf meiner Homepage einbinden. Ich habe den generierten Text auch in den Quelltext eingefügt. Nur tut sich nichts, außer das die Vorschau langsamer lädt. Was muss ich tun?

Ich habe die Homepage komplett mit Adobe GoLive CS erstellt.

Vielen Dank für eure Hilfe.

Marcel

Kommentar #58 von Marcel am 19. Februar 2012


Versuche mal, dir den entsprechenden Quellcode hier erzeugen zu lassen: http://developers.facebook.com/docs/reference/plugins/like-box/

Kommentar #59 von Patrick am 20. Februar 2012


hi patrick,

ich versuche meiner like box das sprachtargeting beizubringen… hast du eine idee?

user nicht eingeloggt: stream englisch
user eingeloggt: stream in profilsprache

viele grüsse, kate

Kommentar #60 von Kate am 18. Juli 2012


Wir bekommen es überhaupt nicht hin, wir wollen zu der Seite eine Like Box (http://www.facebook.com/joe.jones.5245961) bauen,
doch diese geht anscheinend nur mit Unterseiten, sprich wenn wir also eine weitere Seite erstellen.
Wie können wir den diese Like Box basteln um direkt zu unserer Seite zu gelangen, die Personenseite, keine andere, die wir erst erstellen müssten?
Der Pfad der Like Box wenn man das genau betrachtet beginnt oder beinhaltet immer irgendwas mit „…/pages/…“

kann mir einer den Code per Mail zusenden, oder bauen?

Brauche ihn aber als HTML

Danke

Kommentar #61 von TCCT am 29. Oktober 2012


Hallo Patrick,

ist es auch möglich die Facebook Like Box in Emails einzubinden? Wenn ja, wie?

Grüße
Max

Kommentar #62 von Max am 09. August 2013


Hallo,
gibt es eigentlich einen Trick um die Größe der Gesichter innerhalb der Facebook Like Box zu ändern? Standard Höhe und Breite ist ja 50px, würde diese beiden Werte gerne auf je 46px ändern. Habe schon einiges in CSS versucht aber irgendwie klappts nicht.

Kommentar #63 von avals am 11. September 2014


Hinterlasse einen Kommentar