Like Box Design – Es gibt auch mehr als die blaue Standardbox…
Wir kennen Sie alle – die normale LikeBox von Facebook. Die meisten Webseiten integrieren das Social Plugin von Facebook in ihrer Standardversion und ändern nur wenig daran. Auch wir verwenden nur die Box in ihrem normalen Design. Die wenigsten Unternehmen scheinen erkannt zu haben, dass die Like-Box auch im Design an die eigene Homepage angepasst werden kann. Änderung an der Funktionalität der Plugins sind von Facebook aber klar untersagt!
Mit viel Mühe konnten wir einige schöne Beispiele im Web finden:
1. Empire Avenue
Nutzt die Box im Querformat und passt die Schriftfarben an. Der eigentliche Like-Button ist dann wiederum in Blau.
2. T3N
Das Erscheinungsbild wurde in diesem Beispiel nur wenig angepasst, allerdings fügt sich bei T3N der Button schon in das Gesamtbild der Seite ein.
3. Gravis
Die Gravis Homepage ist grün, eine blaue Like-Box würde also nur wenig passen.
4. Oktoberfest.de
Nur ein bisschen anders als die normale Like-Box. Ein kleiner Verlauf im Background und kleine Anpassungen der Schriftfarben.
5. Startcamp Dresden
Schon etwas ausgefallener kommt dass Starcamp Dresden daher. (Screenshot via @Steffenster)
6. Threadless
Auch kaum bearbeitet aber dennoch sehr schön eingebaut die LikeBox auf Threadless
7. Backupify
Backupify: Interssesant nicht wegen Facebook sondern wegen dem passenden Twitter Imitat welches dort zu sehen ist.
8. Chris Spooner
Chris Spooner hat sich mit gutem Webdesign einen Namen gemacht, genauso gut passt auch seine Like-Box ins Bild. Die Box ist komplett Transparent und die Schriften passen ins Bild.
9. Magnifico
Bei Magnifico wurde die Like-Box unter "Aktuelles" integriert. Die Box füllt den kompletten Inhalt aus und ersetzt eine News-Area komplett. Im Detail sind noch ein paar kleine Unschönheiten im Design aber generell passt alles gut ins Erscheinungsbild.
Mir etwas Kreativität lässt sich also einiges machen mit den LikeBoxes. Allerdings müsst ihr dafür schon CSS-Kenntnisse besitzen. Einen einfachen WYSISYG-Editor haben wir hierfür noch nicht gesehen.
Uns interessiert hier auch, habt ihr noch weiter schöne Beispiele gesehen die über eine Standardintegration hinaus gehen?
Über den Autor:
Philipp Roth: Philipp ist Gründer von allfacebook.de und beschäftigt sich seit langem auch beruflich mit Facebook, organisiert Workshops, hält Vorträge und gibt konzeptionellen Input. Er realisiert viele der heute sehr erfolgreichen Auftritte und Applikationen auf Facebook und setzt seinen Fokus auf die Strategie von Unternehmen im Social Web. - Philipproth.com - Über AllFacebook.de
- Erste Tests zeigen neues Design für die Werbung in der Seitenleiste
- Facebook beschleunigt das Web – Über 50% der Social Plugins optimiert
- Facebook Pages: Komplettes Redesign der mobilen Ansicht mit klarem Fokus auf Interaktionen
- Newsfeeder.com zeigt Facebook Best Practice für den Newsfeed
- Neuer Newsfeed: Einblicke vom Facebook Design Team
Mai 26th, 2011 at 10:21
Wo habt ihr das Beispiel von Chris Spooner her? Ich finde das nicht im Netz, vielleicht könnt ihr mal nen Link dazu posten.
Mai 26th, 2011 at 10:48
Würde mir noch ein paar Style-Änderungen mehr wünschen. Von mir aus auch einhergehend mit einer zusätzlichen Abfrage.
Mai 26th, 2011 at 11:13
Man muss vielleicht noch dazu sagen, dass man das neue Social Plugin der Like gar nicht mehr stylen kann. Nur rundherum. Bei der alten Box konnte man noch Farben anpassen.
Falls ich mich irre, dann sagt mit bitte wie man dem iFrame die Styles mitgeben kann.
Mai 26th, 2011 at 11:42
Wir haben für unseren Kunden ebenfalls eine individuelle Lösung umgesetzt: http://img37.imageshack.us/img37/2058/surfintour.jpg
Normalerweise auf http://www.mlp-surfintour.de zu sehen, allerdings befindet sich die Microsite mittlerweile in einem anderen Zustand, in dem die Box auf der Startseite weichen musste.
Mai 26th, 2011 at 11:53
Vielleicht sollte aus Gründen der Vollständigkeit erwähnt werden, dass die “neue” LikeBox von Facebook sich keinerelei Umgestaltung per CSS beugt. Ausschließlich die veraltete FAN-Box (die Facebook nicht mehr will) lässt sich per CSS umgestalten!
Komische FB Strategie, aber leider wahr – hat wohl was mit den Stichworten Omnipräsenz und CorporateDesign zu tun…
Mai 26th, 2011 at 12:01
Ein Beispiel aus der Schweiz: http://www.jfgr.ch/
[…]
Da scheint es den Liberalen noch besser zu gehen.
Mai 26th, 2011 at 14:58
[...] allfacebook.de werden aktuell verschiedene Varianten der Facebook-Likebox vorgestellt. Gefühlt vor einem halben Jahr kam über Twitter mal die Frage nach besonders gestylten Varianten. [...]
Mai 26th, 2011 at 15:19
Ähnlich wie bei Magnifico, die Pinnwand als Logbuch:
http://www.piratenherberge.de/logbuch.aspx
Mai 26th, 2011 at 20:33
wieso werden die beispiele nicht ordentlich verlinkt?
ansonsten interessanter artikel, leider schade das ich aktuell auch keine richtige möglichkeit mehr gefunden habe.. (falls es sie doch gibt würde ich mich über links freuen)
Mai 26th, 2011 at 22:01
Das Stylen der Like-Box ist in Zukunft nicht mehr möglich. Facebook wird den Parameter bald ignorieren. Finde gerade nicht den Link zum offiziellen Blogeintrag.
Mai 27th, 2011 at 08:11
Habe auch eine Box für einen Kunden umgesetzt. Tja, ziemlich doof, wenn das in Zukunft nicht mehr geht. Aber so sind sie, die Allmächtigen bei FB
Link zur Website (Box in der rechten Sidebar unter der Suche)
http://www.automotiveit.eu/
Mai 27th, 2011 at 09:51
@matgoas: lässt sich dagegen was unternehmen? Petitionen, Bug-Reports, etc? oder unternimmt schon jemand was?
Es wäre ja wohl auch ein anliegen von FB, dass die Boxen genutzt werden, der Webdesigner wird sie aber eher nutzen, wenn er sie gestalten kann wie er will.
Mai 27th, 2011 at 10:55
Ach noch was: Habe das auch für einen Kunden umgesetzt.
http://www.yupanquiriehle.de/
Mai 28th, 2011 at 11:31
Http://www.Pauldirekt.de
Mai 29th, 2011 at 13:11
Sehr schöne Beispiele dabei. Nur warum habt ihr keienn Tweet Button??
Mai 29th, 2011 at 14:57
Also ich bin gerade dabei eine Likebox für einen Kunden um zu setzen, habe folgendes gefunden: http://www.techspread.de/4772/facebook-like-box-einbinden-und-anpassen
Funktioniert bei mir auch einwandfrei…
Mai 31st, 2011 at 21:16
Auch sehr schön integriert: http://www.campusfashion.ch/
Juni 8th, 2011 at 11:05
[...] wir darüber berichten? In einem unserer letzten Beiträge zur Like-Box und CSS Gestaltungsmöglichkeiten wurden wir darauf …, dass die neue Like Box kaum noch CSS Veränderungen zulässt. Über diese neue Funktion kann die [...]
Juni 24th, 2011 at 09:59
Wir haben die Like-Box farblich angepasst in den Footer integriert: http://www.stylefruits.de/
September 28th, 2011 at 09:28
Auch schön in den Footer integriert wurde die Like-Box auf http://dealcity.de