Facebookrails 101203062132-phpapp01 (1)

+

Building Facebook Applications with Ruby

Alex Koppel, 12/2010

WHY DEVELOP WITH FACEBOOK?

Over 500 million users 50% of active users log on every day 150 million in USA 10 million in Germany

Application Platform Over 550,000 applications Over 1,000,000 websites integrated with

Facebook Over 150 million users use such FB integrations /

month Huge audience, extensive Platform

WHAT CAN APPS OFFER USERS?

Better interface to Facebook core functionality

iPhoto, Wall moderation and publishing platforms

Promotion of an existing service Netflix, Yelp, Goodreads

Create a connection with fans of a brand Chase Community Giving, other branded apps

Authentication Groupon, Kayak, Goodreads

Many applications fall into multiple categories

WHAT KINDS OF APPS ARE THERE?

Websites• Your own site• Complete control• Javascript SDK• Any level of

integration

Canvas Apps Tab Apps

Mobile Apps

Desktop Apps

• Hosted on facebook.com• Less friction for users on the

site• Some limitations (size/etc.)

• FBML+FBJS => restrictions

WEBSITES

Wherever, whatever Benefits for users

A way to share activity Easy login

Lightweight integration Social plugins

(iframes) Javascript SDK only

Heavyweight integration Javascript frontend Server backend

CANVAS APPS

Live on Facebook iframe or FBML

iframe ~ website FBML to be retired

Less friction than off-FB apps Users stay on site

Have to work within Facebook limits iframe container Fixed size

TAB APPS

Live on Facebook Page

Tight integration with Page (brand/product)

Can help drive Liking Limitations

FBML/FBJS only (iframe in the future)

Size limitation First load is

anonymous

FACEBOOK INTEGRATION

Both front- and back-end integration Browser handles tasks requiring interaction

Login, permissions, publishing stories Server handles many API-related tasks

Offline access, realtime updates, app management

Persisting results Many tasks can be done by either server or

client Authentication API calls Let your need guide you

ACCESSING FACEBOOK

FACEBOOK AUTHENTICATION

OAuth-based authentication scheme Token provides access to user info

Multiple ways to authenticate Javascript API Redirect with OAuth code Signed request parameters

Provided in request to tab and canvas apps

Old proprietary auth scheme being deprecated

AUTHENTICATING WITH JAVASCRIPT

iframe-based secure login prompt XFBML login button Programatic via Javascript Includes permissions if desired

Browser gets OAuth token, user ID, expiration, etc. Notified through callback and event

Javascript sets signed cookie cookies Server libraries provided parsing

Preferred method Easy for users Keeps people on your site

AUTHENTICATING WITH REDIRECTS

Send user to login page on facebook.com User redirected to app’s callback with OAuth

code App server requests token using code and

secret Server gets OAuth token and expiration

Can then make server-side API calls Use the JS login if you can

Redirects are disruptive Requires server-server communication

PERMISSIONS

Granular permission model 55 different controls over

data access User data

Feed, likes, checkins Demographic data, email

Friends’ data Friends’ demographics, likes, checkins, etc. Cannot get friends of friends

Acting for user Publish to feed stories

FACEBOOK APIS

Facebook has 2.5 server-side APIs All RESTful with JSON responses

Graph API New, fast, shiny, incomplete OAuth authentication Accessible via the browser

REST API Supports almost the entire API To be deprecated, someday Fast new OAuth endpoint Slow old custom auth endpoint

API METHODS

REST API method names Many but not all also available via Graph API events.invite pages.blockFan fql.query photos.upload, videos.upload ads.createCampaigns status.set admin.setAppProperties

Graph API only: https://graph.facebook.com/user_id/checkins https://graph.facebook.com/app_id/insights

FACEBOOK AND RUBY

MAKING IT WORK WITH RUBY

Many Facebook libraries for new Graph/REST APIs Koala Mogli MiniFB rest-graph FBGraph

For old REST API/custom auth, one clear winner Facebooker

KOALA

My goals: lightweight, fast, flexible, tested All results as basic Ruby objects (Hash, Array)* Full support for Facebook platform

OAuth, Graph, REST, realtime updates, test users Typhoeus and Net::HTTP built in Full RSpec coverage Rails 3- and Ruby 1.9.2-compatible

* get_connection and search return GraphCollection < Array, which provides pagination support

AUTHENTICATION WITH COOKIES@oauth = Koala::Facebook::OAuth.new(app_id, secret, callback_url)

# pass in Rack cookies directly

@oauth.get_user_from_cookies(cookies) # => "2905623"

@oauth.get_user_info_from_cookies(cookies)

# => {

"session_key"=> ...,

"uid"=>"2905623",

"sig"=> ...,

"secret"=>"YeOkUZhI6csLggJ_jFmm2A__",

"access_token"=> ...

}

AUTHENTICATION WITH REDIRECTS@oauth = Koala::Facebook::OAuth.new(app_id, secret, callback_url)

@oauth.url_for_oauth_code(:permissions => "publish_stream")

# => url

