MIT IFRAME-TAB EIGENE FACEBOOK-ANWENDUNGEN

GESTALTEN
VON SUSANNE ANGELI 2013 VERSION 2

STEP 1 Vorberlegung STEP 2 Daten erstellen STEP 3 iFrame einbauen

MIT IFRAME-TAB EIGENE FACEBOOK-ANWENDUNGEN

GESTALTEN

FTER MAL WAS N EUES

Mit der neu ausgerollten Chronik fr Facebook-Seiten fhrte Facebook eine individuellere Gestaltung von Fanseiten ein. Die Tabs sind als zustzlicher Kasten unterhalb des Titelbildes platziert. Bedenken Sie, es sind 12 Ksten mglich. In jeden Kasten/Tab knnen Sie auch eigene erstelle HTML-Seiten einbauen. Um solche sogenannte iFrame-Tabs zu erstellen, mssen Sie die Inhalte vorbereitet haben. Wie dies funktioniert und was Sie ber die Einbindung auf Ihre Facebook-Seite wissen mssen, erklrt Ihnen diese Kurzanleitung.

STEP 1: Vorberlegungen fr iFrame-Tab Um einen eigenen iFrame-Tab zu erstellen bentigen Sie einerseits den Inhalt (.html) und andererseits das Design (.css). Dafr bedarf es entweder Kenntnisse in HTML/CSS oder Sie verwenden fertige Template-Vorlagen aus dem Netz, die Sie mit Ihren Inhalten fllen. Sie knnen auch das Design (CSS) Ihrer Website verwenden, das Sie mit dem entsprechenden Inhalt fr den Facebook-Tab erweitern, basierend auf einer index.html. Bedenken Sie folgende weitere Punkte:

Sie bentigen fr die iFrame-Tab-Datei einen externen Webspace (evtl. Ihren Webspace der Website) Tipp: Vergessen Sie nicht die zustzliche Datei ber https! SSL einschalten!! Zum Erstellen der HTML-Dateien fr die Tabs ist ein WYSIWYG-HTML-Editor zu empfehlen. die Seite sollte eine Breite von max. 800 Pixel und eine max. Hhe von 800 Pixel vorweisen. Machbar sind zwar 810 Pixel in der Breite, doch sollten Sie dem rechten Scrollbalken vorsorglich Platz einrumen, der bei der voll ausgenutzten Hhe erscheint. und Sie mssen ein verifiziertes Privatkonto bei Facebook fhren, welches Sie auch als Admin auf Ihrer Fanseite verwenden.

wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de Inhaber Susanne Angeli Fachbuchautor und eCommerce-Berater

MIT IFRAME-TAB EIGENE FACEBOOK-ANWENDUNGEN

GESTALTEN

berlegen Sie sich Ihre Inhalte berlegen Sie, was Sie einem neuen Fan mitteilen mchten, um dann auch auf den "Gefllt mir"-Button zu klicken! Ein Ansatz wre, Ihr Unternehmen vorzustellen und auf den Mehrwert fr neue Fans aufmerksam zu machen und was diese hier erwartet. Wie zum Beispiel: Fans erhalten frher detailliertere Infos ber Ihr Unternehmen, die sie ansonsten nicht erhalten wrden. 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 mchten (siehe Abbildung Hamburger FacebookSeite). Verteilen Sie den Inhalt auf verschiedene Tabs, so gestalten Sie einen Tab als Willkommensseite und verlinken darin auf die anderen erstellten Tabs. Siehe Beispiel fr eine Willkommensseite der Hansestadt Hamburg.

Abb.: Verschieden Tabs bieten unterschiedliche Inhalte mit Mehrwert an, z.B. Jobsuche, Wohnungen, Tickets etc.

wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de Inhaber Susanne Angeli Fachbuchautor und eCommerce-Berater

MIT IFRAME-TAB EIGENE FACEBOOK-ANWENDUNGEN

GESTALTEN

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 gehren. Idealerweise sollte ein solcher Tab also gleichzeitig anlocken und ausfiltern.

STEP 2: Datei/en erstellen

