Like Box Design – Es gibt auch mehr als die blaue Standardbox…

Like it?
Share it!

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?


21 Kommentare

  1. Mike

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

    Antworten
  2. Nico

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

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

    Antworten
  4. joekolade

    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…

    Antworten
  5. Nicolas

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

    […]

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

    Antworten
  6. 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)

    Antworten
  7. MatGoas Schopmans

    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.

    Antworten
  8. 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/

    Antworten
  9. joekolade

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

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

    Antworten

Diskutiere mit uns!