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

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

on

  • 1,358 views

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

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

Statistics

Views

Total Views
1,358
Views on SlideShare
1,358
Embed Views
0

Actions

Likes
1
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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