Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
thanks for the ad(d).“Entwicklung von Social-Web-Applikationen auf      Facebook und anderen Plattformen”          E-Day 2...
Hands on:3. Become a Facebook Developer!
Hands-on:3. Become a Facebook DeveloperAufgabe:Rufen Sie die Facebook Developer-Applikation auf!Der “Developer” ist die ze...
Hands-on:3. Become a Facebook Developer                                         die.socialisten.at                        ...
Hands-on!3. Become a Facebook Developer                                         die.socialisten.at                        ...
Hands-on!3. Become a Facebook Developer                                         die.socialisten.at                        ...
Hands-on!3. Become a Facebook Developer                                         die.socialisten.at                        ...
Hands-on:3. Become a Facebook DeveloperVerifikation:Facebook verlangt, dass alle Entwickler mit Mobiltelefonnummeroder Kred...
Hands-on:3. Become a Facebook Developer                                         die.socialisten.at                        ...
Hands-on:3. Become a Facebook DeveloperAufgabe:Anlegen der ersten Applikation!                                          di...
Hands-on:3. Become a Facebook DeveloperAufgabe:Legen Sie ihre erste eigene Facebook-Anwendung an!Für Einsteiger:Die Anwend...
Hands-on!3. Become a Facebook Developer                                         die.socialisten.at                        ...
die.socialisten.atsocial network development
Hands-on:3. Become a Facebook DeveloperAufruf der eignen App: http://apps.facebook.com/APPNAMESPACEBsp: http://apps.facebo...
Die Facebook-Plattform
Facebook - Platform OverviewWo & wie können unsere Anwendungeneigentlich auf der Facebook-Plattform aufsetzen?1. Apps auf ...
Facebook - Platform Overview1. Apps auf facebook.com                 Canvas-App                                       die....
Facebook - Platform Overview1. Apps auf facebook.com- Canvas-App - “Canvas” ist die“Leinwand” auf der Entwickler ihreApp “...
Facebook - Platform Overview2. Apps auf Pages/Tabs                         Tab, 520px                                     ...
Facebook - Platform Overview2. Apps auf Pages/Tabs- Tab-App - integriert als Tab auf einerFacebook-Page- Pro Tab = 1 App- ...
Facebook - Platform Overview3. Externe Websites / “Facebook Connect”                                              die.soci...
Facebook - Platform Overview3. Externe Websites / “Facebook Connect”- Eigenständige, “herkömmliche”Web-App / Website-Abruf...
Facebook - Platform Overview3. Externe Websites / “Facebook Connect”Möglichkeiten, die eigene Website / Web-Appmit Faceboo...
Facebook - Platform Overview4. Open Graph & der “Like”-ButtonDas Open Graph Protokoll ermöglicht es, Inhalte der eigenen W...
Facebook - Platform Overview4. Open Graph & der “Like”-ButtonBeispiel: Event-Community Stadtkinder.com                    ...
Facebook - Platform Overview5. Mobile SDKsNeben den genannten Möglichkeiten, bieten sich dem App-Entwickler auchmehrere We...
Hands on:4. Create a Facebook-Page + Tab!
Hands-on:4. Create a Facebook-Page + Tab!Aufgabe:Legen Sie eine Test-Seite auf Facebook an!http://www.facebook.com/pages/c...
Hands-on:4. Create a Facebook-Page + Tab!                                           die.socialisten.at                    ...
Hands-on:4. Create a Facebook-Page + Tab!Tipp: die Test-Seite NICHT veröffentlichen!                                      ...
Hands-on:4. Create a Facebook-Page + Tab!Zurück zum Developer! http://www.facebook.com/developerDie Page Tab URL gibt an, ...
Hands-on:4. Create a Facebook-Page + Tab!Fügen Sie den Applikations-Tab Ihrer Test-Seite hinzu!                           ...
Hands-on:4. Create a Facebook-Page + Tab!Und nun zurück zu Ihrer Test-Seite!                                              ...
Hands-on:4. Create a Facebook-Page + Tab!Und so wird Ihr Tab zum Landing-Tab!                                             ...
Exkurs:Facebook & SSL / httpsWarum SSL / https?- Üblicher http-Traffic erfolgt unverschlüsselt!- Kennwörter, Cookies etc. k...
Facebook für Entwickler -Graph API, JavaScript SDK,        Open Graph
Facebook für EntwicklerGraph API, Javascript SDK,Open GraphUm Applikationen und Facebook-Plattform funktional zu verzahnen...
Facebook für EntwicklerGraph APIGraph API: HTTPS-Rest-basierter Web-Service (Zugriff exklusiv über SSL)                   ...
Facebook für EntwicklerGraph APIBeispiel: Auslesen eines Benutzers (Parameter: Benutzer-ID oder -Kurzname)                ...
Facebook für EntwicklerGraph APIBeispiel: Auslesen einer Page (Parameter: Page-ID oder Kurzname)                          ...
Facebook für EntwicklerGraph APIBeispiel: Auslesen aller Photos einer Page                                                ...
Continue with Part 3...
die.socialisten.at          Michael Kamleitner   michael.kamleitner@socialisten.atFacebook: facebook.com/michael.kamleitne...
Nächste SlideShare
Wird geladen in …5
×

Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3

