SlideShare ist ein Scribd-Unternehmen logo
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 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
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 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
Hands-on:
3. Become a Facebook Developer




                                         die.socialisten.at
                                 social network development
Hands-on:
3. Become a Facebook Developer
Aufgabe:
Anlegen der ersten Applikation!




                                          die.socialisten.at
                                  social network development
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
Hands-on!
3. Become a Facebook Developer




                                         die.socialisten.at
                                 social network development
die.socialisten.at
social network development
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
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




                                                           die.socialisten.at
                                                   social network development
Facebook - Platform Overview
1. Apps auf facebook.com




                 Canvas-App




                                       die.socialisten.at
                               social network development
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
Facebook - Platform Overview
2. Apps auf Pages/Tabs




                         Tab, 520px



                                              die.socialisten.at
                                      social network development
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
Facebook - Platform Overview
3. Externe Websites / “Facebook Connect”




                                              die.socialisten.at
                                      social network development
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
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
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
Facebook - Platform Overview
4. Open Graph & der “Like”-Button

Beispiel: Event-Community Stadtkinder.com




                                                    die.socialisten.at
                                            social network development
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
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/developer
Die 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 / 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
Facebook für Entwickler -
Graph API, JavaScript SDK,
        Open Graph
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
Facebook für Entwickler
Graph API

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




                                                                                  die.socialisten.at
                                                                          social network development
Facebook für Entwickler
Graph API
Beispiel: Auslesen eines Benutzers (Parameter: Benutzer-ID oder -Kurzname)




                                                                                     die.socialisten.at
                                                                             social network development
Facebook für Entwickler
Graph API
Beispiel: Auslesen einer Page (Parameter: Page-ID oder Kurzname)




                                                                           die.socialisten.at
                                                                   social network development
Facebook für Entwickler
Graph API
Beispiel: Auslesen aller Photos einer Page




                                                     die.socialisten.at
                                             social network development
Continue with Part 3...
die.socialisten.at
          Michael Kamleitner
   michael.kamleitner@socialisten.at

Facebook: facebook.com/michael.kamleitner
            Twitter: @_subnet

Weitere ähnliche Inhalte

Was ist angesagt?

Facebook Tab-Apps mit TYPO3 TYPO3camp 11
Facebook Tab-Apps mit TYPO3 TYPO3camp 11Facebook Tab-Apps mit TYPO3 TYPO3camp 11
Facebook Tab-Apps mit TYPO3 TYPO3camp 11
Dirk De
 
Politnetz Trickkiste: Wahlkampf mit Facebook und Politnetz
Politnetz Trickkiste: Wahlkampf mit Facebook und PolitnetzPolitnetz Trickkiste: Wahlkampf mit Facebook und Politnetz
Politnetz Trickkiste: Wahlkampf mit Facebook und Politnetz
Politnetz
 
Webinar Facebook - Eduvision Ausbildungen
Webinar Facebook - Eduvision AusbildungenWebinar Facebook - Eduvision Ausbildungen
Webinar Facebook - Eduvision Ausbildungen
Eduvision Ausbildungen
 
Bye Bye, Gewinnspiel-Tab
Bye Bye, Gewinnspiel-TabBye Bye, Gewinnspiel-Tab
Bye Bye, Gewinnspiel-Tab
Die Socialisten
 
Socialisten Summit09
Socialisten Summit09Socialisten Summit09
Socialisten Summit09
Andreas Klinger
 
2012 smm-unterlagen-vl16
2012 smm-unterlagen-vl162012 smm-unterlagen-vl16
2012 smm-unterlagen-vl16
Annette Beulich
 
Social Media und Facebook Marketing
Social Media und Facebook MarketingSocial Media und Facebook Marketing
Social Media und Facebook Marketing
Seo Webworx
 
