Facebook Page Template

Ab mitte März werden auf Facebook Pages keine FBML-Anwendungen mehr unterstützt. Das ganze wird ersetzt durch sogenannte iFrame-Anwendungen. Dies hat viele Vorteile, jedoch auch einige Nachteile. Wir haben uns das ganze mal im Detail angeschaut und bieten euch unser Template mit vielen Features zum kostenlosen Download an.

Vor- und Nachteile von Facebook iFrame-Apps

Vorteile:

HTML, CSS und JavaScript können uneingeschränkt genutzt werden. Auch Libraries wie jQuery, Mootools, etc. können problemlos eingebunden werden
Tracking-Tools wie Google Anayltics können problemlos integriert werden. IP-Adressen und Browserinformationen sind nun also auch verwertbar.
Bei den bisherigen FBML Apps konnte in Fan Pages kein Autoplay genutzt werden, was nun funktioniert (YouTube Videos, Flash Animationen, etc.)
Die Nutzung aller Social Media Plugins wird unterstützt (Comment Box, Like Button, Freunde einladen, etc.)
Cookies können beim Benutzer hinterlassen werden, beispielsweise für die Speicherung der Sprachauswahl
Facebook nimmt kein Caching mehr vor, sodass z.B. Bilder keinen Cache Breaker mehr beim Update benötigen.

Nachteile:

Für den Hobby-Facebook-Admin wird es komplizierter, da man “richtige” Website entwickeln muss
Der Traffic wird auf eigenen Servern generiert, so entstehen je nachdem Mehrkosten
Static FBML App war bisher sehr einfach und ohne Hosting einer eigenen Seite möglich
CSS Styles werden nicht mehr von Facebook übernommen, will man also konsistent mit dem Facebook Layout bleiben muss kräftig gestylt werden
Die Standard-Höhe der iFrame Tabs ist auf 800px beschränkt, will man mehr muss man einen Scrollbalken in Kauf nehmen oder sich mit Facebook Funktionen drum kümmern. Beispielsweise mit FB.Canvas.setAutoResize(); und/oder FB.Canvas.setSize({ width: x, height: y });
HTML/CSS und JS kann aus dem Quelltext des IFrames kopiert/geklaut werden.

Trotz einigen Nachteilen überwiegen die Vorteile klar. Die Möglichkeiten sind, abgesehen von der fixen breite von 520px fast unbegrenzt. Natürlich wollten wir das ganze mal testen und haben dafür eine kleine aber feine Facebook iFrame-App umgesetzt.

Das Ergebnis findet ihr hier: http://facebook.com/Webdesignlovers.

Achtung: Falls ihr “sicheres durchstöbern” über https aktiviert habt, wird die App nicht angezeigt, da wir unsere App nicht über https anbieten.

Facebook Page Template

Unser Template mit HTML, CSS, JS und allen Facebook Funktionen stellen wir euch kostenlos zur Verfügung.

Features

HTML, CSS, JS Template
Integrierte Like Buttons
Share Funktion
Invite Friends Funktion
Kommentare
Integriertes Youtube Video
Google Adsense
Google Analytics

DOWNLOAD

Das ganze wurde nur auf Firefox getestet und dient ausdrücklich zum erweitern. Ladet es euch hier herunter und gebt uns Feedback was ihr damit angestellt habt.

Wie lege ich eine iFrame-App an?

Dann gehen wir mal zum praktischen Teil. Um eine iFrame-App zu erstellen sollte als erstes die App erstellt werden. Also eine einfache Website welche dann per iFrame integriert wird. Meine Website habe ich unter http://webdesignlovers.ch/fb erstellt. Wie ihr seht, kein Rocket-Science sondern kurz und knackig umgesetz.

Zu Testzwecken könnt ihr mein Template hier herunterladen und auf eurem Server wieder hochladen. Die Files können auch später noch problemlos eurem Content und Design angepasst werden.

Wie integriere ich die iFrame-App auf meiner Facebook Page?

Das ist etwas umständlicher als bisher mit FBML. Als erstes browst ihr die Developers Seite an: http://www.facebook.com/developers/ . Erstelle dort eine neue Anwendung. Gib der App im nächsten Schritt einen Namen und stimme den AGB’s zu.

Nachfolgend kann nun ein Icon und ein Symbol definiert werden, sowie die Sprache, den Link zu AGB’s, etc. definiert werden.

Die wichtigen Einstellungen findet man im Menüpunkt “Facebook-Einbindung”. Folgendes kann dort definiert werden:

Canvasseite : Hier geben wir eine Adresse ein, über die die Anwendung später direkt aufrufbar ist.
Canvas URL : Dies ist der absolute URL zu dem Anwendungsordner auf unserem Server. In diesem Beispiel also : http://webdesignlovers.ch/fb/
Canvas-Typ : Hier muß in jedem Fall “iFrame” ausgewählt werden.
iFrame-Größe : Die iFrame Grösse soll sich automatisch anpassen. Das funktioniert nur begrenzt, jedoch helfen wir hier mit Facebook Funktionen nach.
Name des Reiters : Hier kommt der Name hinein, den man später auf der Facebookseite im linken Menü sehen wird (neben dem Icon). Man hat hier 16 Zeichen zur Beschreibung zur Verfügung.
URL des Reiters : Dies ist der Name der Datei, die die Inhalte auf unserem Server beinhaltet. In unserem Fall also : index.html

Nach dem Speichern sieht man die Anwendung nochmal im Überblick:

Nun soll diese App natürlich auf unserer Facebook Page angezeigt werden. Das geht nun ganz fix. Einfach die Anwendungs-Profilseite anklicken, dann kommt man auf die Detailseite der Applikation.

Hier kann einerseits getestet werden ob die Facebook-Funktionen korrekt funktionieren (Zur Anwendung anklicken) oder man kann die App einer Facebook Page hinzufügen mit “Zu meiner Seite hinzufügen”.