![Page 1: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/1.jpg)
thanks for the ad(d).
“Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen”
E-Day 2011 / IT Carinthia - Part 2
![Page 2: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/2.jpg)
Hands on:3. Become a Facebook Developer!
![Page 3: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/3.jpg)
die.socialisten.atsocial network development
Aufgabe:
Rufen Sie die Facebook Developer-Applikation auf! Der “Developer” ist die zentrale Schaltstelle für all Ihre Facebook-Apps!
http://www.facebook.com/developer
Die gesammelte technische Dokumentation von Facebook finden Sie übrigens unter:http://developers.facebook.com/
Hands-on:3. Become a Facebook Developer
![Page 4: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/4.jpg)
die.socialisten.atsocial network development
Hands-on:3. Become a Facebook Developer
![Page 5: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/5.jpg)
die.socialisten.atsocial network development
Hands-on!3. Become a Facebook Developer
![Page 6: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/6.jpg)
die.socialisten.atsocial network development
Hands-on!3. Become a Facebook Developer
![Page 7: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/7.jpg)
die.socialisten.atsocial network development
Hands-on!3. Become a Facebook Developer
![Page 8: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/8.jpg)
die.socialisten.atsocial network development
Verifikation:
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 auf Facebook eingeben müssen.
Hands-on:3. Become a Facebook Developer
![Page 9: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/9.jpg)
die.socialisten.atsocial network development
Hands-on:3. Become a Facebook Developer
![Page 10: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/10.jpg)
die.socialisten.atsocial network development
Hands-on:3. Become a Facebook Developer
Aufgabe:
Anlegen der ersten Applikation!
![Page 11: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/11.jpg)
die.socialisten.atsocial network development
Aufgabe:
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ügbar haben, versuchen Sie eine kleine Web-Seite (“Hello World”) zu erstellen, auf Ihren Web-Space hochzuladen und in das Applikations-Canvas zu integrieren.
Hands-on:3. Become a Facebook Developer
![Page 12: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/12.jpg)
die.socialisten.atsocial network development
Hands-on!3. Become a Facebook Developer
![Page 13: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/13.jpg)
die.socialisten.atsocial network development
![Page 14: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/14.jpg)
die.socialisten.atsocial network development
Hands-on:3. Become a Facebook DeveloperAufruf der eignen App: http://apps.facebook.com/APPNAMESPACE Bsp: http://apps.facebook.com/eday-demo
![Page 15: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/15.jpg)
Die Facebook-Plattform
![Page 16: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/16.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview
Wo & wie können unsere Anwendungen eigentlich auf der Facebook-Plattform aufsetzen?
1. Apps auf facebook.com
2. Apps auf Pages / Tabs
3. Websites / “Facebook Connect”
4. Open Graph
5. Mobile SDKs
![Page 17: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/17.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview1. Apps auf facebook.com
Canvas-App
![Page 18: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/18.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview1. Apps auf facebook.com
Canvas-App, 760px
- Canvas-App - “Canvas” ist die “Leinwand” auf der Entwickler ihre App “malen” können.
- Abrufbar unter http://apps.facebook.com/APPTITLE
- Hosting durch App-Entwickler
- 760 Pixel breit (+optionales Fluid Layout)
- Basierend auf iframes - “Web-Seite in der Web-Seite”
- Unterstützt alle Web-Technologien: JavaScript, Flash, Widgets, Tracking...
![Page 19: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/19.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview2. Apps auf Pages/Tabs
Tab, 520px
![Page 20: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/20.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview2. Apps auf Pages/Tabs
Tab, 520px
- Tab-App - integriert als Tab auf einer Facebook-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-Seite in der Web-Seite”
- Unterstützt alle Web-Technologien: JavaScript, Flash, Widgets, Tracking...
![Page 21: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/21.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview3. Externe Websites / “Facebook Connect”
![Page 22: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/22.jpg)
die.socialisten.atsocial network development
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 wie bei Canvas-/Tab-Apps: Graph API & JavaScript SDK, welche auf der eigenen App eingebunden wird.
![Page 23: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/23.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview3. Externe Websites / “Facebook Connect”
Möglichkeiten, die eigene Website / Web-App mit Facebook zu verknüpfen:
- Login mit Facebook Account (früher “Facebook Connect”) erspart dem Benutzer das Anlegen eines neuen Accounts (1-Click-Signup)
- Nutzung des Social-Graphs: Freunde auf Facebook können auch Freunde in der App werden
- Nutzung von Share-Dialogen, App-Invites, Social Plugins & Like-Buttons für nieder-schwellige Interaktion
![Page 24: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/24.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview4. Open Graph & der “Like”-Button
Das Open Graph Protokoll ermöglicht es, Inhalte der eigenen Website optimal in den 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 des Benutzers
![Page 25: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/25.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview4. Open Graph & der “Like”-Button
Beispiel: Event-Community Stadtkinder.com
![Page 26: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/26.jpg)
die.socialisten.atsocial network development
Facebook - Platform Overview5. Mobile SDKsNeben den genannten Möglichkeiten, bieten sich dem App-Entwickler auch mehrere Wege mobile Apps auf der Facebook-Plattform aufzubauen:
- Mobile Webseiten / Web-Apps (technisch analog zu externen Webseiten, also Graph API & JavaScript SDK)
- iOS (iPhone & iPad) & Android SDKs - bieten auf diesen Plattformen die Möglichkeit an, native Apps zu entwickeln.
![Page 27: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/27.jpg)
Hands on:4. Create a Facebook-Page + Tab!
![Page 28: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/28.jpg)
die.socialisten.atsocial network development
Aufgabe:
Legen Sie eine Test-Seite auf Facebook an!
http://www.facebook.com/pages/create.php
Hands-on:4. Create a Facebook-Page + Tab!
![Page 29: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/29.jpg)
die.socialisten.atsocial network development
Hands-on:4. Create a Facebook-Page + Tab!
![Page 30: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/30.jpg)
die.socialisten.atsocial network development
Tipp: die Test-Seite NICHT veröffentlichen!
Hands-on:4. Create a Facebook-Page + Tab!
![Page 31: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/31.jpg)
die.socialisten.atsocial network development
Zurück zum Developer! http://www.facebook.com/developerDie Page Tab URL gibt an, von wo der Content des Tabs bezogen werden soll!
Hands-on:4. Create a Facebook-Page + Tab!
![Page 32: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/32.jpg)
die.socialisten.atsocial network development
Fügen Sie den Applikations-Tab Ihrer Test-Seite hinzu!
Hands-on:4. Create a Facebook-Page + Tab!
![Page 33: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/33.jpg)
die.socialisten.atsocial network development
Und nun zurück zu Ihrer Test-Seite!
Hands-on:4. Create a Facebook-Page + Tab!
![Page 34: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/34.jpg)
die.socialisten.atsocial network development
Und so wird Ihr Tab zum Landing-Tab!
Hands-on:4. Create a Facebook-Page + Tab!
![Page 35: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/35.jpg)
die.socialisten.atsocial network development
Exkurs:Facebook & SSL / https
Warum SSL / https?
- Üblicher http-Traffic erfolgt unverschlüsselt!
- Kennwörter, Cookies etc. können z.b. in gemeinsam genutzten WiFi-Netzwerken einfach “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 / https
Entwickler müssen für ihre Anwendungen also SSL-Zertifikate kaufen & installieren! (Kosten: ca. USD 100,- pro Jahr)
![Page 36: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/36.jpg)
Facebook für Entwickler - Graph API, JavaScript SDK,
Open Graph
![Page 37: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/37.jpg)
die.socialisten.atsocial network development
Facebook für EntwicklerGraph API, Javascript SDK, Open Graph
Um Applikationen und Facebook-Plattform funktional zu verzahnen, werden unterschiedliche 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 eine API dem Dritt-Anbieter zugänglich & einfacher nutzbar macht.
![Page 38: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/38.jpg)
die.socialisten.atsocial network development
Facebook für EntwicklerGraph API
Graph API: HTTPS-Rest-basierter Web-Service (Zugriff exklusiv über SSL)
![Page 39: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/39.jpg)
die.socialisten.atsocial network development
Facebook für EntwicklerGraph APIBeispiel: Auslesen eines Benutzers (Parameter: Benutzer-ID oder -Kurzname)
![Page 40: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/40.jpg)
die.socialisten.atsocial network development
Facebook für EntwicklerGraph APIBeispiel: Auslesen einer Page (Parameter: Page-ID oder Kurzname)
![Page 41: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/41.jpg)
die.socialisten.atsocial network development
Facebook für EntwicklerGraph API
Beispiel: Auslesen aller Photos einer Page
![Page 42: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/42.jpg)
Continue with Part 3...
![Page 43: Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554cf4efb4c90513118b4f97/html5/thumbnails/43.jpg)
die.socialisten.atMichael Kamleitner
Facebook: facebook.com/michael.kamleitnerTwitter: @_subnet