Your SlideShare is downloading. ×
  • Like
Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,091 views
Published

Ü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 …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,091
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. thanks for the ad(d).“Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen” E-Day 2011 / IT Carinthia - Part 2
  • 2. Hands on:3. Become a Facebook Developer!
  • 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. Hands-on:3. Become a Facebook Developer die.socialisten.at social network development
  • 5. Hands-on!3. Become a Facebook Developer die.socialisten.at social network development
  • 6. Hands-on!3. Become a Facebook Developer die.socialisten.at social network development
  • 7. Hands-on!3. Become a Facebook Developer die.socialisten.at social network development
  • 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. Hands-on:3. Become a Facebook Developer die.socialisten.at social network development
  • 10. Hands-on:3. Become a Facebook DeveloperAufgabe:Anlegen der ersten Applikation! die.socialisten.at social network development
  • 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. Hands-on!3. Become a Facebook Developer die.socialisten.at social network development
  • 13. die.socialisten.atsocial network development
  • 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. Die Facebook-Plattform
  • 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. Facebook - Platform Overview1. Apps auf facebook.com Canvas-App die.socialisten.at social network development
  • 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. Facebook - Platform Overview2. Apps auf Pages/Tabs Tab, 520px die.socialisten.at social network development
  • 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. Facebook - Platform Overview3. Externe Websites / “Facebook Connect” die.socialisten.at social network development
  • 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. 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. 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. Facebook - Platform Overview4. Open Graph & der “Like”-ButtonBeispiel: Event-Community Stadtkinder.com die.socialisten.at social network development
  • 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. Hands on:4. Create a Facebook-Page + Tab!
  • 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. Hands-on:4. Create a Facebook-Page + Tab! die.socialisten.at social network development
  • 30. Hands-on:4. Create a Facebook-Page + Tab!Tipp: die Test-Seite NICHT veröffentlichen! die.socialisten.at social network development
  • 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. 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. Hands-on:4. Create a Facebook-Page + Tab!Und nun zurück zu Ihrer Test-Seite! die.socialisten.at social network development
  • 34. Hands-on:4. Create a Facebook-Page + Tab!Und so wird Ihr Tab zum Landing-Tab! die.socialisten.at social network development
  • 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. Facebook für Entwickler -Graph API, JavaScript SDK, Open Graph
  • 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. Facebook für EntwicklerGraph APIGraph API: HTTPS-Rest-basierter Web-Service (Zugriff exklusiv über SSL) die.socialisten.at social network development
  • 39. Facebook für EntwicklerGraph APIBeispiel: Auslesen eines Benutzers (Parameter: Benutzer-ID oder -Kurzname) die.socialisten.at social network development
  • 40. Facebook für EntwicklerGraph APIBeispiel: Auslesen einer Page (Parameter: Page-ID oder Kurzname) die.socialisten.at social network development
  • 41. Facebook für EntwicklerGraph APIBeispiel: Auslesen aller Photos einer Page die.socialisten.at social network development
  • 42. Continue with Part 3...
  • 43. die.socialisten.at Michael Kamleitner michael.kamleitner@socialisten.atFacebook: facebook.com/michael.kamleitner Twitter: @_subnet