Ü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.
3. Hands-on:
3. Become a Facebook Developer
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/ 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 Developer
Verifikation:
Facebook verlangt, dass alle Entwickler mit Mobiltelefonnummer
oder 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.
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 Developer
Aufgabe:
Anlegen der ersten Applikation!
die.socialisten.at
social network development
11. Hands-on:
3. Become a Facebook Developer
Aufgabe:
Legen Sie ihre erste eigene Facebook-Anwendung an!
Für Einsteiger:
Die Anwendung soll eine beliebige, bestehende Web-Seite in das
Applikations-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.
die.socialisten.at
social network development
12. Hands-on!
3. Become a Facebook Developer
die.socialisten.at
social network development
14. Hands-on:
3. Become a Facebook Developer
Aufruf der eignen App: http://apps.facebook.com/APPNAMESPACE
Bsp: http://apps.facebook.com/eday-demo
die.socialisten.at
social network development
16. 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
die.socialisten.at
social network development
17. Facebook - Platform Overview
1. Apps auf facebook.com
Canvas-App
die.socialisten.at
social network development
18. Facebook - Platform Overview
1. Apps auf facebook.com
- 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) Canvas-App, 760px
- Basierend auf iframes - “Web-Seite
in der Web-Seite”
- Unterstützt alle Web-Technologien:
JavaScript, Flash, Widgets,
Tracking...
die.socialisten.at
social network development
19. Facebook - Platform Overview
2. Apps auf Pages/Tabs
Tab, 520px
die.socialisten.at
social network development
20. Facebook - Platform Overview
2. Apps auf Pages/Tabs
- 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”
Tab, 520px
- Unterstützt alle Web-Technologien:
JavaScript, Flash, Widgets,
Tracking...
die.socialisten.at
social network development
21. Facebook - Platform Overview
3. Externe Websites / “Facebook Connect”
die.socialisten.at
social network development
22. Facebook - Platform Overview
3. 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.
die.socialisten.at
social network development
23. Facebook - Platform Overview
3. 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
die.socialisten.at
social network development
24. Facebook - Platform Overview
4. 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
die.socialisten.at
social network development
25. Facebook - Platform Overview
4. Open Graph & der “Like”-Button
Beispiel: Event-Community Stadtkinder.com
die.socialisten.at
social network development
26. Facebook - Platform Overview
5. Mobile SDKs
Neben 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.
die.socialisten.at
social network development
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/developer
Die 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 / 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)
die.socialisten.at
social network development
37. Facebook für Entwickler
Graph 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. die.socialisten.at
social network development
38. Facebook für Entwickler
Graph API
Graph API: HTTPS-Rest-basierter Web-Service (Zugriff exklusiv über SSL)
die.socialisten.at
social network development
39. Facebook für Entwickler
Graph API
Beispiel: Auslesen eines Benutzers (Parameter: Benutzer-ID oder -Kurzname)
die.socialisten.at
social network development
40. Facebook für Entwickler
Graph API
Beispiel: Auslesen einer Page (Parameter: Page-ID oder Kurzname)
die.socialisten.at
social network development
41. Facebook für Entwickler
Graph API
Beispiel: Auslesen aller Photos einer Page
die.socialisten.at
social network development