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.

  • Roman

    Hallo,
    Ich wollte mal fragen ob es möglich ist die Autorisierung für bestimmte Berreiche – welche ja abgerufen werden wenn man eine App startet – auch für Seitentab-Applikationen direkt abrufbar ist ohne umleitung auf die app?
    Ich hab das leider bis heute nicht geschafft.
    Zwar kann ich per Seitenreiter-App abfragen ob der User fan der Seite ist aber dann eine Umleitung auf die Applikation selbst starten um die Benutzerrechte zu bekommen aber anschließend wird mir die Leinwandapp als Weiße Seite angezeigt und eine re-umleitung auf die Seitenreiter-App ist nicht möglich..

    Ich bitte um Hilfe.

  • SoMed

    Vielen Dank für das Tutorial. Gibt es den eigentlich den zweiten Teil des Tutorials schon? Konnte ihn in der Suche nicht finden.

    Viele Grüße

    • Hi,
      leider habe ich den zweiten Teil bisher nicht angepackt. :-(

      Wir sind aber gerade dabei eine Beispiel App vorzubereiten, in der viele Facebook Funktionen bereits integriert sind und nur noch zum eigenen Bedarf modifiziert werden müssen.
      – Authentifizierung
      – Wall-Posts
      – Senden, Teilen, Kommentieren, Multi-Friend-Selector
      – Open Graph Postings

      Sobald wir fertig sind, werden wir dies hier im Blog veröffentlichen.

      Viele Grüße aus Köln,
      Sebastian

  • Kartal

    Hallo,

    als erstens muss ich sagen, das dein Tutorial Klasse ist.
    Ich hätte mal eine Frage an dich, ich studiere Wirtschaftsinformatik und muss nun mein Studium mit der Bachelorarbeit abschließen. Ich hatte die Idee eine Facebook Applikation zu entwickeln. Jedoch habe ich keine besonderen Programmierkenntnisse wie PHP oder so. Lediglich nur Java Kenntnisse und SQL Kenntnisse.

    Meinst du dass eine Facebook Applikation auch von Neulingen entwickelt werden kann? Oder sollte man da schon gravierende Programmierkenntnisse haben?

    Und fallen irgendwelche Gebühren bei der Entwicklung oder Einführung an??

    Vielen Dank

    Gruß

    Kartal

  • Hallo,
    ich grüße Sie sehr herzlich und wünsche ein schönes Wochenende. Mein Name ist Robert und ich suche dringend eine kompetente Hilfe. Ich bin schon seit Wochen bei erstellung einer Iframe Anwendung bei Facebook. Die Anwendung ist schon fertig, unterstüzt auch SSL (https). Ich kann die Anwendung auch auf meier Fanpage abrufen.
    Mir ist jetzt nur noch einen kleinen Schritt zum vollen Erfolg geblieben. Ich muss jetzt meine Anwendung von der Anwendungs Profilseite zu meiner Seite hinzufügen.
    Ich kann die Anwendungs Profilseite aufrufen, indem ich auf meine Startseite im Suchfenster
    der Name meiner Anwendung angebe und Enter drücke. In der Liste der Anwendungen ist aber meine
    Anwendung nicht dabei, obwohl die funktioniert einwandfrei. Ich habe im Internet auf der Seite:
    http://allfacebook.de/news/facebook-apps-anwendungsprofile-bleiben-nicht-bestehen
    einen JavaScript Code zum direkten Hinzufügen eines Reiters gefunden:
    javascript: (function(){var%20id=window.location.href.split(‘/’);var%20appId=prompt(‘ApplicationID:’,id[4]);if(appId){window.location.href=’https://www.facebook.com/add.php?api_key=’+appId+’&pages=1′;}})();Da drunter steht:
    Diesen einfach als Link in die Lesezeichenleiste legen und beim Bearbeiten einer Anwendung abrufen.

    Wie soll ich das verstehen? An welche Stelle legen? in die Lesezeichenleiste legen . Wie geht das? Und wie abrufen? Kannen Sie mir bitte helfen und das genauer erklären?

    Mit freundlichen Grüßen
    Robert

    • Hi Robert,

      du musst nur diesen Link aufrufen: http://www.facebook.com/add.php?api_key={{fb_app_id}}&pages=1&page={{fb_page_id}}. Die beiden Parameter sind natürlich durch deine Fanpage Id zu ersetzen und die {{fb_app_id}} mit der Id deiner App. Den letzten Parameter page=… kannst du auch weg lassen, wenn du willst, dann ist eben keine Fanpage vorausgewählt.

      Beste Grüße,
      Sebastian

  • Hallo,
    ich grüße dich sehr herzlich und wünsche ein schönes Wochenende. Mein Name ist Robert und ich suche dringend eine kompetente Hilfe. Ich bin schon seit Wochen bei erstellung einer Iframe Anwendung bei Facebook. Die Anwendung ist schon fertig, unterstüzt auch SSL (https). Ich kann die Anwendung auch auf meier Fanpage abrufen.
    Mir ist jetzt nur noch einen kleinen Schritt zum vollen Erfolg geblieben. Ich muss jetzt meine Anwendung von der Anwendungs Profilseite zu meiner Seite hinzufügen.
    Ich kann die Anwendungs Profilseite aufrufen, indem ich auf meine Startseite im Suchfenster
    der Name meiner Anwendung angebe und Enter drücke. In der Liste der Anwendungen ist aber meine
    Anwendung nicht dabei, obwohl die funktioniert einwandfrei. Ich habe im Internet auf der Seite:
    http://allfacebook.de/news/facebook-apps-anwendungsprofile-bleiben-nicht-bestehen
    einen JavaScript Code zum direkten Hinzufügen eines Reiters gefunden:
    javascript: (function(){var%20id=window.location.href.split(‘/’);var%20appId=prompt(‘ApplicationID:’,id[4]);if(appId){window.location.href=’https://www.facebook.com/add.php?api_key=’+appId+’&pages=1′;}})();Da drunter steht:
    Diesen einfach als Link in die Lesezeichenleiste legen und beim Bearbeiten einer Anwendung abrufen.

    Wie soll ich das verstehen? An welche Stelle legen? in die Lesezeichenleiste legen . Wie geht das? Und wie abrufen? Kannst du mir bitte helfen und das genauer erklären?

    Mit freundlichen Grüßen
    Robert

  • 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

  • flo

    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

  • flo

    hallo!

    Bei mir ist leider kein “View App Profil Page” link? Woran kann das liegen?

    Viele Grüße

  • sebastian

    Super! :)

  • Pingback: Facebook SSL Verschlüsslung für die Fanpage - So geht's! - Facebook Marketing, Facebook Fanpage, Facebook Applikationen()

  • 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!

  • 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

  • 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.

  • SG

    Hi Sebastian,

    dein Tutorial ist klasse, endlich! nach wochenlangen suchen kurz und knapp erklärt!
    Und es funktioniert!

    Danke.