UPDATE 11.12.2011: Facebook hat das Prozedere für das Hinzufügen der App zur Seite geändert (siehe unten)!

Dieses Tutorial kann kostenlos als pdf-Datei heruntergeladen werden
und ist auch auf scribd verfügbar.

Mit der Umstellung auf das neue Fanseiten-Layout, das Anfang März 2011 für alle eingeführt wird, hat Facebook nun auch das Erstellen von sogenannten iframe-Tabs als individuelle Gestaltungsmöglichkeit von Fanseiten eingeführt. Reiter, die mit Static FBML erstellt wurden, sollen zunächst weiter angezeigt werden. Da die neuen Reiter aber viel umfangreicher gestaltet werden können, sollte man das auch nutzen und bald umstellen.

Dazu nötig sind:

• externer Webspace (z.B. dort, wo Ihre reguläre Website auch liegt) inklusive Variante mit sicherer Verbindung (https)!!!
• ein verifiziertes Privatkonto auf Facebook, mit dem Sie auch Admin der Fanseite sind, zu der die individuellen Inhalte hinzugefügt werden sollen
• HTML- und CSS-Kenntnisse (oder ein Webdesigner, der diesen Teil für Sie übernimmt)

Dieses Tutorial zeigt Ihnen, wie Sie die individuellen Inhalte vorbereiten müssen, die in die Fanseite eingebunden werden sollen, und wie dieses Einbinden dann funktioniert.

Inhalte vorbereiten

Die Inhalte eines iframe-Tabs können Sie wie normale Websites designen und (wie auch sonst im Webdesign) ausgehend von einer index.html konzipieren. Für die CSS-Datei des iframe-Tabs können Sie die CSS-Datei Ihrer Website kopieren und entsprechend anpassen.

Für Fanseiten-Reiter gilt eine maximale Breite von 810px. Da für iframe-Tab aber auch noch eine maximale Höhe von 800px hinzukommt, sollten Sie vorsichtshalber nochmal 10px von der max. Breite abziehen, damit der vertikale Scrollbalken, der beim Überschreiten der max. Höhe erscheint, nicht noch zu einem weiteren horizontalen Scrollbalken führt. Legen wir also 800px Breite und max. 800px Höhe für den body fest.

WICHTIG: Links, die aus dem Reiter hinaus auf externe Webseiten führen sollen, müssen mit target=”blank” versehen werden, weil Facebook sonst versucht auch diese (nicht für die Ansicht in Facebook optimierten Seiten) im Reiter darzustellen.

Von dieser Startseite ausgehend können Sie weitere Unterseiten ganz normal über ein Menü oder Textlinks untereinander verlinken. Solange Sie sich an die genannte Größe halten und folgende weiteren Regeln beachten, werden diese Seiten nachher im Tab selbst navigierbar angezeigt:

Der im Video gezeigte Tab hat z.B. folgende Struktur:

• Home (index.html)
• Grundsätze (grundsaetze.html)
• Publikationen (publikation.html)
• Kontakt (kontakt.html)
• Impressum (Link zum Impressum der regulären Website ist ein MUSS und wird daher mit target=”blank” eingebunden!)

Die html-Dateien sowie die dazugehörige CSS-Datei liegen alle im selben Unterordner meiner Website bereit. Diese für die Facebook-Ansich optimierte Miniwebsite muss nun über eine im Folgenden zu erstellende Facebook-Anwendung auf der Fanseite anzeigbar gemacht werden:

Erstellen einer Facebook-Anwendung

1. Legen Sie auf Ihrem Webserver einen eigenen Ordner an und kopieren Sie die Dateien für den Tab (.css und .html) in diesen Ordner.
2. Die neu erstellte index.html für den neuen Tab ist also zu finden unter
   http://meinewebseite.de/meinordner/index.html
3. Öffnen Sie in einem neuen Browser-Tab die Developer-Seite von Facebook
   http://www.facebook.com/developers/
4. Klicken Sie rechts oben auf den Button + Create new app
5. Geben Sie Ihrer Anwendung einen Namen (kann man jederzeit wieder ändern und ist nach außen nicht sichtbar) und stimmen Sie den Allgemeinen Geschäftsbedingungen von Facebook zu:
6.  Klicken Sie auf Weiter.
7. Danach werden Sie gebeten einen Sicherheits-Code einzugeben.
8. Nun werden Sie aufgefordert, einen Namen für Ihre Anwendung einzugeben (wird später nicht Name des Reiters) und eine Kontakt-Emailadresse sowie die Anwendungsdomain (facebook.com eintragen):
   
9. Ganz oben können Sie außerdem ein Icon für Ihren Reiter hochladen:
   Weitere Anweisungen finden Sie dann im neuen Fenster:
   Es sollte – wie ein normales Favicon –  16x16px groß sein, allerdings JPG-, GIF- oder PNG-Format haben und nicht größer als 5MB sein. Außerdem versichern Sie mit dem Hochladen, dass Sie die Rechte an diesem Bild besitzen.
10. Jetzt geben Sie weitere Details zu Ihrer neuen Anwendung ein:
    
    • Website > Adresse der Webseite: http://facebook.com/
    • Seitenreiter > Page Tab Name:  späterer Name des Reiters
    • Page Tab URL: wo befindet sich die Startseite Ihrer extern bereitgestelten Reiter-Inhalte?
    • Secure Page Tab URL: wo befindet sich die sichere Startseite (https) Ihrer extern bereitgestellten Reiter-Inhalte?

    ÄNDERUNGEN SPEICHERN!

Ihre Anwendung zu Ihrer Fanseite hinzufügen (s.pdf-Download ganz oben)

1. Modifizieren Sie den folgenden Link mit Ihren Parametern:   https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=http://www.facebook.com/
   • YOUR_APP_ID = Ihre App-ID (finden Sie ganz oben auf Ihrer Anwendungsseite, siehe Grafik bei Punkt 8)

   Beispiel:
   https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID_HERE&display=popup&next=http://www.facebook.com/

    

2. Geben Sie dann diesen modifizierten Link ins Adressfeld Ihres Browsers ein und öffnen Sie ihn. Daraufhin erscheint so ein Dialog:
   • Über Choose Facebook Pages können Sie die gewünschte Facebook-Seite auswählen, zu der der neue reiter hinzugefügt werden soll.
   • Über Add Page Tab fügen Sie den Reiter zu Ihrer Fanseite hinzu.
3. Wechseln Sie zu Ihrer Fanseite. Dort sollte Ihre Anwendung jetzt als Menüpunkt erscheinen:
   Im Reiter dazu kann man dann die einzelnen Unterseiten direkt im Reiter aufrufen:
   

   Bild anklicken, um Original-Tab zu sehen