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:

Phlow-Autor Philipp Roth

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

Kommentare

21 Antworten zu “Like Box Design – Es gibt auch mehr als die blaue Standardbox…”

  1. Mike says:

    Wo habt ihr das Beispiel von Chris Spooner her? Ich finde das nicht im Netz, vielleicht könnt ihr mal nen Link dazu posten.

  2. Nico says:

    Würde mir noch ein paar Style-Änderungen mehr wünschen. Von mir aus auch einhergehend mit einer zusätzlichen Abfrage.

  3. Chris says:

    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.

  4. Patrick says:

    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.

  5. joekolade says:

    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…

  6. Nicolas says:

    Ein Beispiel aus der Schweiz: http://www.jfgr.ch/

    […]

    Da scheint es den Liberalen noch besser zu gehen. ;-)

  7. Die Facebook-Likebox gestalten | Kultur 2 Punkt 0 says:

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

  8. Alexander Stengelin says:

    Ähnlich wie bei Magnifico, die Pinnwand als Logbuch:

    http://www.piratenherberge.de/logbuch.aspx

  9. einwebdesigner says:

    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)

  10. MatGoas Schopmans says:

    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.

  11. Michael Oeser says:

    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/

  12. joekolade says:

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

  13. joekolade says:

    Ach noch was: Habe das auch für einen Kunden umgesetzt.
    http://www.yupanquiriehle.de/

  14. Josh says:

    http://www.Pauldirekt.de

  15. Vincent says:

    Sehr schöne Beispiele dabei. Nur warum habt ihr keienn Tweet Button??

  16. n10n50 says:

    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…

  17. Roger says:

    Auch sehr schön integriert: http://www.campusfashion.ch/

  18. allfacebook.de | Like Box Rahmenfarbe ändern says:

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

  19. Michael says:

    Wir haben die Like-Box farblich angepasst in den Footer integriert: http://www.stylefruits.de/

  20. Markus says:

    Auch schön in den Footer integriert wurde die Like-Box auf http://dealcity.de

  21. Google will User für Werbung benutzen says:

    […] So dramatisch ist der Schritt nicht. Facebook macht das seit Jahren auf ähnliche Art und Weise. Man denke nur an die beliebte Like-Box. Auch hier wird eingeloggten Facebook-Nutzerinnen und -Nutzern gezeigt, wer aus dem eigenen […]


Nichts verpassen! Täglichen allfacebook.de Newsletter abonnieren:





Fan werden


WebMediaBrands
Mediabistro | SemanticWeb | Inside Network
Jobs | Education | Research | Events | News
Advertise | Terms of Use | Privacy Policy
Copyright 2012 WebMediaBrands Inc. All rights reserved.