View
349
Download
1
Category
Tags:
Preview:
Citation preview
+
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
Recommended