Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day...

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!

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



http://developers.facebook.com/

http://developers.facebook.com/


Hands-on!3. Become a Facebook Developer


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.




Aufgabe:

Anlegen der ersten Applikation!


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


Hands-on:3. Become a Facebook DeveloperAufruf der eignen App: http://apps.facebook.com/APPNAMESPACE Bsp: http://apps.facebook.com/eday-demo

http://apps.facebook.com/APPNAMESPACE




Die Facebook-Plattform


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


Facebook - Platform Overview1. Apps auf facebook.com

Canvas-App


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

http://apps.facebook.com/APPTITLE





Facebook - Platform Overview2. Apps auf Pages/Tabs

Tab, 520px


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)


- Basierend auf iframes - “Web-Seite in der Web-Seite”


http://facebook.com/PAGETITLE/?sk=app_116151718472547





Facebook - Platform Overview3. Externe Websites / “Facebook Connect”



- Eigenständige, “herkömmliche” Web-App / Website

-Abrufbar unter http://yourdomain.com



- Technische Verbindung gleich wie bei Canvas-/Tab-Apps: Graph API & JavaScript SDK, welche auf der eigenen App eingebunden wird.

http://yourdomain.com

http://yourdomain.com



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


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


Facebook - Platform Overview4. Open Graph & der “Like”-Button

Beispiel: Event-Community Stadtkinder.com


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.

Hands on:4. Create a Facebook-Page + Tab!


Aufgabe:

Legen Sie eine Test-Seite auf Facebook an!

http://www.facebook.com/pages/create.php

Hands-on:4. Create a Facebook-Page + Tab!




Tipp: die Test-Seite NICHT veröffentlichen!



Zurück zum Developer! http://www.facebook.com/developerDie Page Tab URL gibt an, von wo der Content des Tabs bezogen werden soll!








Fügen Sie den Applikations-Tab Ihrer Test-Seite hinzu!



Und nun zurück zu Ihrer Test-Seite!



Und so wird Ihr Tab zum Landing-Tab!



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)

Facebook für Entwickler - Graph API, JavaScript SDK,

Open Graph


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.


Facebook für EntwicklerGraph API

Graph API: HTTPS-Rest-basierter Web-Service (Zugriff exklusiv über SSL)


Facebook für EntwicklerGraph APIBeispiel: Auslesen eines Benutzers (Parameter: Benutzer-ID oder -Kurzname)


Facebook für EntwicklerGraph APIBeispiel: Auslesen einer Page (Parameter: Page-ID oder Kurzname)


Facebook für EntwicklerGraph API

Beispiel: Auslesen aller Photos einer Page

Continue with Part 3...

die.socialisten.atMichael Kamleitner

[email protected]

Facebook: facebook.com/michael.kamleitnerTwitter: @_subnet

mailto:[email protected]








Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day...

Technology

Transcript of Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day...