Überblick über Social Software Development auf Facebook & Co. für Einsteiger. Explore the Graph API, JavaScript SDK, OpenGraph Protocol, Social Plugins (Like-Button...), andere Social Web-Plattformen (Google+, Foursquare, Twitter).

1. thanks for the ad(d).
“Entwicklung von Social-Web-Applikationen auf
Facebook und anderen Plattformen”
E-Day 2011 / IT Carinthia - Part 3

2. Hands on:
5. Explore the Graph!

3. Hands-on:
5. Explore the Graph!
http://developers.facebook.com/tools/explorer
die.socialisten.at
social network development

4. Hands-on:
5. Explore the Graph!
Einholen von zusätzlichen Berechtigungen:
die.socialisten.at
social network development

5. Hands-on:
5. Explore the Graph!
Einholen von zusätzlichen Berechtigungen:
die.socialisten.at
social network development

6. Facebook für Entwickler
JavaScript SDK
Die JavaScript-SDK ermöglicht es Entwicklern, in ihren Apps die gewohnten
Facebook-Dialoge zu nutzen.
Applikations-Authorisierung:
Jede Applikation muss vom Benutzer vor dem ersten Start explizit
authorisiert werden. Dabei wird auch festgelegt, auf welche Profil-Infos die
App zugreifen darf!
die.socialisten.at
social network development

7. Facebook für Entwickler
JavaScript SDK
Die JavaScript-SDK ermöglicht es Entwicklern,
in ihren Apps die gewohnten Facebook-Dialoge zu nutzen.
Feed-Dialog (“Wall-Posting”):
Der wichtigste und meist-genutzte Dialog -
dient dem Veröffentlichen von Wall-Postings
auf der eigenen Wall, oder auf der Wall eines
Freundes.
die.socialisten.at
social network development

8. Facebook für Entwickler
JavaScript SDK
Die JavaScript-SDK ermöglicht es Entwicklern,
in ihren Apps die gewohnten Facebook-Dialoge zu nutzen.
Feed-Dialog (“Wall-Posting”):
Dialoge werden über eine von Facebook bereitgestellte
JavaScript-Methode aktiviert:
die.socialisten.at
social network development

9. Facebook für Entwickler
JavaScript SDK
Die JavaScript-SDK ermöglicht es Entwicklern,
in ihren Apps die gewohnten Facebook-Dialoge zu nutzen.
Applikations-Requests (“Invite”):
Dienen dazu, andere Benutzer zur
Nutzung einer App einzuladen.
Kein “Giesskannen-Prinzip”: Benutzer
können nur eine bestimmte Anzahl
an Freunden pro Tag einladen, dieser
Vorgang muss zu dem immer manuell
passieren!
die.socialisten.at
social network development

10. Facebook für Entwickler
JavaScript SDK
Die JavaScript-SDK ermöglicht es Entwicklern,
in ihren Apps die gewohnten Facebook-Dialoge zu nutzen.
Send-Dialog (“Private Message”):
Einem oder mehreren Freunden oder
Gruppen eine nicht-öffentliche
Nachricht senden.
Add Friend:
Freundschafts-Anfrage versenden.
die.socialisten.at
social network development

11. Facebook für Entwickler
JavaScript SDK
Die JavaScript-SDK ermöglicht es Entwicklern,
in ihren Apps die gewohnten Facebook-Dialoge zu nutzen.
Pay-Dialog (Facebook Credits):
Abwicklung eines Zahlungsvor-
gangens mit Facebook Credits,
dem Micropayment-System der
Facebook-Plattform.
die.socialisten.at
social network development

12. Facebook für Entwickler
JavaScript SDK
Einbindung der Facebook JavaScript SDK
in die eigene Web-App:
die.socialisten.at
social network development

13. Hands on:
6. Explore the JavaScript SDK!

14. Hands-on:
6. Explore the Graph!
http://developers.facebook.com/tools/console/
die.socialisten.at
social network development

15. Hands-on:
6. Explore the Graph!
http://developers.facebook.com/tools/console/
die.socialisten.at
social network development

16. Facebook für Entwickler
Open Graph
Wiederholung:
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

