Tweet
Tweet

Slide 1

Slide 1 text

Building & Distributing Social Apps with Facebook Platform & Open Graph James Pearce & Christine Abernathy

Slide 2

Slide 2 text

Social Applications Facebook Platform Open Graph JavaScript SDK Mobile Web Native Android SDK Authentication Graph API & Dialogs Native Linking PhoneGap

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Need Android Phone examples

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

year years people M years people M

Slide 14

Slide 14 text

160m monthly mobile visitors 1.1b monthly mobile visits Facebook Platform

Slide 15

Slide 15 text

Friends Search News Feed Notifications Requests Bookmarks Open Graph Plugins

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Foursquare 3 Magic Land: Island

Slide 23

Slide 23 text

World War App 2,000 monthly users

Slide 24

Slide 24 text

Social Plugins

Slide 25

Slide 25 text

The Guardian 0 to 3.9+ million Monthy Active Users in 5 months

Slide 26

Slide 26 text

GoodReads 77% increase in Daily Active Users

Slide 27

Slide 27 text

Pinterest 60% increase in daily referrals from Facebook

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Getting Started

Slide 31

Slide 31 text

App Dashboard https://developers.facebook.com/apps

Slide 32

Slide 32 text

https://github.com/facebook... /facebook-js-sdk /facebook-android-sdk /facebook-ios-sdk /facebook-php-sdk

Slide 33

Slide 33 text

window.fbAsyncInit = function() {FB.init({appId: 'APP_ID'});}; (function(d){ var js, id='facebook-jssdk', ref=d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document));

Slide 34

Slide 34 text

FB.login(function(response) { if (response.authResponse) { console.log('Welcome! Fetching your information...'); FB.api('/me', function(response) { console.log('Good to see you, ' + response.name + '.'); }); } else { console.log('User cancelled login or did not authorize.'); } });

Slide 35

Slide 35 text

require_once("facebook.php"); $facebook = new Facebook(array('appId' => 'APP_ID', 'secret' => 'APP_SECRET')); $loginUrl = $facebook->getLoginUrl(array( 'scope' => 'read_stream, friends_likes', 'redirect_uri' => 'https://www.myapp.com/post_login_page' )); ... $user_profile = $facebook->api('/me'); echo "Name: " . $user_profile['name'];

Slide 36

Slide 36 text

https://graph.facebook.com/...

Slide 37

Slide 37 text

https://developers.facebook.com/tools/explorer

Slide 38

Slide 38 text

GET https://graph.facebook.com/738229837 { "id": "738229837", "name": "James Pearce", "first_name": "James", "last_name": "Pearce", "hometown": { "id": "106078429431815", "name": "London, United Kingdom" }, "location": { "name": "Palo Alto, California" ... https://developers.facebook.com/docs/reference/api/

Slide 39

Slide 39 text

GET https://graph.facebook.com/738229837/checkins { "data": [ { "id": "10150835326849838", "from": { "name": "James Pearce", "id": "738229837" }, "message": "Warm and productive in London...", "place": { "id": "109599872410687", "name": "Facebook London"...

Slide 40

Slide 40 text

$facebook->api('/738229837/checkins', 'POST', array( 'access_token' => $facebook->getAccessToken(), 'place' => '109599872410687', 'message' => 'Sitting at work', 'coordinates' => json_encode(array( ... )) ) );

Slide 41

Slide 41 text

Open Graph

Slide 42

Slide 42 text

LISTEN READ RUN EAT Like Like Like Like

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Open Graph Desktop Web App Desktop Web Mobile Web Desktop Web App Desktop Web Mobile Web Native Apps Native Apps

Slide 46

Slide 46 text

▪ Play a Sound ▪ Like a Sound ▪ Post a Sound ▪ Follow a User ▪ Join a Group

Slide 47

Slide 47 text

Permissions Dialog

Slide 48

Slide 48 text

Sharing in the app

Slide 49

Slide 49 text

Publish Actions from every platform Desktop Web App Desktop Web App

Slide 50

Slide 50 text

Android Native & Mobile Web: Newsfeed & Timeline

Slide 51

Slide 51 text

iOS Native: Newsfeed & Timeline

Slide 52

Slide 52 text

Desktop Web: Newsfeed and Ticker

Slide 53

Slide 53 text

Desktop Web: Timeline

Slide 54

Slide 54 text

Building With Open Graph

Slide 55

Slide 55 text

ACTION OBJECT . Model your data

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

. Markup and expose your objects to the Web

Slide 58

Slide 58 text

... Lasagne ... ... http://mysite.com/lasagne

Slide 59

Slide 59 text

. Publish Actions POST https://graph.facebook.com/me/foodapp:cook access_token=234876AB6865... & recipe=http://mysite.com/lasagne

Slide 60

Slide 60 text

user performs action in app client or server posts action to Facebook POST https://graph.facebook.com/me/foodapp:cook access_token=234876AB6865...& recipe=http://mysite.com/lasagne Facebook gets the object's metadata GET http://mysite.com/lasagne

Slide 61

Slide 61 text

▪ Creating Actions and Object Types ▪ Hosting Objects ▪ Permissions and Authentication ▪ Publishing Actions from the Graph Explorer ▪ Reading Actions from the Graph Explorer ▪ Publishing Actions from the Mobile Web Walkthrough

Slide 62

Slide 62 text

Facebook Integration for Android Mobile Best Practices Demo

Slide 63

Slide 63 text

Demo 1. Implement Authentication + Single Sign On ( minutes) 2. Add Social Context - Graph API, Dialogs ( minutes) 3. Add Native Linking to your App ( minutes) 4. Use Apache Cordova / PhoneGap ( minutes)

Slide 64

Slide 64 text

Demo: Authentication - Pre Demo Setup 1. Facebook App Dashboard • Created an app, noted the App ID • Configured the Android settings 2. Demo App • Included the Facebook Android SDK • Added a helper class implementation for API callbacks

Slide 65

Slide 65 text

Demo: Authentication - Code Flow 1. Instantiate the Facebook instance 2. Authorize through Facebook app • (call the authorize SDK method) 3. Handle the callback from the Facebook app • (call the authorizeCallback SDK method) 4. Handle the auth success, failure cases • (implement onComplete method in the callback) 5. Implement the logout flow

Slide 66

Slide 66 text

Demo: Social Context 1. Hackbook for Android 2. Demo app - wire up Feed and Requests

Slide 67

Slide 67 text

Demo: Native Linking 1. Facebook App Dashboard • Configured SSO and Deep Link settings 2. Demo App • Check intent in main launcher • Detect incoming requests • Detect incoming story links

Slide 68

Slide 68 text

Demo: Apache Cordova - Pre Demo Setup 1. Cordova • Downloaded latest Cordova • Cloned Facebook Connect Plugin repo 2. Source web app • Cloned sample, Hackbook for Mobile Web 3. Demo app (Android) • Created basic Cordova Android app • Included the Facebook Android SDK • Included the Facebook JavaScript SDK

Slide 69

Slide 69 text

Demo: Apache Cordova - Code Setup 1. Setup Facebook Connect Plugin • Add FB Connect Plugin to the plugins list • Include the FB Connect Plugin JS library 2. Add the web app • Add the web app assets to the project 3. Modify HTML • Include Cordova and Plugin JS libraries • Use local Facebook JS SDK library • FB.init code, setup FB Connect Plugin

Slide 70

Slide 70 text

James Pearce & Christine Abernathy