Tutorial: Facebook App erstellen

Mit dem Wechsel auf die neue Timeline für Pages hat Facebook einige kleine Änderungen eingeführt. Neu können iFrames 810 Pixel breit sein. Hier eine Anleitung, wie ihr einen iFrame-Tab erstellen könnt:

1. Anwendung erstellen

Einen Tab erstellen Sie unter diesem Link. Damit sie Anwendungen erstellen können müssen sie sich als Facebook Developper registriert haben. Im nun folgenden Dialog geben wir der App einen aussagekräftigen Namen. Der Name ist nur für interne Zwecke wichtig, ihr solltet aber trotzdem einen aussagekräftigen Namen vergeben, damit ihr bei mehreren Apps, die ihr vielleicht später für weitere Tabs erstellen werdet, nicht den Überblick verliert. -> Danach folgt wie üblich „Terms of Use“ und ggf. ein Captcha.

2. Anwendung richtig einstellen

Oben könnt ihr ein Bild für ein Icon einfügen. Sollte das Bild größer als 16×16 pixels sein, so wird es zugeschnitten und umgewandelt. Danach unten nur den „Seitenreiter“ auswählen und folgende Daten eintragen:

Facebook Landing Page

Hier kann der Tab Namen defniiert werden, der dann tatsächlich für den Tab auf der Facebook-Fanseite genutzt wird. Bei Page-Tab URL die Adresse zur erstellten HTML- oder PHP-Datei eigeben. Rsp. nur den Pfad zum Verzeichnis angeben! Dieses File (Breite ist fix: 810 Pixel) wird dann im iframe auf der Facebook-Fansite dargestellt. Wichtig: Es muss auch ein Link zu einem Verzeichnis mit SSL-Unterstützung eingegeben werden. Diese HTTPS-Adresse wird inzwischen von Facebook aus Gründen der Sicherheit zwingend gefordert. Wer kein Geld für ein SSL-Zertifikat ausgeben möchte findet unter diesem Link eine kostenlose Möglichkeit für Speicherplatz mit SSL-Unterstützung.

3. Tab auf Facebook-Fanseite freischalten

Hier der Muster-Link für die Freischaltung:

https://www.facebook.com/dialog/pagetab?app_id=MEINE_APPID&display=popup&next=MEINE_URL

Dieser muss natürlich angepasst werden:

Für MEINE_APPID die ID der App eingeben und für MEINE_URL die URL angeben, welche bei Page Tab URL (siehe Bild oben) gewählt wurde.

Diese Muster-URL sollte dann so aussehen:

https://www.facebook.com/dialog/pagetab?app_id=1234567890&display=popup&next=http://meinedomain.de

Mit dieser URL könnt ihr dann eure App der Page hinzufügen: URL einfach im Browser eingeben und auf den Button “Der Seite hinzufügen”. Das war es!

5. Icon für die Anwendung definieren

Damit eure Apps auch grafisch schön verlinkt sind, kann ein eigenes Icon gewählt werden. Die Idealgrösse für ein derartiges Icon beträgt 111 x 74 Pixel. Wenn ihr die App wie oben beschrieben hinzugefügt habt, könnt ihr ein eigenes Bild festlegen. Und zwar auf der Page alle Apps aufklappen, danach mit der Maus über die betreffende App fahren und auf den Editier-Stift klicken und Einstellungen bearbeiten wählen.

Facebook Anwendungen erstellen

Danach erscheint ein Dialog. Dort bei „Eigenes Reiterbild“ auf „ändern“ klicken und danach könnt ihr das eigene Icon hochladen.

Welches sind die beliebtesten FB Apps?

Weiterempfehlen

image description

Kommentieren

4 Kommentare

image description
  1. Christian Mäder | 7.02.2013 11:31

    Gern geschehen. Für ein paar Facebook Tipps bin ich immer zu haben 😉

  2. Sven | 22.03.2012 18:54

    Vielen Dank fuer den Leitfaden in diesem Artikel. Es ist irgendwie schon interessant, dass ich es mit der Anleitung von FB nicht geschafft habe und nach Konsultation dieses Postings geht es ploetzlich 😉

    lg Sven

  3. Christian Maeder | 21.03.2012 09:29

    Danke für den Tipp!
    Bei Hostpoint ist SSL erst im Business Angebot (24.90 / Monat) enthalten, ansonsten günstiger bei Kreativmedia.ch oder Cyon (im Kiwi Angebot 16.90 / Monat)

  4. Roger | 21.03.2012 09:08

    Noch ein Tipp für SSL-Hosting: Amazon AWS S3 😉

Kommentar schreiben

Please copy the string q1IetC to the field below: