iFrames in Facebook anlegen

In letzter Zeit wurde ich sehr häufig gefragt, wie man iFrames für eine Facebookseite erstellt und hinterlegt und was dabei zu beachten ist. Auch wenn es diverse Anleitungen im Netz gibt, will ich hier versuchen, mal eine kurze Zusammenfassung des Procedere zu erstellen.

Voraussetzungen

Um innerhalb der Fanpage auf Facebook eine Seite als iFrame hinterlegen zu können, müssen bestimmte Voraussetzungen erfüllt sein:

  1. Es sollte ein verifizierter Account bei Facebook vorliegen. Der Account sollte derjenige sein, mit dem man als Admin die Fanpage angelegt hat.
  2. Sinnvoller Weise sollte externer Webspace vorhanden sein, auf der die Seiten hinterlegt werden können, die in die Fanpage inkludiert werden. Noch besser ist, wenn man bei seinem Provider auch den https-Part gebucht hat. Warum … dazu komme ich später noch.
  3. HTML- und CSS-Kenntnisse sind zur Erstellung der zu inkludierenden Seiten von Vorteil.

technische Vorbereitungen

Die erstellten Seiten, die später in der Fanpage auf Facebook als Anwendung hinterlegt werden sollen, können als ganz normale Webseite erstellt werden. Dabei steht es Dir frei, den Style inline oder als externe CSS-Datei anzulegen. Wichtig ist, dass später alles entsprechend auf dem gemieteten Webspace hinterlegt wird.

Die erstellten Seiten sollten maximal 520 Pixel breit. Wird eine Höhe von 800 Pixel überschritten, ergibt sich innerhalb des iFrames ein unschöner Scrollbalken. Ist das für Dich ok, sollte dieser Scrollbalken bei der Seitenbreite mit berücksichtigt werden (Breite dann auf 510 Pixel reduzieren.) Wie man den Scrollbalken auch bei einer Höhe von mehr als 800 Pixel unterdrücken kann, erkläre ich später. Seiten können selbstverständlich auch untereinander verlinkt werden. Externe Links sollten mit target=“_blank“ versehen werden, damit sich diese in einem separaten Fenster öffnen.

Empfehlenswert ist, alle zusammengehörende Seiten innerhalb eines Ordners auf dem Webspace zu hinterlegen.

Wie legt man eine Facebook Anwendung an?

Zur besseren Verdeutlichung gehe ich mal von folgendem Beispiel aus: Es wurde eine start.html, ein Image-Ordner und eine style.css erstellt. Diese Dateien wurden in den Ordner „facebook-seite“ auf der obersten Ebene (Root-Ebene) des Webspace übertragen, so dass die Seite unter http://www.deineseite.de/facebook_seite/start.html zu finden und aufrufbar ist.