Fr einen individuellen Tab bentigen Sie eine index.html und evtl. eine CSSDatei, die Sie auf Ihrem Webspace in einen Ordner ablegen. Wie Sie darauf ber die Facebook-Seite zugreifen und als Tab einbauen, erfahren Sie im nchsten Punkt. Diese Datei kann sowohl Textlinks als auch ein Men mit externen oder internen Links enthalten, die auf weitere Tabs fhren, 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 eingeschrnkten Gre des Tabs nicht besonders schn aussieht. Mchten Sie einen Tab mit einem Men zu zustzlichen Unterseiten gestalten, bentigen Sie fr jede Unterseite eine eigene Datei auf dem Webspace im gleichen Ordner. Fr 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 wren Stories, Impressum, Tutorials, Kontakt usw. die Sie mit den gleichlautenden Dateinamen abspeichern: impressum.html, stories.html, kontakt.html usw.

wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de Inhaber Susanne Angeli Fachbuchautor und eCommerce-Berater

MIT IFRAME-TAB EIGENE FACEBOOK-ANWENDUNGEN

GESTALTEN

STEP 3: iFrame-Tab anlegen 1. Die erstellten Dateien fr 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 fr den Tab einen Namen und besttigen Sie die Allgemeinen
Geschftsbedingungen von Facebook. Der Name ist nur fr Sie ersichtlich und lsst sich jederzeit abndern. Klicken Sie auf Weiter und geben Sie anschlieend den Sicherheitscode ein.

Abb.: App-Name fr die Anwendung/Kasten

5. Ein neues Fenster wird angezeigt. Mit einem Klick auf die entsprechende Aufzhlung mit Hacken
knnen Sie die einzelnen Eingabefelder ffnen. Fllen 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 fr Ihre index.html. Bitte am Ende / einfgen. - Sichere Canvas-URL ist das sichere Verzeichnis fr die index.html. Bitte am Ende / einfgen. - 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.

wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de Inhaber Susanne Angeli Fachbuchautor und eCommerce-Berater

MIT IFRAME-TAB EIGENE FACEBOOK-ANWENDUNGEN

GESTALTEN

Abb.: Grundlegendes fr 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 groes Bild hoch. Gehen Sie dazu mit der Maus auf das oben stehende Platzhalter- Icon fr den Tab und klicken dann auf Bearbeiten. Auch das kleine Miniaturbild knnen Sie ndern, indem Sie auf Miniaturbild bearbeiten klicken. Beide Bilder mssen nicht in der vorgeschriebenen Gre vorliegen. Ist es grer schneidet Facebook dies automatisch zu. Es ist jedoch anzuraten, dies vorab anzupassen, damit die Auflsung nicht darunter leidet und das Bild noch erkennbar bleibt. Auch hier gilt das Copyright am Bild.

wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de Inhaber Susanne Angeli Fachbuchautor und eCommerce-Berater

MIT IFRAME-TAB EIGENE FACEBOOK-ANWENDUNGEN

GESTALTEN

Abb.: Hochladen und lschen von Tab-Symbolen

iFrame-Tab als Kasten zur Facebook-Seite hinzufgen

Damit Ihre Anwendung auf der Seite auch fr Ihre Fans ersichtlich ist, mssen 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 fr 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. Abschlieend speichern Sie Ihre Angabe ber Add Page Tab.

3. Fertig! berprfen Sie den neuen Tab/Kasten auf Ihrer Facebook-Seite.

Zum Abschluss knnen Sie auch den Kasten mit einem anderen Kasten tauschen, damit der neue Tab unter den ersten vier Ksten 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 fr den Tausch das gewnschte Feld an. In diesem Pull-Down-Men knnen Sie auch andere Funktionen auswhlen, wie von den Favoriten entfernen oder Einstellungen bearbeiten usw.

wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de Inhaber Susanne Angeli Fachbuchautor und eCommerce-Berater

MIT IFRAME-TAB EIGENE FACEBOOK-ANWENDUNGEN

GESTALTEN

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, dafr ist ein iFrame-Tab aber auch schneller realisiert. Viel Erfolg und herrlich-frische Gre 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 fr Kleinunternehmer. Daneben gebe ich Kurse und Seminare im Bereich Medienkompetenz fr Kinder und bin Familienmanagerin bei meinen drei eigenen Kindern. Eine Auswahl an weiteren lesenswerten Bchern und eBooks der Autorin

Strategieplan fr Social-Media-Marketing - Facebook, Twitter & Co. Ca. 82 Seiten Kindle-Edition Preis (D): 2,99 EUR

Der Online Shop Handbuch fr Existenzgrnder 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

wallaby IT-Systems ++ http://wallaby.de ++ service@wallaby.de Inhaber Susanne Angeli Fachbuchautor und eCommerce-Berater