In diesem Beitrag wird erläutert, wie man eine iFrame Anwendung installiert, um eigene Tabs und Webinhalte in der Facebook-Seite anzeigen zu können. Der Beitrag ist der zweite von drei Teilen, welche sich mit dem Thema Fanseiten-Tabs mit einer iFrame Anwendung befassen. Die anderen Teile sind im folgenden verlinkt:
Einführung: Fanseiten-Tabs mit einer iFrame Anwendung erstellen
Teil 1/3: Erstellen von Inhalten, welche im iFrame in Tabs angezeigt werden
Teil 2/3: Einrichtung und Installation einer iFrame Anwendung
Teil 3/3: iFrame Anwendung zu einer Facebook-Seite hinzufügen
In diesem Artikel wird gezeigt, welche Einstellungen und Installationen nötig sind, um die iFrame Anwendung in der eigenen Facebook-Seite zu nutzen.
Zu beachten: Facebook hat kürzlich das Layout von Facebook-Seiten umgestellt. Dabei wurde unter anderem im Kopf der Seite ein Foto-Stream eingefügt, und die Tabs/Reiter der Seite wurde von oben auf die linke Seite genommen. Die iFrame Anwendung funktioniert nur mit dem neuen Layout der Facebook Seiten. Dieses neue Layout wird ab dem 1. März für alle Facebook-Seiten umgesetzt. Bis dahin muss es vom Seiten-Administrator willentlich freigeschaltet werden. Wer die iFrame Anwendung nutzen will, muss also sicher sein, dass er bereits das neue Seiten-Layout verwendet.
1. Installation der iFrame Anwendung
Um eine Facebook Anwendung zu erstellen, muss zuerst eine Entwickler-App erstellt werden. Dafür wird folgende Adresse aufgerufen: http://facebook.com/developers. Erstellt man das erste Mal eine Anwendung, muss man Facebook zuerst Zugriff auf die eigenen Informationen geben. Dazu klickt man „erlauben“.
Als nächstes wird eine neue Anwendung erstellt. Der Button hierfür findet sich im rechten oberen Teil der Seite:
In der folgenden Dialog-Box kann der Anwendung einen Namen gegeben werden. Dieser wird später als Anzeigename der Anwendung verwendet und sollte deshalb aussagekräftig sein.
Hat man den Namen bestimmt, den allgemeinen Geschäftsbedingungen zugestimmt und „Anwendung erstellen“ gedrückt, erscheint eine Sicherheitskontrolle, welche man ausfüllen muss, um fortfahren zu können.
2. Konfiguration der Anwendung
Die nächsten Formulare beschäftigen sich alle mit der Konfiguration und den Eigenschaften der neuen Anwendung. Die möglichen Einstellungen sind hier vielfältig, wir möchten uns aber auf die für unsere Zwecke wichtigen Punkte konzentrieren.
Name der Anwendung: Diesen haben wir bereits definiert, können ihn hier auf Wunsch aber nochmals ändern.
Symbol: Ein Vorteil der neuen Anwendung ist, dass man selber ein Icon definieren kann, welches auf der linken Seite in der Navigation für die neuen Tabs angezeigt wird. Dieses hat die Grösse 16×16 Pixel, und kann mit einem beliebigen Grafikprogramm erstellt werden. Wird bei Symbol kein eigenes Icon hochgeladen, wird das Standard-Icon mit den zwei Zahnrädern verwendet.
Die wichtigsten Einstellungen für unsere neue Anwendung sind dann in der Rubrik „Facebook-Einbindung“ zu finden.
Canvas URL: Hier wird der Server definiert, auf dem unser Webinhalt liegt, welchen wir in unser iFrame einfügen wollen. Wie diese Files aussehen können, wurde im ersten Teil unseres iFrame-Artikels erläutert.
Name des Reiters: In diesem Feld wird der Name des neuen Tabs definiert, welcher im linken Teil unserer Facebook-Seite erscheinen wird. Dieser Name kann bis zu 16 Zeichen lang sein.
Page Tab Type: Hier wird bestimmt, dass der neue Reiter mit einem iFrame gefüllt wird.
URL des Reiters: Hier wird das File definiert, welches im angegebenen Verzeichnis standardmässig angezeigt wird. Dies wird normalerweise index.hmtl oder default.html benannt. Hinweis: Bei einigen Servern funktioniert die Anwendung nicht, wenn es sich dabei um eine .html-Datei handelt. Dies merkt man an der Fehlermeldung, dass der Server nicht berechtigt ist, Daten per POST zu übergeben. In diesem Fall hilft es, wenn man der index.html Datei, einfach die Endung .php gibt.
Sind alle gewünschten Einstellungen getätigt, kann das ganze mit „Änderungen speichern“ bestätigt und abgespeichert werden. Die Anwendung ist damit erstellt. Wie sie einer bestimmten Facebook-Seite zugeordnet werden kann, wird im dritten Teil dieser Serie erläutert.
Hallo,
ich bin gerade darüber, soetwas zu erstellen, wenn ich aber auf Anwendung erstellen klicke kommt:
„Dein Konto muss bestätigt sein, bevor du diese Aktion tätigen kannst. Bitte lasse dein Konto bestätigen, indem du deine Handy oder Kreditkarte hinzufügst.“
Das verstehe ich nicht, ich nutze mein Konto seit ein fast zwei Jahren, was muss ich da bestätigen?
Naja, egal. Erst wollte ich über’s Handy bestätigen, dort kann man als Netzbetreiber aber nur O2 auswählen -> habe T-Mobile -> Ich erhalte den Bestätigungscode nicht.
Also habe ich meine Kreditkarte angegeben, alles bestätigt. Und nun passiert ..nichts? Wenn ich jetzt auf Anwendung erstellen klicke bekomme ich wieder die gleiche Meldung :/
.. es tut mir Leid, ich war zu voreilig – jetzt geht’s 😉
hallo
die devolpers seite schaut seit oktober komplett anders aus..
bez bei mir..
alle versuche eine fanseiten zum laufen zu bringen scheitern bei mir
gibt es einen aktuelle anleitung wie man die neuen fanseiten einbinden kann.
danke schön für die mühe
max
Hallo Max
Leider kann ich dir in dieser Frage nicht weiterhelfen, da ich im Moment mit anderen Projekten beschäftigt bin, und mich auch zuerst wieder in die Facebook-Neuerungen einarbeiten müsste. Viel Erfolg beim Suchen!
Grüsse Christoph
Update 3. November 2011: Ich bin heute zufällig über einen Blogbeitrag gestolpert, welcher den Facebook-Neuerungen wohl Rechnung trägt und die Implementierung eines iFrame Tabs in der neuen Facebook-Umgebung beschreibt. Wenn ich einmal Zeit finde werde ich meinen Artikel auch noch entsprechend updaten. Hier der entsprechende Link:
http://www.hyperarts.com/blog/tutorial-add-an-iframe-application-to-your-facebook-fan-page-fall-2012/