Wie kann ich Facebook iframe-Tabs ertsellen

Facebook iframe-Tabs: die Erstellung individueller Fanseiten-Reiter mit eigener Anwendung.

Facebook iframe-Tabs: individuelle Fanseiten-Reiter mit eigener Anwendung erstellen

Anfang März 2011 hat Facebook das Erstellen von sogenannten iframe-Tabs als individuelle Gestaltungsmöglichkeit von Fanseiten eingeführt. Mit dem neuen Layout Chronik/Timeline gibt es sogar noch mehr Platz für Ihre individuellen Reiter. Hier erfahren Sie wie’s geht:

Dazu nötig sind:

  • externer Webspace (z.B. dort, wo Ihre reguläre Website auch liegt)
  • ein SSL Zertifikat
  • 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. (Möchten Sie, dass Ihre Inhalte im Facebook-Reiter zentriert positioniert werden, sollten Sie nur 780px Breit veranschlagen.)

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. Möchten Sie aus einem Reiter in einen anderen verlinken, nutzen Sie target=“_top“. 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 am Anfang dieses Tutorials 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, also 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-Ansicht 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 https://meinewebseite.de/meinordner/index.html

3. Öffnen Sie in einem neuen Browser-Tab die Developer-Seite von Facebook http://www.facebook.com/developers/

Anwendungsoberfläche für Facebook-Apps

4.    Klicken Sie oben auf „Apps“ und dann „Create new app“ in dem dann öffnenden Popupfenster klicken Sie auf „Facebook Canvas“

Für welchen Typ soll die App sein?

5. Geben Sie Ihrer Anwendung einen Namen (kann man jederzeit wieder ändern und ist nach außen nicht sichtbar), und Klicken Sie auf den Button „Create a new APP-ID“

6.Jetzt erscheint ein Code welcher nach dem <body> eingesetzt werden muss.

Der Code für die Facebook-App

7.Im Unteren Bereich der Seite muss dann noch der Link zur Webseite eingetragen werden.

Seite eintragen ist wichtig!

8. Klicken Sie ganz unten auf der Seite „Open your App“ um eine Vorschau zu erhalten.

Vorschau zur Facebook-App

9. Nun klicken Sie unten auf den Link „Skip to Developer Dashboard“ um mit der Einrichtung fortzufahren.

Einstellungen im Appcenter

1. Im Tab Setting muss die Kontakt-Emailadresse eingetragen werden. Wichtig ist das diese E-Mailadresse bei Facebook registriert ist also nehmen Sie die Adresse von ihrem Benutzerkonto.

Daten im App-Center

2. Im Unteren Bereich müssen Sie einmal auf „+ Add Plattform“ klicken und wählen Sie dann „Page Tab“ aus.

Auswahl zusätzlicher Plattformen

3. Füllen Sie nun die neuen Felder „Page Tab URL“ und „Secure Page Tab URL“ mit dem Link zum Facebookinhalt aus.

4. Im Tab Status & Review kann die App nun oben Online gestellt werden.

Ihre Anwendung zu Ihrer Fanseite hinzufügen

1. Modifizieren Sie den folgenden Link mit Ihren Parametern: 

https://www.facebook.com/dialog/pagetab?app_id={YOUR_APP_ID}&redirect_uri=https://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 Tab erscheinen:

NACHTRAG

Trotz korrektem Befolgen der hier genannten Schritte kann es zu Anzeigefehlern kommen:

Method POST not allowed

Problem: Die externen Inhalte werden im iframe-Tab nicht angezeigt, stattdessen erscheint eine Fehlermeldung wie: „Method Not Allowed The requested method POST is not allowed for the URL“

Lösung: Benennen Sie die einzubindenden Seiten von .html um in .php (auch Verlinkungen innerhalb des Tabs ändern, falls vorhanden!). Dann sollte alles normal angezeigt werden.

  • Erstellt am .

Unsere Kompetenzen


Alexander´s Webdesign

Mosebergstraße 1
37441, Bad Sachsa

+49-(0)-5523-952 89 98
+49-(0)-160-932 435 66
Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

Montag - Freitag 09:00 - 18:00 Uhr

Kundenstimmen

So bewerten uns unsere Kunden.

4.8 / 5 bei 25 Stimmen


  • Folgen Sie uns

Copyright © 2003 - 2019 Alexander´s Webdesign - Alle Rechte vorbehalten.