Facebook Bug Fixing & Kommunikation mit Kunden (by Dr. Thomas Langenberg @ Al...
Facebook Bug Fixing & Kommunikation mit Kunden (by Dr. Thomas Langenberg @ Al...Facebook Bug Fixing & Kommunikation mit Kunden (by Dr. Thomas Langenberg @ Al...
Facebook Bug Fixing & Kommunikation mit Kunden (by Dr. Thomas Langenberg @ Al...
AllFacebook.de
 
Slides Workshop - Facebook Marketing Kompakt
Slides Workshop - Facebook Marketing KompaktSlides Workshop - Facebook Marketing Kompakt
Slides Workshop - Facebook Marketing Kompakt
Futurebiz
 
Abschied vom Gewinnspiel-Tab: Integriertes Facebook Marketing mit Open Graph-...
Abschied vom Gewinnspiel-Tab: Integriertes Facebook Marketing mit Open Graph-...Abschied vom Gewinnspiel-Tab: Integriertes Facebook Marketing mit Open Graph-...
Abschied vom Gewinnspiel-Tab: Integriertes Facebook Marketing mit Open Graph-...
AllFacebook.de
 

Was ist angesagt? (10)

Facebook Tab-Apps mit TYPO3 TYPO3camp 11
Facebook Tab-Apps mit TYPO3 TYPO3camp 11Facebook Tab-Apps mit TYPO3 TYPO3camp 11
Facebook Tab-Apps mit TYPO3 TYPO3camp 11
 
Politnetz Trickkiste: Wahlkampf mit Facebook und Politnetz
Politnetz Trickkiste: Wahlkampf mit Facebook und PolitnetzPolitnetz Trickkiste: Wahlkampf mit Facebook und Politnetz
Politnetz Trickkiste: Wahlkampf mit Facebook und Politnetz
 
Webinar Facebook - Eduvision Ausbildungen
Webinar Facebook - Eduvision AusbildungenWebinar Facebook - Eduvision Ausbildungen
Webinar Facebook - Eduvision Ausbildungen
 
Bye Bye, Gewinnspiel-Tab
Bye Bye, Gewinnspiel-TabBye Bye, Gewinnspiel-Tab
Bye Bye, Gewinnspiel-Tab
 
Socialisten Summit09
Socialisten Summit09Socialisten Summit09
Socialisten Summit09
 
2012 smm-unterlagen-vl16
2012 smm-unterlagen-vl162012 smm-unterlagen-vl16
2012 smm-unterlagen-vl16
 
Social Media und Facebook Marketing
Social Media und Facebook MarketingSocial Media und Facebook Marketing
Social Media und Facebook Marketing
 
Facebook Bug Fixing & Kommunikation mit Kunden (by Dr. Thomas Langenberg @ Al...
Facebook Bug Fixing & Kommunikation mit Kunden (by Dr. Thomas Langenberg @ Al...Facebook Bug Fixing & Kommunikation mit Kunden (by Dr. Thomas Langenberg @ Al...
Facebook Bug Fixing & Kommunikation mit Kunden (by Dr. Thomas Langenberg @ Al...
 
Slides Workshop - Facebook Marketing Kompakt
Slides Workshop - Facebook Marketing KompaktSlides Workshop - Facebook Marketing Kompakt
Slides Workshop - Facebook Marketing Kompakt
 
Abschied vom Gewinnspiel-Tab: Integriertes Facebook Marketing mit Open Graph-...
Abschied vom Gewinnspiel-Tab: Integriertes Facebook Marketing mit Open Graph-...Abschied vom Gewinnspiel-Tab: Integriertes Facebook Marketing mit Open Graph-...
Abschied vom Gewinnspiel-Tab: Integriertes Facebook Marketing mit Open Graph-...
 

Andere mochten auch

Session 1 | «Von der Strategie zum Image.» | Hello Apple
Session 1 | «Von der Strategie zum Image.» | Hello AppleSession 1 | «Von der Strategie zum Image.» | Hello Apple
Session 1 | «Von der Strategie zum Image.» | Hello Apple
Patrick Andersen Brand Consultancy
 
Social digital tech trends 2016
Social digital tech trends 2016 Social digital tech trends 2016
Social digital tech trends 2016
Karen Schulman Dupuis
 
Der arabische E-Book-Markt
Der arabische E-Book-MarktDer arabische E-Book-Markt
Der arabische E-Book-Markt
Peter Schmid-Meil
 
Business Analyst in Startup
Business Analyst in StartupBusiness Analyst in Startup
Business Analyst in Startup
Michael Kramarenko
 
Arabic Business Etiquette
Arabic Business EtiquetteArabic Business Etiquette
Arabic Business Etiquette
Foreign Staffing, Inc.
 
Der Word-to-EPUB-Workflow des GRIN Verlags
Der Word-to-EPUB-Workflow des GRIN VerlagsDer Word-to-EPUB-Workflow des GRIN Verlags
Der Word-to-EPUB-Workflow des GRIN Verlags
Peter Schmid-Meil
 
Unmanaged Tags - Data Protection in the Age of Mindless Proliferation
Unmanaged Tags - Data Protection in the Age of Mindless Proliferation Unmanaged Tags - Data Protection in the Age of Mindless Proliferation
Unmanaged Tags - Data Protection in the Age of Mindless Proliferation
Eike Pierstorff
 
PyData Berlin Meetup
PyData Berlin MeetupPyData Berlin Meetup
PyData Berlin Meetup
Steffen Wenz
 
Get ready for SharePoint 2016
Get ready for SharePoint 2016Get ready for SharePoint 2016
Get ready for SharePoint 2016
Next Iteration
 
Designing For Smarties
Designing For SmartiesDesigning For Smarties
Designing For Smarties
ReadWrite
 
Securing the Cloud
Securing the CloudSecuring the Cloud
Securing the Cloud
GGV Capital
 
NYU Talk
NYU TalkNYU Talk
NYU Talk
Jace Grebski
 
10 Event Technology Trends to Watch in 2016
10 Event Technology Trends to Watch in 201610 Event Technology Trends to Watch in 2016
10 Event Technology Trends to Watch in 2016
Eventbrite UK
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
Peter Rozek
 
Forgotten women in tech history.
Forgotten women in tech history.Forgotten women in tech history.
Forgotten women in tech history.
Domo
 
Publishing Production: From the Desktop to the Cloud
Publishing Production: From the Desktop to the CloudPublishing Production: From the Desktop to the Cloud
Publishing Production: From the Desktop to the Cloud
Deanta
 
Bridging the Gap Between Data Science & Engineer: Building High-Performance T...
Bridging the Gap Between Data Science & Engineer: Building High-Performance T...Bridging the Gap Between Data Science & Engineer: Building High-Performance T...
Bridging the Gap Between Data Science & Engineer: Building High-Performance T...
ryanorban
 

Andere mochten auch (19)

Session 1 | «Von der Strategie zum Image.» | Hello Apple
Session 1 | «Von der Strategie zum Image.» | Hello AppleSession 1 | «Von der Strategie zum Image.» | Hello Apple
Session 1 | «Von der Strategie zum Image.» | Hello Apple
 
Social digital tech trends 2016
Social digital tech trends 2016 Social digital tech trends 2016
Social digital tech trends 2016
 
Der arabische E-Book-Markt
Der arabische E-Book-MarktDer arabische E-Book-Markt
Der arabische E-Book-Markt
 
Business Analyst in Startup
Business Analyst in StartupBusiness Analyst in Startup
Business Analyst in Startup
 
Arabic Business Etiquette
Arabic Business EtiquetteArabic Business Etiquette
Arabic Business Etiquette
 
id-ee Blog Session 4 Psychologie
id-ee Blog Session 4 Psychologieid-ee Blog Session 4 Psychologie
id-ee Blog Session 4 Psychologie
 
Der Word-to-EPUB-Workflow des GRIN Verlags
Der Word-to-EPUB-Workflow des GRIN VerlagsDer Word-to-EPUB-Workflow des GRIN Verlags
Der Word-to-EPUB-Workflow des GRIN Verlags
 
id-ee Blog Session 3 - Identity
id-ee Blog Session 3 - Identityid-ee Blog Session 3 - Identity
id-ee Blog Session 3 - Identity
 
Unmanaged Tags - Data Protection in the Age of Mindless Proliferation
Unmanaged Tags - Data Protection in the Age of Mindless Proliferation Unmanaged Tags - Data Protection in the Age of Mindless Proliferation
Unmanaged Tags - Data Protection in the Age of Mindless Proliferation
 
PyData Berlin Meetup
PyData Berlin MeetupPyData Berlin Meetup
PyData Berlin Meetup
 
Get ready for SharePoint 2016
Get ready for SharePoint 2016Get ready for SharePoint 2016
Get ready for SharePoint 2016
 
Designing For Smarties
Designing For SmartiesDesigning For Smarties
Designing For Smarties
 
Securing the Cloud
Securing the CloudSecuring the Cloud
Securing the Cloud
 
NYU Talk
NYU TalkNYU Talk
NYU Talk
 
10 Event Technology Trends to Watch in 2016
10 Event Technology Trends to Watch in 201610 Event Technology Trends to Watch in 2016
10 Event Technology Trends to Watch in 2016
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
Forgotten women in tech history.
Forgotten women in tech history.Forgotten women in tech history.
Forgotten women in tech history.
 
Publishing Production: From the Desktop to the Cloud
Publishing Production: From the Desktop to the CloudPublishing Production: From the Desktop to the Cloud
Publishing Production: From the Desktop to the Cloud
 
Bridging the Gap Between Data Science & Engineer: Building High-Performance T...
Bridging the Gap Between Data Science & Engineer: Building High-Performance T...Bridging the Gap Between Data Science & Engineer: Building High-Performance T...
Bridging the Gap Between Data Science & Engineer: Building High-Performance T...
 

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

Facebook App Optimization - Innovatives & nachhaltiges App-Marketing mit Face...
Facebook App Optimization - Innovatives & nachhaltiges App-Marketing mit Face...Facebook App Optimization - Innovatives & nachhaltiges App-Marketing mit Face...
Facebook App Optimization - Innovatives & nachhaltiges App-Marketing mit Face...
Die Socialisten
 
Inside Open Graph: How to connect all the things! @ AllFacebook Developer Con...
Inside Open Graph: How to connect all the things! @ AllFacebook Developer Con...Inside Open Graph: How to connect all the things! @ AllFacebook Developer Con...
Inside Open Graph: How to connect all the things! @ AllFacebook Developer Con...
AllFacebook.de
 
What will Facebook do?
What will Facebook do?What will Facebook do?
What will Facebook do?
Martin Szugat
 
Facebook in Kultureinrichtungen
Facebook in KultureinrichtungenFacebook in Kultureinrichtungen
Facebook in Kultureinrichtungen
Alexander Stocker
 
Gratis Facebook-Webinar - Eduvision Ausbildungen
Gratis Facebook-Webinar - Eduvision AusbildungenGratis Facebook-Webinar - Eduvision Ausbildungen
Gratis Facebook-Webinar - Eduvision Ausbildungen
Eduvision Ausbildungen
 
Facebook als Corporate Web? Vortrag CeBit 2011
Facebook als Corporate Web? Vortrag CeBit 2011Facebook als Corporate Web? Vortrag CeBit 2011
Facebook als Corporate Web? Vortrag CeBit 2011
Futurebiz
 
Facebook Photo/Video-Contests
Facebook Photo/Video-ContestsFacebook Photo/Video-Contests
Facebook Photo/Video-Contests
Die Socialisten
 
Social media 111129
Social media 111129Social media 111129
Social media 111129
1560media
 
Social Networks im Freizeitkontext: Facebook
Social Networks im Freizeitkontext: FacebookSocial Networks im Freizeitkontext: Facebook
Social Networks im Freizeitkontext: Facebook
Judith_758
 
Facebook: Möglichkeiten für Unternehmen
Facebook: Möglichkeiten für UnternehmenFacebook: Möglichkeiten für Unternehmen
Facebook: Möglichkeiten für Unternehmen
Sam Steiner
 
SnipClip - Facebook Marketing
SnipClip - Facebook MarketingSnipClip - Facebook Marketing
SnipClip - Facebook Marketing
Martin Szugat
 
Facebook in Kutureinrichtungen – für EinsteigerInnen
Facebook in Kutureinrichtungen – für EinsteigerInnenFacebook in Kutureinrichtungen – für EinsteigerInnen
Facebook in Kutureinrichtungen – für EinsteigerInnen
Alexander Stocker
 
Social Media Applikationen im Marketing- & PR-Kontext
Social Media Applikationen im Marketing- & PR-KontextSocial Media Applikationen im Marketing- & PR-Kontext
Social Media Applikationen im Marketing- & PR-Kontext
Hendrik Martens
 
Facebook Gewinnspiele und Facebook Apps
Facebook Gewinnspiele und Facebook AppsFacebook Gewinnspiele und Facebook Apps
Facebook Gewinnspiele und Facebook Apps
Halalati
 
Webinar Facebook_2013
Webinar Facebook_2013Webinar Facebook_2013
Webinar Facebook_2013
Eduvision Ausbildungen
 
Facebook Marketing Apps – Content Marketing, trifft auf Technik und Community...
Facebook Marketing Apps – Content Marketing, trifft auf Technik und Community...Facebook Marketing Apps – Content Marketing, trifft auf Technik und Community...
Facebook Marketing Apps – Content Marketing, trifft auf Technik und Community...
AllFacebook.de
 
Facebook Workshop Monitoring und Analyse
Facebook Workshop Monitoring und AnalyseFacebook Workshop Monitoring und Analyse
Facebook Workshop Monitoring und Analyse
Futurebiz
 
Brandt someworkshop dt_22.12.10
Brandt someworkshop dt_22.12.10Brandt someworkshop dt_22.12.10
Brandt someworkshop dt_22.12.10
nettib
 
Vorstellung PG PLME
Vorstellung PG PLMEVorstellung PG PLME
Vorstellung PG PLME
Wolfgang Reinhardt
 
Web 2.0 Vortrag Fi W
Web 2.0 Vortrag Fi WWeb 2.0 Vortrag Fi W
Web 2.0 Vortrag Fi W
strafinger.at
 

Ähnlich wie Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen - E-Day 2011/IT-Carinthia - Part 2/3 (20)

Facebook App Optimization - Innovatives & nachhaltiges App-Marketing mit Face...
Facebook App Optimization - Innovatives & nachhaltiges App-Marketing mit Face...Facebook App Optimization - Innovatives & nachhaltiges App-Marketing mit Face...
Facebook App Optimization - Innovatives & nachhaltiges App-Marketing mit Face...
 
Inside Open Graph: How to connect all the things! @ AllFacebook Developer Con...
Inside Open Graph: How to connect all the things! @ AllFacebook Developer Con...Inside Open Graph: How to connect all the things! @ AllFacebook Developer Con...
Inside Open Graph: How to connect all the things! @ AllFacebook Developer Con...
 
What will Facebook do?
What will Facebook do?What will Facebook do?
What will Facebook do?
 
Facebook in Kultureinrichtungen
Facebook in KultureinrichtungenFacebook in Kultureinrichtungen
Facebook in Kultureinrichtungen
 
Gratis Facebook-Webinar - Eduvision Ausbildungen
Gratis Facebook-Webinar - Eduvision AusbildungenGratis Facebook-Webinar - Eduvision Ausbildungen
Gratis Facebook-Webinar - Eduvision Ausbildungen
 
Facebook als Corporate Web? Vortrag CeBit 2011
Facebook als Corporate Web? Vortrag CeBit 2011Facebook als Corporate Web? Vortrag CeBit 2011
Facebook als Corporate Web? Vortrag CeBit 2011
 
Facebook Photo/Video-Contests
Facebook Photo/Video-ContestsFacebook Photo/Video-Contests
Facebook Photo/Video-Contests
 
Social media 111129
Social media 111129Social media 111129
Social media 111129
 
Social Networks im Freizeitkontext: Facebook
Social Networks im Freizeitkontext: FacebookSocial Networks im Freizeitkontext: Facebook
Social Networks im Freizeitkontext: Facebook
 
Facebook: Möglichkeiten für Unternehmen
Facebook: Möglichkeiten für UnternehmenFacebook: Möglichkeiten für Unternehmen
Facebook: Möglichkeiten für Unternehmen
 
SnipClip - Facebook Marketing
SnipClip - Facebook MarketingSnipClip - Facebook Marketing
SnipClip - Facebook Marketing
 
Facebook in Kutureinrichtungen – für EinsteigerInnen
Facebook in Kutureinrichtungen – für EinsteigerInnenFacebook in Kutureinrichtungen – für EinsteigerInnen
Facebook in Kutureinrichtungen – für EinsteigerInnen
 
Social Media Applikationen im Marketing- & PR-Kontext
Social Media Applikationen im Marketing- & PR-KontextSocial Media Applikationen im Marketing- & PR-Kontext
Social Media Applikationen im Marketing- & PR-Kontext
 
Facebook Gewinnspiele und Facebook Apps
Facebook Gewinnspiele und Facebook AppsFacebook Gewinnspiele und Facebook Apps
Facebook Gewinnspiele und Facebook Apps
 
Webinar Facebook_2013
Webinar Facebook_2013Webinar Facebook_2013
Webinar Facebook_2013
 
Facebook Marketing Apps – Content Marketing, trifft auf Technik und Community...
Facebook Marketing Apps – Content Marketing, trifft auf Technik und Community...Facebook Marketing Apps – Content Marketing, trifft auf Technik und Community...
Facebook Marketing Apps – Content Marketing, trifft auf Technik und Community...
 
Facebook Workshop Monitoring und Analyse
Facebook Workshop Monitoring und AnalyseFacebook Workshop Monitoring und Analyse
Facebook Workshop Monitoring und Analyse
 
Brandt someworkshop dt_22.12.10
Brandt someworkshop dt_22.12.10Brandt someworkshop dt_22.12.10
Brandt someworkshop dt_22.12.10
 
Vorstellung PG PLME
Vorstellung PG PLMEVorstellung PG PLME
Vorstellung PG PLME
 
Web 2.0 Vortrag Fi W
Web 2.0 Vortrag Fi WWeb 2.0 Vortrag Fi W
Web 2.0 Vortrag Fi W
 

Mehr von Die Socialisten

Hashtag Campaign Case Study: Rubbellos.at - #einlebenlang
Hashtag Campaign Case Study: Rubbellos.at - #einlebenlangHashtag Campaign Case Study: Rubbellos.at - #einlebenlang
Hashtag Campaign Case Study: Rubbellos.at - #einlebenlang
Die Socialisten
 
So you want to quit Facebook Marketing? (Babelcamp 2014)
So you want to quit Facebook Marketing? (Babelcamp 2014)So you want to quit Facebook Marketing? (Babelcamp 2014)
So you want to quit Facebook Marketing? (Babelcamp 2014)
Die Socialisten
 
Social Customer Service 
2014 - How Social Media is transforming Customer Se...
Social Customer Service 
2014 - How Social Media is  transforming Customer Se...Social Customer Service 
2014 - How Social Media is  transforming Customer Se...
Social Customer Service 
2014 - How Social Media is transforming Customer Se...
Die Socialisten
 
Hashtag-Campaigns
Hashtag-CampaignsHashtag-Campaigns
Hashtag-Campaigns
Die Socialisten
 
Facebook Payments for Developers
Facebook Payments for DevelopersFacebook Payments for Developers
Facebook Payments for Developers
Die Socialisten
 
Algorithms are the new gatekeepers
Algorithms are the new gatekeepersAlgorithms are the new gatekeepers
Algorithms are the new gatekeepers
Die Socialisten
 
Open Graph Sponsored Stories – Laser-Focused Ad-Targetting for Facebook Apps ...
Open Graph Sponsored Stories – Laser-Focused Ad-Targetting for Facebook Apps ...Open Graph Sponsored Stories – Laser-Focused Ad-Targetting for Facebook Apps ...
Open Graph Sponsored Stories – Laser-Focused Ad-Targetting for Facebook Apps ...
Die Socialisten
 
Bye Bye, Promo-Tab
Bye Bye, Promo-TabBye Bye, Promo-Tab
Bye Bye, Promo-Tab
Die Socialisten
 
Last.fm Scrobbler - Open Graph Showcase f. PMD Summit 2012
Last.fm Scrobbler - Open Graph Showcase f. PMD Summit 2012Last.fm Scrobbler - Open Graph Showcase f. PMD Summit 2012
Last.fm Scrobbler - Open Graph Showcase f. PMD Summit 2012
Die Socialisten
 
Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012
Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012
Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012
Die Socialisten
 
Facebook Timeline & Open Graph Platform Briefing 11/2012
Facebook Timeline & Open Graph Platform Briefing 11/2012Facebook Timeline & Open Graph Platform Briefing 11/2012
Facebook Timeline & Open Graph Platform Briefing 11/2012
Die Socialisten
 
Facebook Timeline & Open Graph Platform Briefing 08/2012
Facebook Timeline & Open Graph Platform Briefing 08/2012Facebook Timeline & Open Graph Platform Briefing 08/2012
Facebook Timeline & Open Graph Platform Briefing 08/2012
Die Socialisten
 
 Facebook Timeline & Open Graph Platform Briefing 03/2012
 Facebook Timeline & Open Graph Platform Briefing 03/2012 Facebook Timeline & Open Graph Platform Briefing 03/2012
 Facebook Timeline & Open Graph Platform Briefing 03/2012
Die Socialisten
 

Mehr von Die Socialisten (14)

Hashtag Campaign Case Study: Rubbellos.at - #einlebenlang
Hashtag Campaign Case Study: Rubbellos.at - #einlebenlangHashtag Campaign Case Study: Rubbellos.at - #einlebenlang
Hashtag Campaign Case Study: Rubbellos.at - #einlebenlang
 
So you want to quit Facebook Marketing? (Babelcamp 2014)
So you want to quit Facebook Marketing? (Babelcamp 2014)So you want to quit Facebook Marketing? (Babelcamp 2014)
So you want to quit Facebook Marketing? (Babelcamp 2014)
 
Social Customer Service 
2014 - How Social Media is transforming Customer Se...
Social Customer Service 
2014 - How Social Media is  transforming Customer Se...Social Customer Service 
2014 - How Social Media is  transforming Customer Se...
Social Customer Service 
2014 - How Social Media is transforming Customer Se...
 
Hashtag-Campaigns
Hashtag-CampaignsHashtag-Campaigns
Hashtag-Campaigns
 
Facebook Payments for Developers
Facebook Payments for DevelopersFacebook Payments for Developers
Facebook Payments for Developers
 
Algorithms are the new gatekeepers
Algorithms are the new gatekeepersAlgorithms are the new gatekeepers
Algorithms are the new gatekeepers
 
Open Graph Sponsored Stories – Laser-Focused Ad-Targetting for Facebook Apps ...
Open Graph Sponsored Stories – Laser-Focused Ad-Targetting for Facebook Apps ...Open Graph Sponsored Stories – Laser-Focused Ad-Targetting for Facebook Apps ...
Open Graph Sponsored Stories – Laser-Focused Ad-Targetting for Facebook Apps ...
 
Bye Bye, Promo-Tab
Bye Bye, Promo-TabBye Bye, Promo-Tab
Bye Bye, Promo-Tab
 
Last.fm Scrobbler - Open Graph Showcase f. PMD Summit 2012
Last.fm Scrobbler - Open Graph Showcase f. PMD Summit 2012Last.fm Scrobbler - Open Graph Showcase f. PMD Summit 2012
Last.fm Scrobbler - Open Graph Showcase f. PMD Summit 2012
 
Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012
Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012
Open Graph - How to connect all the things - AllFacebook DevCon Berlin 2012
 
Abstract
AbstractAbstract
Abstract
 
Facebook Timeline & Open Graph Platform Briefing 11/2012
Facebook Timeline & Open Graph Platform Briefing 11/2012Facebook Timeline & Open Graph Platform Briefing 11/2012
Facebook Timeline & Open Graph Platform Briefing 11/2012
 
Facebook Timeline & Open Graph Platform Briefing 08/2012
Facebook Timeline & Open Graph Platform Briefing 08/2012Facebook Timeline & Open Graph Platform Briefing 08/2012
Facebook Timeline & Open Graph Platform Briefing 08/2012
 
 Facebook Timeline & Open Graph Platform Briefing 03/2012
 Facebook Timeline & Open Graph Platform Briefing 03/2012 Facebook Timeline & Open Graph Platform Briefing 03/2012
 Facebook Timeline & Open Graph Platform Briefing 03/2012
 

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

  • 1. thanks for the ad(d). “Entwicklung von Social-Web-Applikationen auf Facebook und anderen Plattformen” E-Day 2011 / IT Carinthia - Part 2
  • 2. Hands on: 3. Become a Facebook Developer!
  • 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
  • 27. Hands on: 4. Create a Facebook-Page + Tab!
  • 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
  • 36. Facebook für Entwickler - Graph API, JavaScript SDK, Open Graph
  • 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
  • 43. die.socialisten.at Michael Kamleitner michael.kamleitner@socialisten.at Facebook: facebook.com/michael.kamleitner Twitter: @_subnet