Ok … die Vorbereitungen sind so weit abgeschlossen, die Seite(n) sind erstellt und hochgeladen. Wie bekomme ich das Teil nun aber in meine Fanpage?

  1. Anmeldung bei Facebook in dem Account, der als Admin für die Fanpage fungiert.
  2. Aufruf der Seite http://www.facebook.com/developers/.
  3. In der sich öffnenden Seite Klick auf den Button „Erstelle eine neue Anwendung“ rechts oben.
  4. In der darauf folgenden Seite wird der Name der Anwendung hinterlegt. Hast Du vor mehrere Anwendungen (Seiten) zu hinterlegen, sollte der Name eindeutig und sprechend sein. Dieser Name kann später auch noch geändert werden. Und es müssen die Allgemeinen Geschäftsbedingungen von Facebook akzeptiert werden.
    Angabe des Anwendungsnamens und Akzeptanz der Geschäftsbedingungen
  5. Nach dem Klick auf „Anwendung erstellen“ muss auf der Folgeseite ein Sicherheitscode eingegeben werden. Anschließend wird die Bearbeitungsseite für Deine erstellte Anwendung angezeigt.
    Infoseite der Anwendung
  6. Du befindest Dich nun auf der Info-Seite Deiner Anwendung. Hier kannst Du nun oder auch zu einem späteren Zeitpunkt den Namen der Anwendung ändern.
  7. Eine Beschreibung kann, muss aber nicht hinterlegt werden. Hat man mehrere Anwendungen macht dies aber durchaus Sinn, um diese auseinander halten zu können.
  8. Ein ansprechendes Icon sollte hinterlegt werden, da dies später auf Deiner Fanpage vor dem Anwendungsnamen (Seitennamen) in der linken Spalte angezeigt wird. Auch dieses kann nachträglich noch hinzugefügt oder später wieder geändert werden. Das Icon hat eine Größe von 16×16 Pixel. Empfehlenswert ist ein gif-Bild, jpg und png gehen aber auch. Achte darauf, dass Du die Rechte an dem Bild besitzt.
  9. Ein Logo kann auch hoch geladen werden, dieses ist aber nur für den Admin sichtbar.
  10. Sprache auf „deutsch“ setzen.
  11. E-Mail oder URL wählen und entsprechenden Eintrag vornehmen.
  12. Direkten Link zum Impressum bzw. Datenschutzerklärung hinterlegen.
  13. Hier können weitere Administratoren hinzugefügt werden, damit auch andere die Anwendung bearbeiten können. Vorher sollte derjenige aber Dein „Freund“ werden, da nur diese als Admin hinzugefügt werden können.
    Websiteeinstellungen
  14. Jetzt wechselst Du links oben auf die Seite „Website“. Dort findest Du die Anwendungs-ID, die zu einem späteren Zeitpunkt noch mal wichtig wird. Diese ID wird nur einmal vergeben. Nach dem löschen der Anwendung erlischt auch die ID und wird nicht noch einmal vergeben.
  15. Im Part „Site URL“ hinterlegst Du die URL für den Ordner, in dem alle Dateien (start.html, style.css) hinterlegt sind. In meinem Beispiel wäre das http://www.deinseitenname.de. Das Feld „Seiten-Domain“ kann frei bleiben.
  16. Jetzt wechselst Du links oben in den Bereich „Facebook Integration“:
    Einstellungen für die Facebookintegration
  17. Im Feld Canvas Page vergibst Du einen Namen für Deine App (Der Name muss mindesten 7 Zeichen haben und darf nur Kleinbuchstaben, Unterstriche oder Bindestriche enthalten)
  18. Unter Canvas-URL  wird der vollständige Pfad zu dem Ordner hinterlegt, in dem die Inhalte der Seite vorhanden sind. In meinem Beispiel wäre das http://www.deineseite.de/facebook_seite/.
  19. Wenn Du jetzt bei Deinem Provider auch den https Part gebucht hast (siehe 2. Punkt unter Voraussetzungen oben), dann kannst Du dort die URL auch als https hinterlegen. In meinem Beispiel wäre das https://www.deineseite.de/facebook_seite/. Das hat den Vorteil, dass die Seite auch bei allen Facebook-Nutzern angezeigt wird, die in den persönlichen Einstellungen bei Facebook den Secure-Part https angehakt haben und das sind mittlerweile nicht sehr wenige (hoffe ich zumindest ). Existiert der https-Part nicht, fragt Facebook den Nutzer, ob erst auf http gewechselt werden soll, um die Anwendung anzeigen zu können. Ich mache das in Regelfall nicht, da erst nach einer Neuanmeldung wieder der facebookseitige https-Part aktiv wird.
  20. Die iFrame-Größe würde ich auf automatisch anpassen stellen.
  21. Social Discovery auf „Gesperrt“ setzen. (macht nur Sinn für Spiele oder Anwendungen, die von anderen zu Deinem Profil hinzugefügt werden können – die Anwendung, die Du erstellst, ist aber nur für Deine Fanseite)
  22. Dort gibst Du den Namen ein, der später in der linken Navigationsleiste bei Facebook als Dein Seitenname erscheinen soll. In meinem Beispiel „Startseite“. Dieser kann später auch wieder geändert werden.
  23. Bei „URL des Reiters“ kommt nun der vollständige Pfad zu Deiner Seite. In meinem Beispiel http://www.deineseite.de/facebook_seite/start.html. Analog dazu natürlich unter „Secure Tab URL“ die entsprechende https-Variante (https://www.deineseite.de/facebook_seite/start.html).
  24. GANZ WICHTIG: Button „Änderungen speichern“ klicken !!!!!

So … damit wäre der Part zur Anlage der Anwendung abgeschlossen. Jetzt geht es daran, die externe Seite in die Facebookseite zu inkludieren.

Anwendung zur Fanseite hinzufügen

