Das Design lässt sich eigentlich sehr leicht durch einen zusätzlichen Aufruf von ein paar CSS Klassen regeln, ist von Facebook selber jedoch schlecht bis garnicht dokumentiert.

Wichtig: Um das Design anzupassen muss das alte fb:fan anstatt des neuen fb:like-box benutzt werden, denn dort hat Facebook die Designanpassungen bisher nicht unterstützt. Die etwas ältere Facebook Lib wird geladen und mit der “profile_id” wird eure Fan-Site mitgegeben – diesem Code muss lediglich der Link zur CSS Datei hinzugefügt werden (css=”fb.css?1″):

Umsetzung

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/de_DE"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="1149798085427047" stream="0" connections="8" logobar="0" width="253" height="220" css="fb.css?1"></fb:fan>

Dies sagt dem Facebook Frame das er die Datei fb.css für die Styleinformationen nutzen soll. Mit der ?1 wird lediglich der Revisionsstand der Datei angezeigt. Solltet ihr also ein Update machen wollen, einfach durch ?2 erneuern und die Datei wird neu geladen, ansonsten werden die CSS informationen gecached.

Nun kommen wir zur .css Datei – mit Firebug für Firefox, Chrome o.ä. könt ihr euch die Klassen im Detail anschauen. Ich habe mal eine Beispieldatei mit einigen ID’s und Klassen angelegt, welche den Rahmen entfernt und den Inhalt etwas cleaner macht, so das nur noch der Like Button, das Profilbild , etwas Text und die Profilbilder der nutzer angezeigt wird.

.fan_box a{
	color:#257580;
}
.fan_box{height:160px !important; }
.fan_box .full_widget{
  border: 0 !important;
  background: none !important;
  position: relative;
}
.fan_box .connect_top{
  background: none !important;
  padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
  color:#2d8f9e;
  font-size:14px;
}
.fan_box .connect_action{
  padding: 0 0 10px 0 !important;
}
.fan_box .connections{
  padding: 0 !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #666;
}
span.total{
  color: white;
}
.fan_box .connections .connections_grid {
  padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
  padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
  font-family: Helvetica;
  font-weight: normal;
  color: #282828!important;
  padding-top: 1px !important;
}

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Erstmals sprach mich Eva Ihnenfeldt Mitte 2010 auf einen Newsroom an. Sie hatte bis dato einen Blog – die SteadyNews, einen Newsletter und ist in vielen Netzwerken wie Facebook, Twitter oder Xing vertreten. Überall pflegte sie Inhalte und vernetzte sich mit Fans, Business Partnern und Lesern. Ihre Idee war es diese Inhalte wieder zurück auf die Seite zu holen und diese dort zu bündeln um den zahlreichen Besuchern der Seite alle Informationen an einer Stelle anzubieten.

Schnell fande wir einige Beispiele für Social Newsrooms wie etwa den vom Vapiano oder die vom PR-Blogger zusammengefassten Beispiele. Was mir persönlich an diesen Beispielen oftmals missfällt ist die Tatsache das sehr wenig Wert auf das äußere gelegt wird. Es entwickelt sich der Eindruck als ob hier das Internet neu starten würde – Sozial, aber im Gewand aus dem Jahr 2000.

Welche Funktionen?

Die wichtigste Frage die sich zuerst gestellt werden muss ist die Frage nach den Netzwerken und Funktionen – welche will ich wie einbinden? – Facebook? Twitter? Youtube? Flickr? Ein Newsletter? ein Podcast? Es gibt zahlreiche Möglichkeiten Inhalte von den Seiten wieder zurück auf die eigene zu bringen – immer im Auge sollte man die Usability haben. Der Benutzer hat nichts von all diesen Inhalten wenn er aufgrund von Überfrachtung nichts mehr auf der Seite findet.

Die Möglichkeiten

Facebook
Bei Facebook sind die Möglichkeiten eigentlich die größten. Die Fanpage kann eingebunden werden, so dass die Besucher direkt über die Seite Fan von euch werden kann. Die Beiträge können “geliked” (Gefällt mir), werden. Und die Kommentare können von der Facebook Fanpage zurück auf die eigene Seite gebracht werden.

