Facebook: Fanpage mit iFrame-Tabs erweitern

facebook-developer

Mit der Einführung der neuen Fanpages hat Facebook auch die schon lange angekündigten iFrame Tabs veröffentlicht. Mit Einführung dieser Tabs werden die bisher gebräuchlichen FBML-Tabs überflüssig und in Kürze nichtmehr unterstützt. Insbesondere wenn Ihr neue Seiten hinzufügen wollt müsst Ihr zukünftig iFrame-Tabs verwenden.
Ich möchte Euch kurz erklären was Ihr benötigt um die iFrame-Tabs nutzen zu können, wie Ihr einen neuen Tab erstellt, und wo die Vor- und Nachteile der neuen Tabs liegen.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Voraussetzungen für iFrame-Tabs

Bisher war es so, dass Ihr für die Benutzung von FBML-Tabs lediglich eine bereits existierende Anwendung zu Eurer Facebook-Seite hinzufügen musstet. Anschließend ermöglichte es Euch diese Anwendung Quellcode in die Facebook-Seite zu schreiben und somit individuelle Inhalte darzustellen.
Bei iFrame-Tabs ist das Ganze etwas anders: Ihr müsst zunächst für jede zusätzliche Unterseite (also jeden Tab) eine neue, eigene Facebook-Anwendung erstellen. Diese Anwendung zieht sich dann Quellcode von externem Webspace und stellt diesen mittels iFrame dar. Im letzten Schritt müsst Ihr die Anwendung Eurer Fan-Page hinzufügen.
Die Vorraussetzungen für die Einrichtung eigener Fanpage-Tabs sind damit etwas höher geworden: Um eine Anwendung erstellen zu können müsst Ihr Euch zunächst als Developer verifizieren. Dafür könnt Ihr Eure Kreditkarte oder Euer Handy benutzen.

Darüber hinaus benötigt Ihr ab sofort natürlich auch eigenen Webspace auf den Ihr den Code Eurer Fan-Page-Unterseite hochladen könnt.

Wenn all diese Vorraussetzungen erfüllt sind ist das Erstellen eines iFrame-Tabs keine große Sache mehr. Wir wollen uns das mal im Detail Schritt für Schritt anschauen.

Neue Anwendungen erstellen

Öffnet zunächst den Entwickler-Bereich von Facebook (facebook.com/developers) und klickt oben rechts auf "Erstelle eine neue Anwendung".

Im nachfolgenden Screen vergebt Ihr einen beliebigen Namen (kann nachträglich geändert werden), bestätigt die AGB und klickt auf "Anwendung erstellen".

Nach einer eventuellen Sicherheitsabfrage werdet Ihr zu den Anwendungs-Einstellungen weitergeleitet. In den Anwendungs-Optionen habt Ihr nun umfangreiche Möglichkeiten Angaben zu Eurer neuen Anwendung zu machen und Einstellungen festzulegen. Ich beschränke mich jetzt nur auf die Optionen die nötig sind um einen iFrame Tab zu erstellen.


Einstellungen "Website"

In den Website-Einstellungen müsst Ihr die Adresse zu Eurem eigenen Webspace eintragen. Hierbei muss ein Ordner angegeben werden (mit / am Ende!), keine einzelne Datei.


Einstellungen "Facebook-Einbindung"

In den Settings zu den "Facebook-Einbindungen" müsst Ihr ebenfalls einige Angaben machen. Im Abschnitt "Canvas" gebt Ihr sowohl die Canvasseite, als auch die Canvas-URL an.
Bei der Canvasseite könnt Ihr einen beliebigen Namen vergeben. Unter dieser Adresse ist die Facebook-Anwendung dann verfügbar.
Die Canvas-URL muss Euer Webspace sein. Hier tragt Ihr demnach den identischen Pfad ein wie zuvor in den Website-Einstellungen.

Im Abschnitt "Page Tabs" müssen ebenfalls Angaben gemacht werden. Tragt hier zunächst die Bezeichnung des Tabs ein. Dieser Name wird später in der Navigation angezeigt. Achtet darauf, dass als Typ "iFrame" ausgewählt ist und vergebt zuletzt die "URL des Reiters". Hierbei muss jetzt die Datei (üblicherweise index.html oder index.php) angegeben werden die auf Eurem Webspace liegt und den Code des späteren Tabs beinhaltet.

Ihr könnt jetzt alle Optionen speichern und werdet zum Bildschirm "Meine Anwendungen" weitergeleitet.

Externe Daten hochladen und bereitstellen

Ihr habt jetzt eine eigene Anwendung erstellt und Euren externen Webspace hinterlegt. Falls noch nicht geschehen müsst Ihr jetzt natürlich den externen Inhalt bereitstellen. Hierfür habt Ihr alle Möglichkeiten die beim coden einer normalen Website auch zur Verfügung stehen. Also Multimedia, jQuery, PHP, Tracking-Tools etc. Viele der neuen Möglichkeiten waren mit den bisherigen FBML-Tabs nicht realisierbar.
Erstellt eine neue HTML/PHP-Datei, fügt Inhalt ein und ladet diese Datei unter dem zuvor angegebenen Dateinamen in das zuvor angegebene Verzeichnis hoch.
Achtung! Aktuell sind die iFrame-Tabs auf eine Höhe von 800 Pixeln begrenzt.

Anwendung der eigenen Seite hinzufügen

Wenn Ihr Euch im Dialog "Meine Anwendungen" (facebook.com/developers/apps.php) befindet, so klickt nun auf "Anwendungs-Profilseite".

Ihr gelangt auf eine weitere Seite über die Ihr Eure neue Anwendung bewerben könntet. Hier stehen ähnliche Möglichkeiten zur Verfügung wie dies auch bei privaten Profilen und FanPages der Fall ist. Klickt auf "Zur Anwendung" um Euren iFrame-Tab-Inhalt zu testen.
Über den Link "Zu meiner Seite hinzufügen" fügt Ihr diesen Tab nun Eurer Fan-Page zu.

Anschließend erscheint der Tab unter dem zuvor angegebenen Namen in der linken Navigationsleiste. In den Einstellungen zu Eurer Seite könnt Ihr zudem festlegen, dass Besucher als Startseite einen iFrame-Tab sehen. Auch das Icon des neuen Tabs lässt sich über die Anwendungs-Einstellungen individualisieren.

Das war's auch schon. Diese Prozedur müsst Ihr nun ab sofort für jede zusätzliche Unterseite der Fan-Page durchführen. Ihr habt Ergänzungen oder Anmerkungen zu diesem Artikel? Dann schreibt einfach einen Kommentar.
Was haltet Ihr von den neuen iFrame Tabs? Überwiegen die Vorteile und die Freiheiten beim Coding oder findet Ihr die neuen Tabs zu kompliziert, lästig oder gar überflüssig?

Update: Sichere Verbindungen sind nun Pflicht

Facebook erlaubt seit Oktober 2011 nur noch sichere Tabs. Was das zu bedeuten hat und wie ihr einen Tab mit einem Sicherheitszertifikat ausstattet erfahrt ihr hier: So geht’s: Sicheres durchstöbern (https) für Facebook-Fanpages gewährleisten

Update 2: Facebook veröffentlicht Anleitung für Fanpage-Tabs

Facebook hat nun eine eigene Anleitung zum Hinzufügen von Fanpage-Tabs veröffentlicht.