Facebook Developer App
In dieser Artikelserie wird eine Facebook-Anwendung mittels PHP erstellt. Heute geht es um die Registrierung als Entwickler und den Dialogen innerhalb der Developer-App.
Zu nächst einmal müsst ihr die Anwendung Developer nutzen. Da ich bereits angemeldet bin, kann ich euch keine aktuelle Anleitung geben. Wenn du Probleme hast, kannst dir ja mal die veraltete Version ansehen. Zur Not stehe ich natürlich auch für Fragen zur Verfügung 😉
Jetzt beginnen wir mit dem Erstellen der Anwendung! Dazu rufst du die Hauptseite der Developer-App auf. Du kommst dabei auf so eine Seite:
Startseite Facebook Developer App
Neue Anwendung
Wenn du bei diesem Bildschirm auf „Neue Anwendung erstellen“ kannst du dir zunächst den Namen der Anwendung eingeben:
The Facebook Tutorial App
Der Name deiner App darf keine Begriffe enthalten, die man mit von Facebook selbst bereitgestellten Tools verwechseln könnte. Der Name sollte kurz und pregrnant sein. Wenn du einen englischen Namen vergibst, kannst du deine App später auch leicht im Ausland verbreiten.
Sicherheitsabfrage
Über die Anwendung
Nach der Eingabe der Captcha kommst du zur Übersichtsseite deiner Anwendung. Hier kannst du deine Anwendung beschreiben. Du kannst ein Logo und ein Symbol hochland, die Sprache ändern und die Entwickler verwalten.
Website Einstellungen
Der nächste Part sind die Website-Einstellungen. Diese sind hauptsächlich für das OAuth zuständig. Kurz erklärt: Du kennst doch bestimmt diese Facebook-Logins auf einigen Websites, oder? -> OAuth.
Die Anwendungs-ID und der Geheimcode sind für den Datenschutz. Der Benutzer muss einer Anwendung erst erlauben auf bestimmte Dinge zuzugreifen. Mit der Anwendungs-ID kann man schonmal sagen, welche Anwendung jetzt die Daten abruft. Doch da diese ID auslesbar ist, wird muss noch der Geheimcode übergeben werden.
Website
Die Einbindung
Detr wohl schwierigste Teil dürfte die Facebook-Einbindung sein. Auch hier stehen wieder die OAuth Daten. Mit Leinwand (engl. Canvas) ist die Fläche gemeint, auf der später deine Anwendung zu sehen ist.
Die Canvasseite gibt die Url deiner App an. Sie startet mit apps.facebook.com/. Bei Canvas-Url kannst du die Adresse zu dem Verzeichnis auf deinem Webspace angeben, auf dem du deine Anwendung später speichern möchtest.
Es gibt zwei Typen der Einbindung. Zum einen ist das der IFrame, in dem der Benutzer direkt deine Seite zu sehen bekommt. Bei FBML wird die Seite von Facebook abgerufen, verarbeitet und erst dann zum Benutzer gebracht.
FBML bietet einige „Erweiterungen“ für Html & JavaScript, so dass sich eure Seite perfekt ans Facebook-Design anpasst. Diese Variante hat jedoch zwei Nachteile:
- Da die Seiten zwischendurch noch von Facebook geladen und verarbeitet werden muss, ist diese Variante etwas langsamer
- Es sind einige Funktionen von JavaScript aus Sicherheitsgründen gesperrt
Ich persönlich benutze lieber den IFrame, da man dort seine Freiheit hat. Man kann auch dort den Facebook-Look bekommen. Jedoch müssen hier natürlich mehr Benutzerinfos von Facebook abgerufen werden, was bei FBML zum Teil nicht nötig ist.
Facebook Einbindung
Mit Social Discovery kann man festlegen, ob im Stream der Nutzer angezeigt werden soll, dass der Benutzer diese App verwendet – Um die Anwendung auch zu verbreiten solltest du es aktiviert lassen.
Zum Ende der Seite kann man einige Angeben für die Integration in Tabs (auf Profilen) angeben. Ich werde beim Installieren der Facebook-SDK nochmal genauer darauf eingehen.
Sandkasten Modus
Die letzte grade für den Start der App interessante funktion ist der Sandkasten-Modus. Im Sandkasten-Modus können nur die Entwickler der Anwendung diese auch nutzen. Der Sandkasten-Modus kann unter Fortgeschritten (de)aktiviert werden.
Weiter geht’s…
… demnächst. Auf meinem Facebook-Stream erfährst du, sobald der nächste Artikel draußen ist.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Kommentare
jm schrieb am 27.04.2011:
Hallo Stefan, ich habe derzeit ein kleines Problem mit dem Erstellen einer Facebook App... Sobald ich den Captcha eingegeben habe erscheint bei mir folgende Meldung: Sorry, something went wrong. We're working on getting this fixed as soon as we can. Liegt das evtl, an einer Browsererweiterung oder an facebook selbst? Danke für dieses nützliche Tut!
Stefan Wienströer schrieb am 27.04.2011:
Hi, ich glaub Facebook hat heut ein paar Probleme, ist auch extrem langsam. Probiers einfach morgen nochmal. Gruß Stefan
Marcel Fassmann schrieb am 29.04.2011:
Servus, kann es sein, dass das Problem immer noch besteht? MfG
jm schrieb am 29.04.2011:
Jep bei mir funzt es immer noch nicht... Aber es ist doch meistens so: Wenn man gerade Zeit oder Lust hat etwas zu machen, funktioniert etwas nicht...;)
Jerome schrieb am 13.05.2011:
Hi, ich würde gerne selbst eine App erstellen, jedoch muss ich dafür meine Handynummer angeben, was jedoch nur mit einer o2-Sim funktioniert, die ich nicht habe, oder meine Kreditkarte angeben, welche von facebook nicht akzeptiert wird (Postbank prepaid Kreditkarte). Was bleiben mir jetzt für Möglichkeiten? In fbs rotem Kasten steht folgendes: "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." Hilfe
Karim schrieb am 13.06.2011:
Also bei mir war es so, ich habe bei dem roten Kästchen, was du grade beschrieben hast auf Handy geklickt, da musste ich dann nicht erst den Anbieter angeben.
Stefan Wienströer schrieb am 13.06.2011:
Es kann sein, dass Facebook das Verfahren geändert hat. Es treten dort oft Änderungen auf.
Sabine schrieb am 07.08.2011:
Hallo Stefan ich habe mit meiner neuen App probleme: wenn ich auf Pinnwand von freunden posten will. erscheint eine Fehlermeldung! kann es an Canvas FBML/iframe liegen? bei mir ist Inlineframe angegeben...aber ich kann es nicht umstellen. weißt du wo? den beim Developers ist nichts zu ändern.
Stefan Wienströer schrieb am 07.08.2011:
Kannst du mir die Fehlermeldung mal per Mail oder über Facebook schicken? Facebook-Account findest du auf der Startseite, Mail-Adresse im Impressum.
Matz schrieb am 20.10.2011:
hmmm, ohne o2 handy Nummer und Kreditkarte komme ich wohl nicht weiter, schade.... :_(
selami schrieb am 23.12.2011:
hi Stefan, dein tutorial finde ich klasse aber ich habe etwas schwierigkeiten mit der facebook einbinden. ALso wenn ich meine anwendung aufrufe verlangt der dass ich einen sicheren url eingebe. Aber wenn ich dann dort die url gebe bekomme ich immer das fehler meldung. Kann die anwendung nicht öffnen... SSL-Verbindungsfehler Es kann keine sichere Verbindung zum Server hergestellt werden. Möglicherweise liegt ein Problem mit dem Server vor oder es ist ein Client-Authentifizierungszertifikat erforderlich, das Sie nicht haben. Fehler 107 (net::ERR_SSL_PROTOCOL_ERROR): SSL-Protokollfehler Canvas-URL: https://service.akto-metall.de/ Sichere Canvas-URL: https://service.akto-metall.de/ Canvas-Seite: http://apps.facebook.com/face_spaces
Stefan Wienströer schrieb am 25.12.2011:
Haben wir schon auf Facebook geklärt, oder?
Thomas schrieb am 29.01.2012:
Hallo Stefan, ich habe zum Einbinden der Apps in eine (Facebook-)Seite noch eine Frage: Ich nutze auf dieser Seite https://www.facebook.com/pages/Die-10-extremsten-Google-Fails/244299955627391?sk=app_190322544333196 folgende App: https://apps.facebook.com/static_html_plus/ . Nachdem man die App zur Seite hinzugefügt hat, kann man unter Magic eine Custom Icon einrichten, dazu meine Frage: Was ist das überhaupt? Und zweitens: Wie kann man das einbinden, ich steig nicht ganz durch die Anleitung durch?! :D Am besten kannst du mich Auf Facebook kontaktieren und zwar unter https://www.facebook.com/Luebbehuesen
vonBendix schrieb am 16.04.2012:
Hallo Stevie... ich hätte mal ein kleines Problem was einer Lösung bedarf. Ich versuche seit 2 Std. vergeblich eine App zu erstellen als Admin einer Firmenseite www.facebook.com/vonBendix Der Witz dabei ist, das ich beim drücken auf den DevelopersApp "Button" oder Link jedes mal zu unerer Seite gelange statt zur DevelopersApp Seite... gibts da einen Kniff oder etwas zu beachten? Hintergrund ist, es soll eine Fan-Page-App erstellt werden, das jeder neue Fan der "Gefällt mir" drückt auf eine Seite gelangt in der ein Code generiert wird. (auch nur für Fans sichtbar) Kann mir da jemand eine Hilfestellung geben? PHP, JS, MYSQL, Webspace etc. alles kein Ding, jedoch ist die (un)funktionalität bei FB für mich mehr als frustrierend bzw. fehlt mir da der Hintergrund. Über eine hilfreiche Antwort wäre ich extrem dankbar. Viele Grüße.
Stefan Wienströer schrieb am 17.04.2012:
Hi, kannst du mal nen Screenshot von der Seite mit dem Button machen? Gruß Stefan
vonBendix schrieb am 17.04.2012:
Hi, Screenshot ist denke ich überflüssig. Wenn ich auf der Developer Seite von Facebook links den Reiter Apps anwähle und dann rechts im Feld auf die DeveloperApp erstellen gehe und die öffnen (damit verbinden) will, dann komm ich auf unsere Startseite... :o( Ganz gleich welchen Link ich dort klicke, immer das gleiche. Grüße
Stefan Wienströer schrieb am 18.04.2012:
Screenshot ist nötig ;-) Es gibt da so viele Buttons, die man klicken kann.
Sandra schrieb am 02.08.2012:
Hallo Stefan, seit gestern ist unsere FB-Seite online. Leider haben wir das gleiche Problem wie "vonBendix". Auch wir kommen nicht auf die Anwendungsseite der FB Entwickler um eine neue Anwendung zu erstellen, sondern gelangen immer wieder auf unser eigenes Profil. Wie kann ich das Problem lösen? Vorab schon einmal vielen Dank!
Stefan Wienströer schrieb am 02.08.2012:
Hallo Sandra, genau wie bei voNBendix verstehe ich noch nicht 100%tig, was gemeint ist. Meinst du die Profilseite der Anwendung? So eine gibt's nämlich mittlerweile nicht mehr.
vonBendix schrieb am 02.08.2012:
hallo zusammen, wie ich bisher festgestellt habe liegt das daran, das man zum erstellen einer app ein "privates" facebook konto (profil) besitzen muss und auch als admin der jeweiligen seite auf welcher man eine app erstellen möchte - angemeldet bzw. verknüpft sein muss. hoffe ihr könnt mir folgen... ich habe mittlerweile eine app für eine freundin erstellt und dort lief alles problemlos - alle schaltflächen waren da - keine umleitung irgendwohin - alles bestens... hier mal der link dazu: http://www.facebook.com/delicious.naildesign/app_382527571813727 hoffe ich konnt ein wenig weiterhelfen
vonBendix schrieb am 02.08.2012:
also kurz - privates profil (wenn keins vorhanden -> erstellen) mit seite verknüpfen (auf "freischaltung" warten... dann gehts zur developer seite, vorher springt wie sandra bereits sagte der browser immer wieder zur eigene seite... viele grüße
Sandra schrieb am 03.08.2012:
@von Bendix: Vielen Dank für die schnelle Hilfe. So etwas ähnliches hatte ich vermutet... Ich werde es direkt heute ausprobieren und hoffe, dass alles problemlos klappt :-) Also danke nochmal!
Marion schrieb am 12.11.2012:
Hi Stefan, ich habe folgendes Problem und hoffe, du kennst dich damit aus: Wenn ich auf die App klicke und "Link zu diesem Reiter erstellen" auswähle, erscheint folgende Meldung: "Inhalte dieser Nachricht wurden von Facebook-Nutzern als Missbrauch gemeldet". Ich hatte vor kurzem ein Gewinnspiel laufen und meiner Meinung nach bzgl. Datenschutz, Impressum und Gewinnspielrichtlinien alles richtig gemacht. Wie kann man den Missbrauch löschen oder löschen lassen? Vielen Dank für deine Hilfe. Beste Grüße Marion
Stefan Wienströer schrieb am 12.11.2012:
Ist mir noch nicht passiert. Hatte es mal, das Facebook den Sandbox-Modus angeschaltet hatte, weil die Urls zur Privacy nicht vorhanden waren. Schau mal in der Developer-App, vielleihct hast du da nen Hinweis.
Marion schrieb am 12.11.2012:
Hey, das ging aber fix. RESPEKT! ;-) Der Sandkasten-Modus ist überall deaktiviert. Das betrifft leider nicht nur die App mit dem ehemaligen Gewinnspiel, sondern auch ALLE anderen Apps, die mit Developer erstellt sind. Auch das Impressum. Grande catastrophe.. Haben die Developers irgendwas geändert?Unter Andwendungsdestails kommt folgende Meldung. App Detail Page Status: Unsubmitted You have made changes that are not yet submitted App Center Listing Status: Unsubmitted.. Es sieht so aus, als wenn man der Reihe nach folgendes ergänzen muss: Listed Platforms, Primary Icons, Additional Icons, Banner, Optional Banners und Screenshots. Das musste man doch noch nie... Stehe völlig auf dem Schlauch. Hast du noch ne Idee?
Stefan Wienströer schrieb am 12.11.2012:
Wüsst ich sonst auch nicht. Erfüllst du die Richtlinien? https://developers.facebook.com/docs/appcenter/guidelines/ ansonten hilft wirklich nur noch Support anschreiben: https://developers.facebook.com/support/community/
Marion schrieb am 13.11.2012:
Ja, die Richtlinien sind alle i.O. Hilft wohl nur noch den Support anzuschreiben. Dennoch vielen Dank für deine Hilfe. LG
Andreas schrieb am 24.11.2012:
Auf der Suche nach Informationen über Facebook bin ich auf deine Seite gestoßen. Hat mir sehr geholfen. Danke Andreas
Lukanus schrieb am 13.04.2013:
Hallo Anscheined ist deine Anleitung schon so veraltet. Das man da nicht mehr nach gehen kann. Egal was man macht, es springt immer wieder nach https://developers.facebook.com/ Ich würde ja gerne nach Neue Anwendung erstellen hinkommen, aber der Weg dahin ist wohl mittlerweile geheim.
Ingo schrieb am 31.03.2014:
Hallo Stefan, ich versuche mich gerade als Entwickler bei facebook anzumelden. Dazu gehe ich auf der Seite https://developers.facebook.com/?ref=pf auf den Reiter Apps, bestätige die Auswahl 'Register as a Developer', akzeptiere dann die Bedingungen, gehe weiter und muss dann die Telefonnummer eingeben, drücke dann unter 'Get confirmation code' auf 'Send as text' - und dann passiert nichts. Der Code wird weder per e-mail zugesandt, noch per Nachricht in meinem facebook account. Ohne den Bestätigungscode (der auf der gleichen Seite eingegeben werden muss, kann ich mich nicht registrieren. Hast Du eine Idee, wie ich weiterkomme ?
Stefan Wienströer schrieb am 31.03.2014:
Der Code kommt per SMS. Schau mal, ob du auch eine deutsche Nummer angegeben hast (+49).
Ingo schrieb am 01.04.2014:
Vielen Dank Stefan, es scheint geklappt zu haben. Du hast mir sehr geholfen. Ingo
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project