17. Facebook für Entwickler
Open Graph
Beispiel: Event-Community Stadtkinder.com
Ziel: Es sollen alle Location-Pages (z.b. http://stadtkinder.com/wien/stadthalle)
Open-Graph-tauglich gemacht werden.
die.socialisten.at
social network development

18. Facebook für Entwickler
Open Graph
Beispiel: Event-Community Stadtkinder.com
1. Open Graph Meta-Tags setzen!
die.socialisten.at
social network development

19. Facebook für Entwickler
Open Graph
Beispiel: Event-Community Stadtkinder.com
2. Like-Button (Social Plugin) als iframe oder Javascript-Snippet einbauen!
die.socialisten.at
social network development

20. Facebook für Entwickler
Open Graph
Beispiel: Event-Community Stadtkinder.com
3. So sehen die “Likes” auf der Wall des Benutzers aus:
die.socialisten.at
social network development

21. Hands on:
7. Social Plugins

22. Hands-on:
6. Social Plugins
http://developers.facebook.com/docs/plugins/
die.socialisten.at
social network development

23. Hands-on:
6. Social Plugins
http://developers.facebook.com/docs/plugins/
die.socialisten.at
social network development

24. Hands-on:
6. Social Plugins
Legen sie eine leere HTML-Datei “test” auf ihrem Rechner an:
die.socialisten.at
social network development

25. Hands-on:
6. Social Plugins
Legen sie <html>, <head>, <body>-Element an, und kopieren Sie
den Plugin Code von Facebook. Wichtig: “http:” einfügen!
die.socialisten.at
social network development

26. Hands-on:
6. Social Plugins
Speichern sie die Datei als “index.html”.
Wichtig: In Notepad “All Files” als Typ wählen!
die.socialisten.at
social network development

27. Hands-on:
6. Social Plugins
Nach dem Speichern, öffnen Sie die Datei im Browser:
die.socialisten.at
social network development

28. Hands-on:
6. Social Plugins
Klicken sie auf “Like” und besuchen sie danach ihr Facebook-Profil!
die.socialisten.at
social network development

29. Exkurs: Terms of Service
Die meisten Social Web-Plattformen haben gemeinsam, dass es keines
formalen Vertrages zwischen Plattform-Betreiber und -Applikations-Hersteller
bedarf.
Die Plattform-Betreiber wie Facebook legen aber in mehr oder weniger
detaillierten Nutzungsbedingungen (“Terms of Service”) fest, was erlaubt ist
und was nicht.
Beispiel Facebook:
- Terms of Service - Reglen die jeden Benutzer betreffen
- Facebook Platform Policies - Regeln für App-Entwickler
- Advertising Guidelines - Regeln betreffend Werbung auf Facebook
- Promotions Guidelines - Regeln f. Marketing-Aktivitäten, Gewinnspiele etc.
- Payment Terms - Regeln f. das Facebook Micropayment-System Credits
- Applikations Terms: jene Nutzungsbedingungen, die ein App-Entwickler
zusätzlich definieren kann und zur Voraussetzung zur Nutzung der App
macht.
die.socialisten.at
social network development

30. Exkurs: Terms of Service
Beispiel Facebook:
- Erlaubt: Speichern von Benutzer-Daten
- Erlaubt: Nutzung von Benutzer-Daten für Marketing-Zwecke bei explizitem
Einverständnis des Benutzers (z.b. Newsletter-Signup)
- Nicht erlaubt: Weitergabe von Benutzer-Daten an Dritte
- Nicht erlaubt: Gewinnspiele auf der Pinnwand von Pages
- Erlaubt: Gewinnspiele in Apps & Tabs
- Nicht erlaubt: Nutzung anderer Zahlungssysteme als Credits bei Games
Warnung: auch wenn einige dieser Regeln leider oft ignoriert werden, und
Facebook meist nicht von sich aus aktiv wird: die Sperrung von Apps oder
Pages ist ein reales Szenario bei Mißachtung der Terms of Service!
die.socialisten.at
social network development

31. Beyond Facebook: Andere
Social Web-Plattformen im
Überblick

32. Beyond Facebook: andere soziale
Plattformen im Überblick
Twitter
XING, LinkedIn, VZ
LBS - Foursquare & Co.
Google+
die.socialisten.at
social network development

33. Beyond Facebook:
Twitter
Die wahrscheinlich erfolgreichste L1 (Access-)API im Web bietet:
- Identity-Management (Login mit Twitter-Account auf 3rd Party Apps)
- Klassische REST-API für Lese-/Schreibzugriffe
- Search API (aber keinen Zugriff auf “alle” Tweets aka “Firehose”)
- JavaScript-Plugins (“Tweet this”, “followe me”)
die.socialisten.at
social network development

34. Beispiel:
Tweetshirt
die.socialisten.at
social network development

35. Beyond Facebook:
XING, LinkedIn, VZ, Orkut, Myspace
Diese Plattformen bieten L1- & L2-APIs in Form eines Google Open
Social-Containers an. Vorteil: Apps laufen ohne aufwendige
Modifikationen gleich auf mehreren sozialen Plattformen.
LinkedIn
Open Social App-Container
die.socialisten.at
social network development

36. Beyond Facebook:
XING, LinkedIn, VZ, Orkut, Myspace
MySpace
Open Social App-Container
die.socialisten.at
social network development

37. Beyond Facebook:
XING, LinkedIn, VZ, Orkut, Myspace
Orkut
Open Social App-Container
die.socialisten.at
social network development

38. Beyond Facebook:
XING, LinkedIn, VZ, Orkut, Myspace
XING hat seine App-Plattform 2011
allerdings mangels Erfolg wieder
eingestellt.
Angesichts des kommenden Google+
stellt sich die Frage nach der Zukunft
von Open Social.
XING
Open Social App-Container
die.socialisten.at
social network development

39. Beyond Facebook:
Foursquare - Beispiel
Die L1-(Access-)API von Foursquare bietet:
- Identity-Management (Login mit Foursquare-Account auf 3rd Party Apps)
- Klassische REST-API für Lese-/Schreibzugriffe
- Foursquare-Buttons für die eigene Website
die.socialisten.at
social network development

40. Foursquare - Beispiel
Checkin-Button auf der eigenen Website:
die.socialisten.at
social network development

41. Beyond Facebook:
Google+
Google beginnt erst langsam, Google+ als Plattform zu
öffnen, ausgewählte Hersteller betreiben aber bereits
Games auf Google+. Was wir zu erwarten haben:
- OAuth-basiertes Identity-Management (Login mit
Google-Account, bereits heute für App-Entwickler
verfügbar)
- Zahlreiche bestehende L1-APIs und neue L1-APIs f.
Google+ / Zugriff auf den Social Graph etc. (derzeit nur
ausgewählte Partner bzw. eingeschränkt)
- L2-(Plugin-)API zur Ausführung von Apps innerhalb der
Google+ Benutzeroberfläche (derzeit nur ausgewählte
Partner)
- L3 Runtime Environment in Form von Google App
Engine, die von App-Entwicklern optional zum Hosting
der Apps genutzt werden kann (heute verfügbar).
die.socialisten.at
social network development

42. die.socialisten.at
social network development

43. Q&A

44. die.socialisten.at
Michael Kamleitner
michael.kamleitner@socialisten.at
Facebook: facebook.com/michael.kamleitner
Twitter: @_subnet