# send your users there, they’ll return with their codes

@oauth.get_access_token(code)

# => token

@oauth.get_access_token_info(code)

# => {

"expires" => seconds_from_now,

"access_token" => ...

}

USING THE GRAPH API@graph = Koala::Facebook::GraphAPI.new(oauth_token)

@graph.get_object("koppel") # => {

"name"=>"Alex Koppel",

"timezone"=>1,

"gender"=>"male",

"id"=>"2905623",

"first_name"=>"Alex",

"last_name"=>"Koppel", "updated_time"=>"2009-10-25T21:27:40+0000",

"verified"=>true,

"locale"=>"de_DE",

"link"=>"http://www.facebook.com/koppel"

}

USING THE GRAPH API @graph.get_connections("koppel", "feed")

# => [{ # lots of data!

"id"=>"2905623_174424332576660",

"message"=>"At Can-Tine drinking beer, eating spicy poutine, and watching Army of Darkness.",

"likes"=>2,

"comments"=>{"data"=>[{"from"=>{"name"=>"Isaac Wolkerstorfer", "id"=>"2900100"}, "id"=>"2905623_174424332576660_2109285", "created_time"=>"2010-12-01T20:31:44+0000", "message"=>"This place sounds amazing."}], "count"=>1}

"from"=>{"name"=>"Alex Koppel", "id"=>"2905623"},

"created_time"=>"2010-12-01T18:05:09+0000",

"type"=>"status",

“privacy"=>{"value"=>"NETWORKS_FRIENDS"},

"attribution"=>"iPhone",

"actions"=>[{"name"=>"Comment", "link"=>...}, ...],

}, ...]

USING THE GRAPH API @graph.search("Muenchen")

# => [{ # lots of data!

{"from"=>{"name"=>"Daniel Ragogna", "id"=>"100000110972279"}, "type" => "status", "message"=>"Muenchen + Dom Rep. Wir kommen Juhu", "id"=>"100000110972279_160648203978214"},

{"from"=>{"name"=>"Scheinen Saint Jesus Jong", "id"=>"561597582"}, "type" => "status", "message"=>"muenchen i m comming", "id"=>"561597582_171405789546392"},

{"name"=>"Main Concept - Muenchen 58", "from"=>{"name"=>"Sergej Galkin", "id"=>"100001607331988"}, "id"=>"100001607331988_154183774628283", "type"=>"video", "source"=>"http://www.youtube.com/v/tyXYK-CgBQo&autoplay=1", "message"=>"...das Spiel Das Ich Treib..."},

...]

USING THE GRAPH API

@graph.put_wall_post("hey, i'm learning koala")

# => {"id"=> new_post_id)

@graph.put_comment(new_post_id, comment_text)

# => {"id"=> new_comment_id}

@graph.delete_object(new_comment_id)

# => true

INTEGRATING KOALA

Easy to integrate Koala into Rails Create a before_filter for OAuth validation GraphCollections provide pagination params for

urls Documentation on github wiki

Can also integrate into authentication middleware Devise, OmniAuth, etc.

JAVASCRIPT SDK(FORMERLY FACEBOOK CONNECT)

JAVASCRIPT SDK OVERVIEW

Evented Javascript library for Facebook interaction

Login and permission management Cookie session storage

XFBML Like and login/logout buttons, profile pics and

names Asynchronous API access

Avoid server load/delays when generating your UI

JAVASCRIPT SDK EXAMPLES

Login with permissionsFB.login(callback, {perms: permList})

FB.Event.subscribe("auth.statusChange", callback);

function callback(response) {

if (response.session) {

// user successfully logged in

} else {

// user cancelled login

}

};

XFBML login button:<fb:login-button perms=“read_stream"></fb:login-button>

JAVASCRIPT SDK EXAMPLES

Is the user a fan of your Page?FB.api({method: "pages.isFan”, page_id: pid}, callback);

// can show/hide UI elements based on the result

Friend listFB.api({method: ”friends.get”}, callback);

// build the UI based on the response

WRAPUP

RESOURCES

Facebook Developer Wiki Graph API Javascript SDK REST API Facebook Developer Policies Facebook’s Best Practices Facebook’s Bugzilla

Koala Facebook library OAuth Playground

ME

http://facebook.com/koppel https://graph.facebook.com/koppel

http://twitter.com/arsduo

http://github.com/arsduo

http://blog.twoalex.com

EXTRAS

APPENDIX: GRAPH API IN THE BROWSER!

You can play with the Graph API in any browser https://graph.facebook.com/ID/CONNECTION_TYPE

https://graph.facebook.com/koppel https://graph.facebook.com/contextoptional/feed Private info requires access_token parameter

Returns JSON to your browser Go to http://graph.facebook.com/ to authenticate

Links with your OAuth token are halfway down Introduction

Add metadata=1 to object URLs to see available options Great way to explore the graph

APPENDIX: PUT_WALL_POST

In general, don’t post stories via the API Policy limits what you can post automatically

Can’t include user message Browser prompt is a much better experience API use appropriate for offline/mobile

experiences