Mit eigener Anwendung per iFrame für eine Facebook-Seite eine individuelle Seite erstellen.

1. MIT
FACEBOOK
GESTALTEN
VON SUSANNE
STEP 1 Vorüberlegung
IT IFRAME-TAB EIGENE
ACEBOOK-ANWENDUNGEN
GESTALTEN
USANNE ANGELI © 2013 – VERSION 2
STEP 1 Vorüberlegung
STEP 2 Daten erstellen
STEP 3 iFrame einbauen
AB EIGENE
NWENDUNGEN
STEP 2 Daten erstellen
STEP 3 iFrame einbauen

2. wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de
Inhaber Susanne Angeli – Fachbuchautor und eCommerce-Berater
M I T I F R A M E - T A B E I G E N E F A C E B O O K - A N W E N D U N G E N
G E S T A L T E N
… ÖFTER MAL WAS NEUES
Mit der neu ausgerollten Chronik für Facebook-Seiten führte Facebook eine
individuellere Gestaltung von Fanseiten ein.
Die Tabs sind als zusätzlicher Kasten unterhalb des Titelbildes platziert.
Bedenken Sie, es sind 12 Kästen möglich. In jeden Kasten/Tab können Sie
auch eigene erstelle HTML-Seiten einbauen.
Um solche sogenannte iFrame-Tabs zu erstellen, müssen Sie die Inhalte
vorbereitet haben. Wie dies funktioniert und was Sie über die Einbindung auf
Ihre Facebook-Seite wissen müssen, erklärt Ihnen diese Kurzanleitung.
STEP 1: Vorüberlegungen für iFrame-Tab
Um einen eigenen iFrame-Tab zu erstellen benötigen Sie einerseits den Inhalt (.html) und andererseits
das Design (.css). Dafür bedarf es entweder Kenntnisse in HTML/CSS oder Sie verwenden fertige
Template-Vorlagen aus dem Netz, die Sie mit Ihren Inhalten füllen. Sie können auch das Design (CSS)
Ihrer Website verwenden, das Sie mit dem entsprechenden Inhalt für den Facebook-Tab erweitern,
basierend auf einer index.html. Bedenken Sie folgende weitere Punkte:
Sie benötigen für die iFrame-Tab-Datei einen externen Webspace (evtl. Ihren Webspace der
Website) Tipp: Vergessen Sie nicht die zusätzliche Datei über https! SSL einschalten!!
Zum Erstellen der HTML-Dateien für die Tabs ist ein WYSIWYG-HTML-Editor zu empfehlen.
die Seite sollte eine Breite von max. 800 Pixel und eine max. Höhe von 800 Pixel vorweisen.
Machbar sind zwar 810 Pixel in der Breite, doch sollten Sie dem rechten Scrollbalken vorsorglich
Platz einräumen, der bei der voll ausgenutzten Höhe erscheint.
und Sie müssen ein verifiziertes Privatkonto bei Facebook führen, welches Sie auch als Admin auf
Ihrer Fanseite verwenden.

3. wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de
Inhaber Susanne Angeli – Fachbuchautor und eCommerce-Berater
M I T I F R A M E - T A B E I G E N E F A C E B O O K - A N W E N D U N G E N
G E S T A L T E N
Überlegen Sie sich Ihre Inhalte
Überlegen Sie, was Sie einem neuen Fan mitteilen möchten, um dann auch
auf den "Gefällt mir"-Button zu klicken! Ein Ansatz wäre, Ihr Unternehmen
vorzustellen und auf den Mehrwert für neue Fans aufmerksam zu machen
und was diese hier erwartet.
Wie zum Beispiel: Fans erhalten früher detailliertere Infos über Ihr
Unternehmen, die sie ansonsten nicht erhalten würden. Überlegen Sie, was
zu Ihrer Unternehmensstrategie/Unternehmen passt. Wichtig dabei ist, wie
Sie den Inhalt auf der Facebook-Seite aufteilen wollen. Ob Sie nur einen Tab
mit weiteren Links zu Unterseiten anbieten oder ob Sie den Inhalt auf
verschiedene Tabs verteilen möchten (siehe Abbildung Hamburger Facebook-
Seite).
Verteilen Sie den Inhalt auf verschiedene Tabs, so gestalten Sie einen Tab als
Willkommensseite und verlinken darin auf die anderen erstellten Tabs. Siehe
Beispiel für eine Willkommensseite der Hansestadt Hamburg.
Abb.: Verschieden Tabs bieten unterschiedliche Inhalte mit Mehrwert an, z.B.
Jobsuche, Wohnungen, Tickets etc.

4. wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de
Inhaber Susanne Angeli – Fachbuchautor und eCommerce-Berater
M I T I F R A M E - T A B E I G E N E F A C E B O O K - A N W E N D U N G E N
G E S T A L T E N
Oder Sie bieten Ihre Tutorials oder Anleitungen an, auf die Sie von einem
einzigen Tab aus zu Ihrer Website verlinken.
Es muss also einerseits etwas Handfestes sein, etwas das die Besucher sonst
fast nirgends finden - und andererseits etwas, das sie vor allem dann anlockt,
auch wenn sie bereits zu Ihrer Zielgruppe oder gar zu Ihren Stammkunden
gehören. Idealerweise sollte ein solcher Tab also gleichzeitig anlocken und
ausfiltern.
STEP 2: Datei/en erstellen
Für einen individuellen Tab benötigen Sie eine index.html und evtl. eine CSS-
Datei, die Sie auf Ihrem Webspace in einen Ordner ablegen. Wie Sie darauf
über die Facebook-Seite zugreifen und als Tab einbauen, erfahren Sie im
nächsten Punkt.
Diese Datei kann sowohl Textlinks als auch ein Menü mit externen oder
internen Links enthalten, die auf weitere Tabs führen, wie das Beispiel oben
zeigt. Beachten Sie, die externen Links mit target=„_blank“ auszuzeichnen.
Ansonsten versucht Facebook diese Seite im Tab darzustellen, was wegen der
eingeschränkten Größe des Tabs nicht besonders schön aussieht.
Möchten Sie einen Tab mit einem Menü zu zusätzlichen Unterseiten
gestalten, benötigen Sie für jede Unterseite eine eigene Datei auf dem
Webspace im gleichen Ordner. Für Fans sind diese Unterseiten dann nicht in
einem extra Kasten als iFrame-Tab ersichtlich, sondern werden im gleichen
Fenster des Tabs angezeigt. Achten Sie daher auf eine gleichbleibende Breite!
Beispiel-Unterseiten neben der Home (Willkommensseite) als Startseite
wären Stories, Impressum, Tutorials, Kontakt usw. die Sie mit den
gleichlautenden Dateinamen abspeichern: impressum.html, stories.html,
kontakt.html usw.

5. wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de
Inhaber Susanne Angeli – Fachbuchautor und eCommerce-Berater
M I T I F R A M E - T A B E I G E N E F A C E B O O K - A N W E N D U N G E N
G E S T A L T E N
STEP 3: iFrame-Tab anlegen
1. Die erstellten Dateien für den Tab, also die .html und die .css, legen Sie in das neu erstellte
Verzeichnis/Ordner auf Ihrem Webspace. Beispiel-URL:
http://IhreDomain.de/IhrVerzeichnis/index.html
2. In einem Browser rufen Sie jetzt die Developer-Seite von Facebook auf und klicken dann auf
„Apps“ im oberen Menü: http://www.facebook.com/developer/
3. Auf dieser Seite klicken Sie oben rechts auf „Neue Anwendung erstellen“.
4. Vergeben Sie hier für den Tab einen Namen und bestätigen Sie die Allgemeinen
Geschäftsbedingungen von Facebook. Der Name ist nur für Sie ersichtlich und lässt sich
jederzeit abändern. Klicken Sie auf Weiter und geben Sie anschließend den Sicherheitscode ein.
Abb.: App-Name für die Anwendung/Kasten
5. Ein neues Fenster wird angezeigt. Mit einem Klick auf die entsprechende Aufzählung mit Hacken
können Sie die einzelnen Eingabefelder öffnen. Füllen Sie diese Felder mit Ihren Angaben aus.
Unter „Adresse der Website“ nennen Sie Ihre Domain.
Weitere Angaben siehe Abbildung:
- „Page Tab Name“ ist der Name Ihres Tab, der auf Ihrer Facebook-Seite den Fans angezeigt wird.
- „Leinwand-URL“ ist das Verzeichnis für Ihre index.html. Bitte am Ende „/“ einfügen.
- „Sichere Canvas-URL“ ist das sichere Verzeichnis für die index.html. Bitte am Ende „/“ einfügen.
- „Seitenreiter- Adresse“ ist die URL unter der Ihre externe index.html auf dem Server liegt.
- „Sichere Seitenreiter- Adresse“ ist die sichere externe URL auf die index.html auf dem Server.
- „Page Tab Width“ vergeben Sie die passende Weite von 810 Pixel.

6. wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de
Inhaber Susanne Angeli – Fachbuchautor und eCommerce-Berater
M I T I F R A M E - T A B E I G E N E F A C E B O O K - A N W E N D U N G E N
G E S T A L T E N
Abb.: Grundlegendes für den Kasten/Tab:
6. Damit Ihr Tab nicht das Standard-Bild im Kasten auf der Facebook-Seite anzeigt, laden Sie dazu
ein maximal 75 x 75 Pixel großes Bild hoch. Gehen Sie dazu mit der Maus auf das oben stehende
Platzhalter- Icon für den Tab und klicken dann auf „Bearbeiten“. Auch das kleine Miniaturbild
können Sie ändern, indem Sie auf „Miniaturbild bearbeiten“ klicken. Beide Bilder müssen nicht in
der vorgeschriebenen Größe vorliegen. Ist es größer schneidet Facebook dies automatisch zu. Es
ist jedoch anzuraten, dies vorab anzupassen, damit die Auflösung nicht darunter leidet und das
Bild noch erkennbar bleibt. Auch hier gilt das Copyright am Bild.

7. wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de
Inhaber Susanne Angeli – Fachbuchautor und eCommerce-Berater
M I T I F R A M E - T A B E I G E N E F A C E B O O K - A N W E N D U N G E N
G E S T A L T E N
Abb.: Hochladen und löschen von Tab-Symbolen
iFrame-Tab als Kasten zur Facebook-Seite hinzufügen
Damit Ihre Anwendung auf der Seite auch für Ihre Fans ersichtlich ist, müssen Sie noch ein paar Schritte
durcharbeiten:
1. Sie befinden sich noch auf der Developer-Seite von Facebook und Ihrer Anwendung. Auf der
Übersichtsseite Ihrer Anwendung sehen Sie ganz oben neben den Bildern die App-ID. Kopieren Sie
diese und setzen Sie die Nummernfolge in den folgenden Link ein. Ersetzen Sie dabei IHREAPP_ID
durch die kopierte Nummer. https://www.facebook.com/dialog/pagetab?app_id=
IHREAPP_ID&display=popup&next=http://www.facebook.com/
Abb.: Anwendung freigeben für die Fanseite
2. Öffnen Sie das Pull-Down-Menü unter „Choose Facebook Pages“ und aktivieren Sie Ihre
Anwendung zu der passenden Facebook-Seite per Klick. Abschließend speichern Sie Ihre Angabe
über „Add Page Tab“.
3. Fertig! Überprüfen Sie den neuen Tab/Kasten auf Ihrer Facebook-Seite.
Zum Abschluss können Sie auch den Kasten mit einem anderen Kasten
tauschen, damit der neue Tab unter den ersten vier Kästen angezeigt wird.
Fahren Sie dazu mit der Maus über das Bild des Kastens und klicken Sie auf
den frisch angezeigten Bleistift. Im ersten Feld erscheint in hellgrauer Schrift:
Position tauschen mit. Klicken Sie für den Tausch das gewünschte Feld an. In
diesem Pull-Down-Menü können Sie auch andere Funktionen auswählen, wie
„von den Favoriten entfernen“ oder „Einstellungen bearbeiten“ usw.

8. wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de
Inhaber Susanne Angeli – Fachbuchautor und eCommerce-Berater
M I T I F R A M E - T A B E I G E N E F A C E B O O K - A N W E N D U N G E N
G E S T A L T E N
Fazit
Der Einbau ist nicht ganz trivial. Wenn Sie sich nicht mit HTML auskennen,
empfiehlt es sich, den Vorlagenbaukasten eines Drittanbieters zu
verwenden. Die meist kostenlosen Angebote wie etwa Pagemodo
beinhalten einen kleinen Linkhinweis zum Anbieter, dafür ist ein iFrame-Tab
aber auch schneller realisiert.
Viel Erfolg und herrlich-frische Grüße sendet Ihnen
Susanne Angeli
Autoren Vita
Susanne Angeli
http://www.facebook.com/susanne.angeli
Seit 1998 bin ich mit dem Internet vertraut und erlebte den Start des
eCommerce in Deutschland hautnah mit. Ich betreute seit mehreren Jahren
einen eigenen Online-Shop. Neueste Standbeine sind der Verkauf von eBooks,
Marketingberatung (SEO, Social-Media) und Shopservice für
Kleinunternehmer. Daneben gebe ich Kurse und Seminare im Bereich
Medienkompetenz für Kinder und bin Familienmanagerin bei meinen drei
eigenen Kindern.
Eine Auswahl an weiteren lesenswerten Büchern und eBooks der Autorin
Strategieplan für Social-Media-Marketing - Facebook,
Twitter & Co.
Ca. 82 Seiten – Kindle-Edition Preis (D): 2,99 EUR
Der Online Shop – Handbuch für
Existenzgründer
Gebundene Ausgabe – 4. Auflage
ca. 800 Seiten Preis (D) 39,90 EUR
Der eigene Online
Taschenbuch Ausgabe – 1. Auflage
ca. Seiten 272 Preis (D) 25,00 EUR