user Avatar

Facebook Entwickler Tutorial Teil 1: Grundlagen und Begriffe

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, javascript und php-Techniken vorgestellt.
Über Fragen und Feedback freue ich mich in den Kommentaren.

Grundsätzliches Vorgehen bei der Facebook App Entwicklung: „Hello World“

Jede Facebook App-Entwicklung läuft in folgenden Schritten ab:

  1. Anlegen eines Ordners für die App auf dem eigenen Webserver
  2. Anlegen und Konfigurieren einer Facebook Applikation
  3. Hinzufügen der Facebook Applikation zu einer Test-Fanpage
Wenn bereits eine index.php Datei vorhanden ist, wird der Inhalt der Datei in der Fanpage auf einem eigenen Tab angezeigt. Diese einfachen Schritte reichen also für die erste „Hello World“-App aus. Im Screencast werden diese Schritte durchlaufen und die „Hello world“-Facebook App erstellt und in eine Facebook Fanpage integriert. Zudem wird gezeigt, wie Sie ganz einfach ihre komplette Homepage oder ihren Blog via iframe in ihre Fanpage einbetten.
[tentblogger-vimeo 28515340]
Fragen und Kommentare bitte unten posten.

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.


Facebook Anleitung Facebook Applications Facebook Development Facebook Entwicklung Facebook Tutorial
Sebastian Buckpesch

Sebastian Buckpesch ist Gründer und technischer Geschäftsführer der App-Arena GmbH. Der Diplom Wirtschaftsinformatiker und zertifizierte AWS Solution Architect entwickelt mit seinem Team die IT-Plattform App-Manager sowie zahlreiche Web-basierte App-Projekte. Zu seinen Interessensgebieten zählt Cloud- und Serverless Architektur sowie neueste IoT- und BigData-Trends.