In unserer Reihe für Facebook Entwickler erläutern wir verschiedenste Themengebiete der Facebook App-Entwicklung. Wir wollen euch zeigen, dass Facebook App Entwicklung nicht kompliziert ist. Im ersten Teil nehmen wir uns die Grundlagen vor, erläutern die wichtigsten Begriffe und Webseiten, die bei der Facebook App Entwicklung relevant sind. In den weiteren Teilen werden Graph API, Authentifizierung, Wall-Posts, [...]
Grundsätzliches Vorgehen bei der Facebook App Entwicklung: “Hello World”
Jede Facebook App-Entwicklung läuft in folgenden Schritten ab:
- Anlegen eines Ordners für die App auf dem eigenen Webserver
- Anlegen und Konfigurieren einer Facebook Applikation
- Hinzufügen der Facebook Applikation zu einer Test-Fanpage
Facebook Entwickler Grundbegriffe
Wer den Sprung zum Facebook Entwickler gehen möchte kommt an einigen Grundbegriffen nicht vorbei. Um eine Übersicht zu bieten habe ich diese für euch zusammengetragen.
Facebook Page-Tab
Jede Fanpage hat mehrere Menü-Punkte – die sogenannten Page Tabs. Wer mehr will als eine Pinnwand und den Info-Tab muss zusätzliche Applikationen auf seiner Fanpage installieren. Der Page-Tab Inhalt wird dabei via iframe auf einer Breite von 520px eingebunden. Wenn Sie ihre normale Homepage also auf die Ansicht mit 520px Breite optimieren, können Sie diese optimal in Facebook einbetten. Das ist innerhalb von 5min gemacht.
Im Page-Tab können Sie jederzeit abfragen, ob der Besucher Fan oder Administrator von der Seite ist. Sie können seine Altersgruppe und Sprache erfragen. So können Sie ihre Inhalte optimal auf den Besucher ausrichten und ein sogenanntes Fangate bauen (unterschiedliche Inhalte für Fans und Nicht-Fans).
Facebook Canvas-Page oder Leinwand-Seite
Auf der Facebook Canvas Page können Facebook Applikationen entweder mit einer festen Breite von 760px eingebettet werden oder sich automatisch der Auflösung des Nutzer anpassen. Die Canvas Page ist kein Teil einer Fanpage und steht extern. Zwar kann man von ihr auf eine Fanpage verlinken (oder anders herum), aber man kann ohne Authorisierung auf keine Fanpage-Daten wie z.B. ist der Nutzer Fan/Admin der Fanpage zugreifen.
Facebook App-Secret oder App Geheimnis
Mittels des App-Secrets können Nutzerdaten abgefragt werden, die der Nutzer der App freigegeben hat. Nehmen wir an ein Hacker schafft es ein App-Secret einer großen Applikation wie Farmville zu stehlen. Dann kann er für alle ihm bekannten Farmville-Nutzer, die Daten abfragen, die diese freigegeben haben. Beängstigend oder? Deshalb, sollte das App-Secret auch ein Geheimnis bleiben!
Facebook Api-Key
Der Facebook Api-Key wurde kürzlich von Facebook abgeschafft bzw. ist auf der neuen Developer Oberfläche nicht mehr einsehbar. Ich habe den Api-Key bisher nur zur Installation von Applikationen auf Fanpages gebraucht. Dieser wurde jetzt aber komplett durch die Facebook App-Id ersetzt.
Zur Installation der Applikation mit der ID 112233 (Api-Key 665544) auf der Fanpage Id 998877 konnte der Nutzer bisher folgenden Link klicken:
http://www.facebook.com/add.php?api_key=665544&pages=1&page=998877
nun wird der Api-Key einfach durch die Page-Id ersetzt. Klappt wunderbar:
http://www.facebook.com/add.php?api_key=112233&pages=1&page=998877
Wichtige Facebook Links für Entwickler
Ich habe hier einige Links zusammengetragen, die ich regelmäßig benutze und lese, um auf dem Laufenden zu bleiben.
Offizielle Facebook Links
- developers.facebook.com: Verwaltung der eigenen Applikationen, offizielle Dokumentation. Die allerwichtigste Anlaufstelle für Facebook Entwickler
- Facebook Test-Konsole: Offizielle javascript Facebook Testkonsole
- Graph API Explorer: Mit dem Graph API Explorer lässt sich sehr leicht verstehen wie und welche Informationen man von Facebook abfragen kann. Einfach mal ein paar Minuten damit rumexperimentieren…
- Github Facebook PHP SDK: Software Development Kit. Ohne diese Bibliothek kommt kein Facebook Entwickler aus.
- Fanpage erstellen: Mit dieser Seite kann eine Fanpage erstellt werden
- Facebook Profil zu Fanpage migrieren: Wer den Fehler begangen hat und sein Unternehmen per Profil auf Facebook vermarktet, kann seine Freunde hiermit in Fans konvertieren.
- Facebook Preferred Developer Program: Wer viele Facebook Integrationen, Apps, … sein eigen nennen kann, kann versuchen hier den Facebook Olymp zu erklimmen. Ganz sicher nicht einfach…
Facebook Blogs
- allfacebook.de: Der größte und wohl bekannteste Facebook Blog (früher facebookmarketing.de). Die Betreiber Philipp Roth und Jens Wiese bloggen täglich über die neusten Facebook Entwicklungen. Durch den Verkauf des Blogs an Webmediabrands ist der Blog stark mit allfacebook.com vernetzt.
- allfacebook.com (englisch): Die Mutter aller Facebook-Blogs. Alle Trends, Gerüchte und Entwicklungen erscheinen höchstwahrscheinlich hier zuerst.
- insidefacebook.com (englisch): Regelmäßige Facebook Updates und Zahlen zu Facebook Top-Apps. Mittlerweile auch Teil von Webmediabrands.
- abouttheweb.de: Viele Facebook Developer Tutorials von Michael Schakulat. Hier kann man was lernen…
- Thomas Hutter’s Blog: Thomas Hutter ist einer der bekanntesten deutschprachigen Facebook Marketing-Blogger. Regelmäßige Gastbeiträge bieten ein breites Spektrum an Themen.
- facebookbiz.de: Blog des Berliner Unternehmens Berliner Brandung. Regelmäßige Updates zu Facebook Marketing Themen
Sonstige Facebook Links
- Facebook Developer Wiki: Inoffizielles Developer Wiki. Zwar bisher wenig User, aber die Beispiele haben mir sehr weitergeholfen.
Fazit
Der Einstieg in die Facebook Entwicklung ist nicht schwer. Die erste iframe Integration ist in wenigen Minuten gemacht. Im nächsten Teil gehe ich dann auf die sozialen Komponenten der Facebook Entwicklung ein. Zwar ist es ganz schön meine Homepage einzubetten, aber ein personalisiertes Nutzererlebnis durch die Verwendung von Facebook Daten kann ich damit noch nicht erzeugen.
Wie immer freue ich mich auf eure Kommentare, Fragen, Diskussioen, Anregungen.
Hi Sebastian,
dein Tutorial ist klasse, endlich! nach wochenlangen suchen kurz und knapp erklärt!
Und es funktioniert!
Danke.
Hallo,
Da hast du schön alles wichtige für die ersten Schritte zusammengetragen.
Auch deine Linkliste ist Top. Genau so gehe ich bei der Entwicklung meiner Inhalte momentan auch vor. Freue mich bereits auf deine weiteren Tutorials. Speziell den Aspekt, Inhalte speziell für Fans zur Verfügung zu stellen. Schön wäre vielleicht auch ein Live-Beispiel, indem Fans durch laufende Angebote, Umfragen, Fotos etc. Welche man durch dUrch den Like-Button pinnen sollte um weitere Inhalte etc. Zu bekommen, bei der Stange zu halten. Gerade dieses Zusammenspiel zwischen Nutzerdaten und den damit möglichen Einsatzgebieten ist oft ein wenig verwirrend. Viele geben sich Mühe bei der Entwicklung der eigenen Anwendung, disqualifizieren sich dann jedoch selbst durch eine unprofessionelle Anwendung der gebotenen Marketingmöglichkeiten. Genug Blabla. Weiter so.
Hi Chris,
vielen Dank für das Feedback. Ich nehme an du spielst auf das Fangate an. Unterschiedliche Inhalte für Fans und Nicht-Fans. Der Grundstein der meisten professionellen Fanpages.
Damit werde ich mich im nächsten Teil beschäftigen: Entschlüsselung des $_REQUEST['signed_request'] Parameters, sowie sowie die Authentifizierung. Da kommen dann die Nutzerdaten ins Spiel…
Gruß Sebastian
Hi Sebastian,
danke für den Beitrag, werde entsprechend auf meiner Webseite verlinken.
Wie wirds in Zukunft aussehen bzgl. Datenschutz? (in Anspielung auf die laufende Debatte und der drohenden Bußgelder für Unternehmen mit Fanpages?)
Hi Robert,
zur rechtlichen Komponente gibt’s auf jeden Fall auch einen Beitrag. Dies wird aber erst in einem späteren Teil kommen. Erst soll jeder Leser gut mit dem Facebook Graph arbeiten können. Wenn man dieses Konzept sowie einige Funktionen der js/php sdk versteht, hindert einen nur noch die eigene Kreativität zur Entwicklung sozialer Applikationen.
PS: Ich werde übrigens auch Code unseres Frameworks unter Open-Source Lizenz veröffentlichen. D.h. Klassen und Funktionen, die in allen unseren Apps verwendet werden. Z.B. posten, senden, authentifizieren, Nutzerdaten in mysql-db speichern, …
Klingt vielversprechend, ich freu mich drauf!
[...] App anlegen und externen Code in ihre Fanpage einbetten erfahren Sie in in meinem Blog Beitrag Facebook Entwickler Tutorial Teil 1 und dem dazugehörigen Lehr-Video. Wenn Sie unsere Hilfe brauchen und schnell wieder mit ihrer [...]
Super!
hallo!
Bei mir ist leider kein “View App Profil Page” link? Woran kann das liegen?
Viele Grüße
Hi Flo,
Facebook hat die App-Profile pages vor ca. 2-3 Wochen abgeschaltet. Um eine App auf einer Fanpage zu installieren, kannst du folgenden Installationslink benutzen. Trage dazu deine App-Id und die Canvas-Url, die du in der FB App eingestellt hast in den Link ein:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=CANVAS_URL
Danach kannst du auswählen, wo du die App gerne hin installieren möchtest.
Beste Grüße,
Sebastian
Vielen Dank für die sehr schnelle Antwort!
Leider hat sich nun das Problem eingeschlichen, dass ich angeblich keinen Zugang zu dem Server hätte.
Wenn ich die App anklicke kommt:
“You don’t have permission to access /helloworld/index.php on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.”
Ich habe ganz einfaches 1&1 Webspace M mit einem (angeblich) aktivierten SSL Proxy.. Liegt das am vielleicht fehlenden SSL?
Viele Grüße
Florian
Hi Flo,
ja das vermute ich. Hatte gerade vor kurzem das gleiche Problem. Hast du den in der FB App eingetragenen Pfad mal im Browser aufgerufen und geschaut, ob er richtig ist?
Beste Grüße,
Sebastian
Hi Sebastien,
erstmal vielen Dank für den Beitrag =)
Zurzeit laufen auf Facebook sehr viele Apps wie “Wie oft hast du dich in Facebook eingeloggt?” und viele andere solche Apps, wo einfach bilder erzeugt werden, indem der Name des Benutzer steht und eine zufällige Zahl. Das Ergebnis wird dann auf die Pinnwand gepostet. Weiß du wie so eine App aufgebaut ist? Könntest du mir eventuell helfen? Würde mich auch auf ne Mail freuen.
Danke schonmal und schönen Tag!
Gruß
Hallo Emre,
eine App, die lediglich auf die Pinnwand postet, ist keine schwierige Entwicklung. Falls wir für dich eine App entwickeln bzw. konzeptionieren sollen, bitte ich dich mit unserem Geschäftsführer Hubertus Porschen (0221-67788501) Kontakt aufzunehmen.
Prinzipiell sollte aber im Kern jeder App die “positive User Experience” stehen. Eine App, die eine zufällige, unwahre Zahl im Namen eines Nutzers auf seine Pinnwand postet, wird schnell als Spam klassifiziert und gesperrt. Danach verliert die App jeden viralen Effekt.
Beste Grüße,
Sebastian