I frame tabs-script-2
0 gefällt mir632 aufrufe
Das Dokument bietet eine Schritt-für-Schritt-Anleitung zur Erstellung von eigenen iframe-Tabs für Facebook-Seiten, einschließlich Überlegungen zur Inhaltserstellung und technischen Anforderungen. Es werden Hinweise zur Gestaltung von HTML- und CSS-Dateien gegeben, sowie der Prozess zur Integration dieser Tabs auf einer Facebook-Seite erklärt. Abschließend wird auf die Notwendigkeit hingewiesen, grundlegende HTML-Kenntnisse zu besitzen oder Alternativen zu nutzen, um den Einbau zu erleichtern.
I frame tabs-script-2
- 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