I frame tabs-script-2

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

wallaby IT-Systems ++ http://wallaby.de ++ [email protected]

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.




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.




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.




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.




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.




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.




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

Business

I frame tabs-script-2