Nach dem speichern der Anwendung müsstest Du Dich wieder auf der Anwendungsübersicht befinden und die aktuell angelegte Anwendung ist angelegt.

  1. Jetzt klickst Du rechts auf den Link „Anwendungs-Profilseite“. An dieser Stelle kannst Du auch später unter dem Link „Einstellungen bearbeiten“ die Inhalte der Anwendung bearbeiten.
  2. Auf der nächsten Seite klickst Du auf der linken Seite auf den Link „Zu meiner Seite hinzufügen“.
  3. Es öffnet sich ein PopUp, sofern Du als Administrator mehrere Seiten betreibst. Dort kannst Du die Seite auswählen, zu der die Anwendung hinzugefügt werden soll. Dort klickst Du auf den entsprechenden Button der Seite „Einer Seite hinzufügen“. Über „Schließen“ das Fenster schließen.
  4. Nun auf die entsprechende Seite wechseln und in der linken Navigationsleiste taucht jetzt der Punkt „Startseite“ mit Deinem hinterlegten Icon auf, sofern alles korrekt gelaufen ist.

Nach Klick auf den Link „Startseite“ sollte der Inhalt der Seite start.html, den wir anfänglich auf den Server gespeichert haben, in Facebook angezeigt werden. Et Viola!

Für die Anlage von weiteren Seiten müsstest Du das ganze Procedere nochmals durchlaufen. Selbstverständlich können die Seiten auch untereinander verlinkt werden.

Um den Begriff „Startseite in zum Beispiel „Willkommen“ zu ändern musst Du innerhalb der Fanpage als Admin einfach auf „Seite bearbeiten“ gehen und dann links auf den Link „Anwendungen“. Die entsprechende Anwendung heraussuchen und unterhalb der Anwendung auf den Link „Einstellungen bearbeiten“ klicken. Es öffnet sich ein kleines Fenster, in dem der Begriff dann abgeändert werden kann.

Seite länger als 800 Pixel ohne Scrollbalken anzeigen

Um eine Seite, die länger als 800 Pixel ist ohne Scrollbalken anzuzeigen, muss genau hinter dem body-Tag der html-Seite, die auf den Server hochgeladen wird und später zur Anzeige gebracht werden soll, folgender Code hinterlegt werden:

<div id="fb-root">
<script src="http://connect.facebook.net/de_DE/all.js"></script>
<script>
FB.init({
appId : 'Hier kommt Deine App-ID rein',
status : true,
cookie : true,
xfbml : true
});
FB.Canvas.setAutoResize(91);
</script>
</div>

An der entsprechenden Stelle (Zeile 05) muss Deine App-ID (siehe Punkt 14) hinterlegt werden.

Wenn man nur eine oder sehr wenige Seiten anlegen will und das Ganze auch nur für eine Fanpage, dann kann man das auch über eine bereits bestehende Anwendung machen (iFrameWrapper). Wie das geht und was es für Vor- und Nachteile hat, erkläre ich in einem späteren Beitrag.

Aber nun viel Erfolg!

VN:F [1.9.20_1166]
War der Beitrag ok? Dann gib ein paar Sterne.
Bewertung: 0.0 / 5 (0 Bewertungen abgegeben)

5 Kommentare Schreibe einen Kommentar

  1. Hey, danke für deine Anleitung. Aber wie kann ich die Facebook_App Anwendungen untereinander verlinken? Funktioniert scheinbar mit der App-Url nicht. Bei mir kommt dann entweder eine weiße Seite oder gar nichts.

    • Hallo Martin,
      gern

      Eigentlich müsste dies funktionieren. Ich werde dies mal testen. Ich gehe jetzt mal davon aus, dass bei Dir keine „echte“ Anwendung dahinter liegt, sondern wie bei mir defacto eine inkludierte Seite.

      Ich würde jetzt den Link zur App-URL kopieren und in eine andere Seite, die auch als Anwendung hinterlegt ist, als Link einbauen. Das ist doch das, was Du umsetzen möchtest. Oder?

  2. Ja genau, dies möchte ich umsetzen scheint aber nicht zu funktionieren und es macht mich gerade wahnsinnig!

    Die App Url normal in die Seite eingebaut, die auf eine andere Seite verlinkt. Per „Link im neuen Tab öffnen im FF geht es“ nur mit einem normalen Klick auf diesen Link kommt eben die leere Seite.

    • Der Vollständigkeit halber will ich hier nochmal erwähnen, dass in dem Fall von Martin der entsprechende Link das Attribut target=“_top“ erhalten muss. Dann sollte es funktionieren.

  3. Pingback: Neues Script für lange iFrames in Facebook Tabs notwendig | Couchgelaber

Schreibe einen Kommentar