Design Tipps und Tricks für Facebook Seiten

Tipps und Tricks um einer Facebook Seite das gewisse Etwas zu verpassen

In dem folgenden Beitrag werde ich

Facebook Seiten (bis Ende März 2012)

Durch Verwendung eines Avatar Bildes in Kombination mit einem Landing Tab + Friend Gate konnte man schon ansprechende Fanseiten erstellen.

Chronik/Timeline Hack

Durch die Umstellung der Fanseiten wurde die oben genannte "Technik" leider obsolet und wir mussten sich etwas neues einfallen lassen.
Der Chonik Kopfbereich/Bild lässt genug Platz um seine Werbung dem Kunden nahe zu bringen.
Durch "Verschmelzung" des Avatares mit dem Kopfbereich verstärkt man noch die Wirkung.

Template und Informationen für dieses Verfahren stellen wir hier zur Verfügung -> Facebook Chronik Template

Tipps und Tricks für Facebook Tabs

Maximale verwendbare Größe 810x800 Pixel (BxH)

Bitte beachten: Sobald der Inhalt dieser Seite zu lange wird blendet Facebook eine Scrollbar ein. Sobald eine Scrollbar sichtbar wird, ragt diese über den Inhalt der Seite und ist daher unschön. Um dies zu verhindern, entweder den Inhalt nicht über 800 pixel ragen lassen, oder den Inhalt der Seite auf 780px via CSS beschränken. Dadurch verliert man zwar etwas Platz in der Breite aber der Inhalt kann in der Höhe wachsen.

Risiken und Nebenwirkungen einer fremd gehosteten Facebook Seite

Es gibt unzählige Facebook Tabs, die das Erstellen eines eigenen Tabs erleichtern. Doch gilt es hier zu beachten: Eine Fremdanwendugnen macht den Tab sehr träge, da zuerst die App geladen werden muß und dann noch der selbst generierte Inhalt. Sobald ein User auf den gewünschten Tab klickt und nicht schnell den Inhalt präsentiert bekommt, ist die Wahrscheinlichkeit sehr groß, dass dieser die Seite verläßt...

Eigene Bilder in einem Tab benutzen

Facebook benötigt alle Inhalte eines Tabs via https (d.h. man kann die Bilder und Files nicht einfach auf seinem eigenen Server hosten, außer man hat ein https Zertifikat). Inhalte die nicht Secure abgerufen werden, erzeugen eine Fehlermeldung bei Facebook, die nachfragt ob die Inhalte wirklich angezeigt werden sollen, das ist natürlich ein No-Go für einen professionellen Auftritt.

Für Bilder gibt es einen einfachen Trick

Das gewünschte Bild in ein x-beliebiges Facebook Album laden (Achtung Facebook skalliert die Bilder automatisch!). Das gewünschte Bild in Faceboook aufrufen und mit der Rechten Maustaste den Menüpunkt "Grafik anzeigen" auswählen. Jetzt sieht man den gesamten Link des Bildes in der Adressbar des Browsers, welche man einfach für den Quellcode des Tabs benutzen kann. Durch diesen Trick kann man eigene Bilder von Facebook hosten lassen.

Hosting einer Facebook Seite für kein Geld / Dropbox, dein Freund und Helfer!

Wer sich eine eigene Facebook App bauen möchte (Tutorials dafür finden sich leicht über Google) und die Inhalte "selber" hosten möchte gibt es einen sehr einfachen "Trick".
Die Inhalte, HTML, CSS und Bilddateien einfach in den Public Ordner von einem Dropbox Account laden. Alle Inhalte sind via https abrufbar und erzeugen dadurch auch keine "fehlermeldung" auf Facebook. Die URL der Index Datei lässt sich leicht über das Webinterface des Dropbox Accounts herausfinden, welche einfach in den Einstellungen der Facebook App angegeben werden kann.
Die Bilder, CSS, Dateien und Co können relativ zu dieser Datei angegeben werden. Das ausführen von PHP Dateien in der Dropbox ist leider nicht möglich.

Einstellungen des Facebook Tabs

Der Name des Tabs sollte nur ein Wort oder sehr kurz gehalten sein und das Bild für den Tab im Format 111x74px (BxH).

Allgemeine Tipps für Awesome Facebook Tabs

Facebook Tabs sind umgeben von Inhalten und Facebook Werbung. Daher sollten die Elemente und Inhalte in einem Tab sehr plakativ und einfach gehalten werden um von den umgebenden Elementen die Aufmerksamkeit auf sich zu ziehen.
Sind die Ladezeiten des Tabs zu groß, ist die Wahrscheinlichkeit groß, dass der potentielle Kunde schnell abspringt. Teilweise ist es sinvoll dien Inhalt via Ajax zu laden und in der Zwischenzeit einen Ladebutton dem User zu präsentieren, um diesen darauf hinzuweisen, dass die Seite noch ladet und er gefälligst zu warten hat ;)

Der Wichtigste aller Tipps für Social Media Webdesign

Der Kreativität sind zwar technische Grenzen gesetzt aber genau diese Einschränkung macht es umso wichtiger kreative Konzepte und Ideen einzusetzen und es lädt zum Experimentieren ein!