Twitter
Twitter erlaubt ganz klassisch die Möglichkeit die geschrieben Tweets auf der Seite darzustellen. Andersherum ist es natürlich möglich die Beiträge die im Blog geschrieben wurden nach Twitter zu posten und dadurch Besucher zu generieren. Ebenfalls gibt es die Möglichkeit wie bei Facebook einen Button einzubinden welcher es den Benutzern erlaubt den Beitrag bei sich in die Twitter-Timeline zu posten.

Xing
Hier sind die Möglichkeiten leider sehr begrenzt. Mehr als ein Link per Social Media Icon ist aktuell nicht möglich.

Flickr
Auch Flickr hat eine schöne API die es erlaubt die Fotos von Flickr in den eigenen Newsroom zu “exportieren”. So werden immer die aktuellsten Fotos dargestellt.

Youtube
Ähnlich wie Flickr gibt es die Möglichkeit die Videos in die Seite einzubinden oder aber auch nur eine Liste der eigenen Videos zu generieren.

Newsletter
Für den Newsletter benutze ich sehr gerne Mailchimp. Mailchimp hat weitreichendere Möglichkeiten als die meisten anderen Newsletter Dienste. So kann z.B. das Newsletter-Archiv per Plugin auf die eigene Seite geholt werden ohne das man es selbst Pflegen muss, ein weiterer netter dienst am Besucher. In Mailchimp selber gibt es die Möglichkeit einen “Like” und “Tweet” Button unter jedem Beitrag einzubinden und dies dann auch zu Tracken per “Social PRO”.

Sonstiges
Ansonsten sollte man auf jeden fall den RSS Feed Sichtbar einbinden um viele dauerhafte Besucher zu generieren. Ein weiterer netter Social Dienst ist Flattr (Social Payment), so könnt ihr die Inhalte die ihr bereitstellt von den Besuchern (freiwillig) bezahlen lassen. Wie das genau Funktioniert werde ich in einem späteren Beitrag noch erläutern.

Beispiele

SteadyNews
Die SteadyNews haben eine Portalseite mit der Einbindung von Facebook, Twitter, Flickr, Mailchimp und Youtube. Zudem wird viel Wert auf die Interaktion mit den Besuchern gelegt.

Vapiano
Das Vapiano bindet eine Karte aller Restaurants ein, legt viel Wert auf die eigenen Blogbeiträge, welche zum Teil sogar aus den Restaurants selber kommen. Bilder und Videos kommen von Flickr und Youtube.

Westaflex
Westaflex, u.a. Hersteller von Rohren oder Klimatechnik hat einen sehr kompakten, aber schönen Newsroom. Das Hauptaugenmerk liegt auf einem Videobeitrag von Youtube. Desweiteren ist Flickr, Twitter, ein Blog und ein Podcast eingebunden.

Electrolux
Electrolux, ein bekannter Saubstaugerhersteller hat seinen Newsroom etwas anders aufgebaut. Er wirkt eher wie ein Magazin oder einer Zeitung. Die Beiträge werden Kategorisiert und es gibt einen großen Aufmacher. Jedem Beitrag ist die Möglichkeit bereitgestellt den Beitrag in den Social Networks zu posten oder per Mail an einen Freund zu schicken.

Sinnvoll für die Zukunft oder kurzzeitiger Trend?

Ansich bin ich ein großer Fan von Social Newsrooms – sie verbinden die Inhalte von den ganzen verschiedenen Seiten auf einer einzelnen Seite. Für alles was man bei Youtube, Flickr, Facebook, etc. bereitstellt hat man Zeit investiert die man nicht in den eigenen Blog stecken konnte. Alles Zeit die je nachdem welches Business man betreibt auch Geld Wert ist. Gerade für Firmen die Presseberichte bereitstellen, sich in den Social Networks nah am Kunden bewegen ist dies eine nette Möglichkeit die eigenen Aktivitäten zu unterstreichen.

