Facebook “like Box” Einbindung und CSS Anpassung

Facebook bietet neben dem „Gefällt mir“ Button auch das sogenannte „Like Box“ Plugin an. Voraussetzung für das Facebook Like Box Plugin ist eine vorhande Facebook Marken bzw. Fan Seite. Durch die Einbindung des Facebook „Like Box“ Plugins auf die Startseite, haben Besucher Ihrer Webseite, welche noch kein Fan Ihrer Facebook Marken-Seite sind, die Möglichkeit Ihre Facebook Seite zu “liken”. Vorteil dabei ist, dass Besucher die neuesten Nachrichten Ihrer Facebook Marken Seite lesen können ohne eingeloggt zu sein. Zudem erhöhen sich die Chancen neue Mitglieder für die eigene Marken bzw. Fan Seite zu bekommen. Auch die Anzahl der Mitglieder Ihrer Facebook Marken Seite ist klar ersichtlich.

Die Like Box ist in drei folgenden Bereichen aufgeteilt:

- (Header) Kopf Bereich des Plugins
- (Stream) Nachrichten der Markenseite
- (Faces) Bilder der Mitglieder mit den entsprechenden Verlinkungen

Je nach Konfiguration der Like Box können bestimmte Bereiche (Header, Stream oder Faces) angezeigt werden.

Wie und wo wird die Facebook „Like Box“ generiert und eingebunden?

Wie bereits am Anfang erwähnt ist eine Facebook Marken bzw. Fan Seite Voraussetzung zur Erstellung einer Facebook Like Box. Die Marken (Fan) Seite kann unter dem folgenden Link angelegt werden:

Facebook Marken bzw Fan Seite registrieren

Um einen Like Box zu generieren wird der folgende Link sowie die URL der eigenen Marken Seite benötigt:

- Facebook Developers: Like Box
- URL der eigenen Marken Seite, beispielsweise: http://www.facebook.com/pages/Online-Marketing-Solutions-AG/105960406233

Die Generierung der Like Box ist genauso einfach wie die Generierung der Like Buttons. Einfach die URL der eigenen Marken Seite unter „Facebook Page URL“ eintragen, die entsprechenden Bereiche wie z.B. „show Faces“, „show stream“ oder „show header“ auswählen und anschließend auf „Get Code“ klicken.

Im Grunde genommen war´s das auch schon. Einfach einen der unteren Codes kopieren und an die gewünschte Stelle im Quellcode der Webseite einfügen und fertig. Um die Deutsche Version zu erhalten müsste in dem Script en_US in de_DE abgeändert werden.

Facebook Like box & CSS Anpassung

Um die Like Box mit der gewünschten CSS anpassen zu können, muss der eigentliche Code der generiert wurde etwas umgeändert werden. Genauer gesagt muss gleich am Anfang des Codes „fb:like-box“ in „fb:fan“ abgeändert werden. Anschließend ist die Einbindung der eigenen CSS Datei möglich. Hierzu wird nun unter CSS=““ der komplette CSS Pfad übergeben. Wichtig und zu beachten ist am Ende des CSS Pfades die Variable „?1“! Nach jeder CSS Änderung muss diese Variable hochgeschraubt werden z.B. „?2“ oder nach 12 CSS Änderungen in „?13“ usw. Sollte die CSS Datei verändert werden jedoch nicht die Variable, dann wird die Änderung nicht angezeigt bis die Variable um eins hochgeschraubt wurde.

Die Profile-ID kann aus der URL der Marken Seite entnommen werden

http://www.facebook.com/pages/Online-Marketing-Solutions-AG/105960406233

Um die gewünschten Stellen per CSS ändern zu können, empfiehlt sich hier der Einsatz von Firebug. Mit diesem Firefox Add-On kann schnell ermittelt werden, welche CLASS oder ID Namen bei welchen stellen verwendet werden. Als Beispiel hab ich hier mal eine kleine CSS Änderung vorgenommen womit ich den Rahmen der Like Box entfernt, dem Profilbild einen feinen Rahmen verpasst und die Hintergrundfarbe verändert habe. Auch die Faces habe ich hier ausgeblendet.


.fan_box .full_widget {background: none; border:none; border-bottom:1px solid #7F7F7F;}
.fan_box .full_widget .connect_top {background-color:#FFFFFF;}
.fan_box .profileimage {border:1px solid #CFCFCF; padding:5px; margin: 0 10px 4px 0; background-color:#FFFFFF;}
.fan_box .connect_action .name {font-size:12px;}
.connections {display:none;}


Facebook-Plugin Datenschutzerklärung

Wichtig und zu empfehlen ist die Einbindung der dazugehörige Datenschutzerklärung, da der Webseitenbetreiber sonst eine Abmahnung riskiert! Weitere Infos dazu und Vorlagen für die Datenschutzerklärung finden Sie bei Google: Suche nach “Facebook Social Plugins Datenschutzerklärung”

Verfasst von Arwin Barsekhian