1.848 Aufrufe

Veröffentlicht am

Überblick über Social Software Development auf Facebook & Co. für Einsteiger. Facebook Developer-Account registrieren, Anlegen der ersten App, einbinden von Apps als Tabs in Pages, Graph API, Mobile Apps & SDKs.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3

  1. 1. thanks for the ad(d).“Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen” E-Day 2011 / IT Carinthia - Part 2
  2. 2. Hands on:3. Become a Facebook Developer!
  3. 3. Hands-on:3. Become a Facebook DeveloperAufgabe:Rufen Sie die Facebook Developer-Applikation auf!Der “Developer” ist die zentrale Schaltstelle für all Ihre Facebook-Apps!http://www.facebook.com/developerDie gesammelte technische Dokumentation von Facebook finden Sie übrigens unter:http://developers.facebook.com/ die.socialisten.at social network development
  4. 4. Hands-on:3. Become a Facebook Developer die.socialisten.at social network development
  5. 5. Hands-on!3. Become a Facebook Developer die.socialisten.at social network development
  6. 6. Hands-on!3. Become a Facebook Developer die.socialisten.at social network development
  7. 7. Hands-on!3. Become a Facebook Developer die.socialisten.at social network development
  8. 8. Hands-on:3. Become a Facebook DeveloperVerifikation:Facebook verlangt, dass alle Entwickler mit Mobiltelefonnummeroder Kreditkarte verifiziert sind!Wählen Sie die Verifikation per Mobiltelefon, geben Sie ihre Nummer ein.Sie erhalten einen Verifikations-Code per SMS, den sie anschliessend aufFacebook eingeben müssen. die.socialisten.at social network development
  9. 9. Hands-on:3. Become a Facebook Developer die.socialisten.at social network development
  10. 10. Hands-on:3. Become a Facebook DeveloperAufgabe:Anlegen der ersten Applikation! die.socialisten.at social network development
  11. 11. Hands-on:3. Become a Facebook DeveloperAufgabe:Legen Sie ihre erste eigene Facebook-Anwendung an!Für Einsteiger:Die Anwendung soll eine beliebige, bestehende Web-Seite in dasApplikations-Canvas von Facebook integrieren.Für Fortgeschrittene:Wenn Sie eigenen Web-Space besitzen und Zugangsdaten dazu verfügbarhaben, versuchen Sie eine kleine Web-Seite (“Hello World”) zu erstellen, aufIhren Web-Space hochzuladen und in das Applikations-Canvas zuintegrieren. die.socialisten.at social network development
  12. 12. Hands-on!3. Become a Facebook Developer die.socialisten.at social network development
  13. 13. die.socialisten.atsocial network development
  14. 14. Hands-on:3. Become a Facebook DeveloperAufruf der eignen App: http://apps.facebook.com/APPNAMESPACEBsp: http://apps.facebook.com/eday-demo die.socialisten.at social network development
  15. 15. Die Facebook-Plattform
  16. 16. Facebook - Platform OverviewWo & wie können unsere Anwendungeneigentlich auf der Facebook-Plattform aufsetzen?1. Apps auf facebook.com2. Apps auf Pages / Tabs3. Websites / “Facebook Connect”4. Open Graph5. Mobile SDKs die.socialisten.at social network development
  17. 17. Facebook - Platform Overview1. Apps auf facebook.com Canvas-App die.socialisten.at social network development
  18. 18. Facebook - Platform Overview1. Apps auf facebook.com- Canvas-App - “Canvas” ist die“Leinwand” auf der Entwickler ihreApp “malen” können.- Abrufbar unter http://apps.facebook.com/APPTITLE- Hosting durch App-Entwickler- 760 Pixel breit (+optionales FluidLayout) Canvas-App, 760px- Basierend auf iframes - “Web-Seitein der Web-Seite”- Unterstützt alle Web-Technologien:JavaScript, Flash, Widgets,Tracking... die.socialisten.at social network development
  19. 19. Facebook - Platform Overview2. Apps auf Pages/Tabs Tab, 520px die.socialisten.at social network development
  20. 20. Facebook - Platform Overview2. Apps auf Pages/Tabs- Tab-App - integriert als Tab auf einerFacebook-Page- Pro Tab = 1 App- 520 Pixel breit-Abrufbar unter http://facebook.com/PAGETITLE/?sk=app_116151718472547 (App-ID)- Hosting durch App-Entwickler- Basierend auf iframes - “Web-Seitein der Web-Seite” Tab, 520px- Unterstützt alle Web-Technologien:JavaScript, Flash, Widgets,Tracking... die.socialisten.at social network development
  21. 21. Facebook - Platform Overview3. Externe Websites / “Facebook Connect” die.socialisten.at social network development
  22. 22. Facebook - Platform Overview3. Externe Websites / “Facebook Connect”- Eigenständige, “herkömmliche”Web-App / Website-Abrufbar unter http://yourdomain.com- Hosting durch App-Entwickler- Unterstützt alle Web-Technologien:JavaScript, Flash, Widgets,Tracking...- Technische Verbindung gleich wiebei Canvas-/Tab-Apps: Graph API &JavaScript SDK, welche auf dereigenen App eingebunden wird. die.socialisten.at social network development
  23. 23. Facebook - Platform Overview3. Externe Websites / “Facebook Connect”Möglichkeiten, die eigene Website / Web-Appmit Facebook zu verknüpfen:- Login mit Facebook Account (früher “Facebook Connect”) erspartdem Benutzer das Anlegen eines neuen Accounts (1-Click-Signup)- Nutzung des Social-Graphs: Freunde auf Facebook können auchFreunde in der App werden- Nutzung von Share-Dialogen, App-Invites, Social Plugins & Like-Buttons für nieder-schwellige Interaktion die.socialisten.at social network development
  24. 24. Facebook - Platform Overview4. Open Graph & der “Like”-ButtonDas Open Graph Protokoll ermöglicht es, Inhalte der eigenen Website optimal inden Social Graph von Facebook zu integrieren. Um die eigene Website “Open-Graph-Fit” zu machen, benötigt man:- Erweiterung der Meta-Daten auf der eigenen Site: Facebook liest diese Meta-Daten ein, um die eigenen Inhalte darstellen zu können (etwa in Wall-Postings)- Integration des Like-Buttons auf der eigenen Site- Jedes “Like” oder Share erzeugt ein angepasstes Wall-Posting im Feed desBenutzers die.socialisten.at social network development
  25. 25. Facebook - Platform Overview4. Open Graph & der “Like”-ButtonBeispiel: Event-Community Stadtkinder.com die.socialisten.at social network development
  26. 26. Facebook - Platform Overview5. Mobile SDKsNeben den genannten Möglichkeiten, bieten sich dem App-Entwickler auchmehrere Wege mobile Apps auf der Facebook-Plattform aufzubauen:- Mobile Webseiten / Web-Apps (technisch analog zu externen Webseiten, alsoGraph API & JavaScript SDK)- iOS (iPhone & iPad) & Android SDKs - bieten auf diesen Plattformen dieMöglichkeit an, native Apps zu entwickeln. die.socialisten.at social network development
  27. 27. Hands on:4. Create a Facebook-Page + Tab!
  28. 28. Hands-on:4. Create a Facebook-Page + Tab!Aufgabe:Legen Sie eine Test-Seite auf Facebook an!http://www.facebook.com/pages/create.php die.socialisten.at social network development
  29. 29. Hands-on:4. Create a Facebook-Page + Tab! die.socialisten.at social network development
  30. 30. Hands-on:4. Create a Facebook-Page + Tab!Tipp: die Test-Seite NICHT veröffentlichen! die.socialisten.at social network development
  31. 31. Hands-on:4. Create a Facebook-Page + Tab!Zurück zum Developer! http://www.facebook.com/developerDie Page Tab URL gibt an, von wo der Content des Tabs bezogen werden soll! die.socialisten.at social network development
  32. 32. Hands-on:4. Create a Facebook-Page + Tab!Fügen Sie den Applikations-Tab Ihrer Test-Seite hinzu! die.socialisten.at social network development
  33. 33. Hands-on:4. Create a Facebook-Page + Tab!Und nun zurück zu Ihrer Test-Seite! die.socialisten.at social network development
  34. 34. Hands-on:4. Create a Facebook-Page + Tab!Und so wird Ihr Tab zum Landing-Tab! die.socialisten.at social network development
  35. 35. Exkurs:Facebook & SSL / httpsWarum SSL / https?- Üblicher http-Traffic erfolgt unverschlüsselt!- Kennwörter, Cookies etc. können z.b. in gemeinsam genutzten WiFi-Netzwerkeneinfach “abgehört” werden. Beispiel: Firesheep- SSL / https-Traffic wird hingegen verschlüsselt übertragen!Facebook:- Bisher war SSL / https-Zugriff für Benutzer & Entwickler optional- Seit Oktober 2011: Pflicht zur Unterstützung von SSL / https für Entwickler- Roadmap: Vollständige Umstellung aller Benutzer auf SSL / httpsEntwickler müssen für ihre Anwendungen also SSL-Zertifikate kaufen &installieren! (Kosten: ca. USD 100,- pro Jahr) die.socialisten.at social network development
  36. 36. Facebook für Entwickler -Graph API, JavaScript SDK, Open Graph
  37. 37. Facebook für EntwicklerGraph API, Javascript SDK,Open GraphUm Applikationen und Facebook-Plattform funktional zu verzahnen, werdenunterschiedliche Facebook-APIs genutzt:Graph API: Erlaubt Lese-/Schreib-Zugriff auf Objekte der Facebook-Plattform - z.b. Photos & Alben, Videos, Wall-Postings, Personen &Freunde, Pages, Events...Zugriff üblicherweise Server-seitig (z.b. PHP)JavaScript SDK*: Ermöglicht die Nutzung von Facebook-Benutzer-Dialogen - z.b. Authorisieren von Apps, Share, Wall-Posts, Invites.Über die JavaScript SDK können auch Client-seitige Zugriffe auf die Graph-API realisiert werden (Browser)* SDK: Software Development Kit - eine Programmier-Bibliothek, die eineAPI dem Dritt-Anbieter zugänglich & einfacher nutzbar macht. die.socialisten.at social network development
  38. 38. Facebook für EntwicklerGraph APIGraph API: HTTPS-Rest-basierter Web-Service (Zugriff exklusiv über SSL) die.socialisten.at social network development
  39. 39. Facebook für EntwicklerGraph APIBeispiel: Auslesen eines Benutzers (Parameter: Benutzer-ID oder -Kurzname) die.socialisten.at social network development
  40. 40. Facebook für EntwicklerGraph APIBeispiel: Auslesen einer Page (Parameter: Page-ID oder Kurzname) die.socialisten.at social network development
  41. 41. Facebook für EntwicklerGraph APIBeispiel: Auslesen aller Photos einer Page die.socialisten.at social network development
  42. 42. Continue with Part 3...
  43. 43. die.socialisten.at Michael Kamleitner michael.kamleitner@socialisten.atFacebook: facebook.com/michael.kamleitner Twitter: @_subnet

×