Ob es nur ein Trend ist oder etwas für die Zukunft wird sich daran scheiden wie sich die Netzwerke entwickeln. MySpace und die VZ-Netzwerke sind auf dem absteigenden Ast und haben keine wirkliche Bedeutung mehr im Netz – sollte dies anderen Netzwerken auch passieren und langfristig das Interesse daran vielleicht ganz schwinden wären natürlich auch die Newsrooms tot. Eine Vorraussage ist hier nur schlecht möglich, wie immer ist das Web im dauerhaften Wandel und nur die Zukunft kann zeigen ob sich so ein Newsroom (ge)lohnt (hat).

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Die Produkte von Apple ernten regelmäßig bedeutende Design Awards, die Auspackzeremonie von Produkten ist mitlerweile Legendär und die Website von Apple setzt noch heute – Jahre nachdem sie veröffentlicht wurde Designtrends. Setzt iTunes hier an und wie bedeutend ist es für kommendes im Webdesign?

Prägung … Trend vorgegebn oder Trend nachgelaufen?

Während in den vorherigen Versionen die Änderungen eher marginal ausgefallen sind, wurde in iTunes 9 relativ viel geändert. Die Bedienelemente (Bild: Vergleich iTunes 8 oben und iTunes 9 unten) und der Lautstärkeregler nutzen einen Inneren Schatten um Dreidimensionalität zu demonstrieren – gleiches gilt für die Icons.

Doch hier stellt sich die Frage ob Apple den Trend vorgibt oder einem Nachläuft? Denn ich habe in den letzten Monat häufiger diese Technik gesehen und auch Chukki.de setzt z.B. bei den Icons auf eine ähnliche Optik. Angefangen hat dies mit Adobe CS4, dessen Icons die Schrift ebenfalls mit einer Prägung ausgestattet sind.

Glossy, Glossy, Glossy…

Apple lässt den Glossy Style wieder stärker auferleben. Mit Glossy lassen sich Highlights setzen, doch der große Trend des Glossys wie er mit dem Web 2.0 aufkam ist längst vorbei. Kann und will Apple hier diesen Stil wieder stärker ins Rampenlicht führen? Ich denke eher bedingt, denn als das Web 2.0 “startete” war dieses Stilelement überall zu sehen und ich denke das sich viele wirklich satt dran gesehen haben.

Doch für das setzten von Highlights und den sparsamen Einsatz ist es nach wie vor ein echter Hingucker und genau aus diesem Grund hat Apple es auch an einigen Stellen wieder eingestreut (Bild: iTunes 9 unten – die Titelanzeige und die Store Navigation wurden eine Glossy-Kur unterzogen).

Nach Dunkel kommt Hell oder andersherum?

Nachdem Apple in der Vergangenheit eher auf dunkle Stilmittel wie beim Coverflow gesetzt hat hat Apple hier eine kleine Kehrtwende eingelegt. Die komplette Mediathek erscheint auf einem weißen Hintergrund, welcher bisher in einem dunklen grau gehalten wurde (Bild: Cover Darstellung, oben iTunes 8 unten iTunes 9). Diese Änderung ist die Umstrittenste – im Netz wurden viele Klagen laut die gerne die alte Farbgebung zurück hätten. Insgesamt finde auch ich das der dunkle Hintergrund schöner fürs Auge war – aber man gewöhnt sich bekanntlich an alles und auch der weiße Hintergrund stört mittlerweile nicht mehr so stark wie direkt nach der Installation.

Doch um alles anders zu machen hat Apple auch den iTunes Store umgekrempelt und ist hier genau den anderen Weg gegangen. Alles was bisher hell war, erscheint jetzt (sehr oft, aber nicht immer) in einem Schwarzton. Warum so Inkonsequent Apple?

Und fürs Webdesign?

Was bedeutet das für das Webdesign? Kann Apple hier seinen Einfluss der Vergangenheit wieder geltend machen? Ich persönlich denke eher nicht. Die Prägung gewisser Elemente ist bereits Trend – hervorgerufen durch die Icons der Creative Suite 4, Glossy wurde und wird weiterhin mal mehr, mal weniger eingesetzt und ob eine Website hell oder dunkel ist bleibt dem Geschmack des Designers oder dem Corporate Identity überlassen.

Wer unzufrieden ist mit dem neuen Design von iTunes 9 kann durch den “Dark Grid Mod” geholfen werden. Er bietet 4 Styles auf die wieder zurück gewechselt werden kann.

Download iTunes 9

Chukki.de bei
Facebook | Twitter