• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
105
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. + Building Facebook Applications with Ruby Alex Koppel, 12/2010
  • 2. 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
  • 3. WHAT CAN APPS OFFER USERS?  Better interface to Facebook core functionality   Promotion of an existing service   Chase Community Giving, other branded apps Authentication   Netflix, Yelp, Goodreads Create a connection with fans of a brand   iPhoto, Wall moderation and publishing platforms Groupon, Kayak, Goodreads Many applications fall into multiple categories
  • 4. WHAT KINDS OF APPS ARE THERE? Websites • Your own site • Complete control • Javascript SDK • Any level of integration Mobile Apps Canvas Apps Tab Apps • Hosted on facebook.com • Less friction for users on the site • Some limitations (size/etc.) • FBML+FBJS => restrictions Desktop Apps
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. ACCESSING FACEBOOK
  • 10. 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
  • 11. 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  Javascript sets signed cookie cookies  Server  through callback and event libraries provided parsing Preferred method  Easy for users  Keeps people on your site
  • 12. 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
  • 13. PERMISSIONS Granular permission model  55 different controls over data access  User data     Friends’ data    Feed, likes, checkins Demographic data, email Friends’ demographics, likes, checkins, etc. Cannot get friends of friends Acting for user  Publish to feed stories
  • 14. 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
  • 15. 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
  • 16. FACEBOOK AND RUBY
  • 17. 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
  • 18. 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
  • 19. 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"=> ... }
  • 20. 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" => ... }
  • 21. 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", 25T21:27:40+0000", "updated_time"=>"2009-10- "verified"=>true, "locale"=>"de_DE", "link"=>"http://www.facebook.com/koppel" }
  • 22. 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"=>...}, ...], }, ...]
  • 23. 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..."}, ...]
  • 24. 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
  • 25. 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.
  • 26. JAVASCRIPT SDK (FORMERLY FACEBOOK CONNECT)
  • 27. JAVASCRIPT SDK OVERVIEW Evented Javascript library for Facebook interaction  Login and permission management   Cookie  XFBML  Like  session storage and login/logout buttons, profile pics and names Asynchronous API access  Avoid server load/delays when generating your UI
  • 28. JAVASCRIPT SDK EXAMPLES  Login with permissions FB.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>
  • 29. 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 list FB.api({method: ”friends.get”}, callback); // build the UI based on the response 
  • 30. WRAPUP
  • 31. 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 
  • 32. ME http://facebook.com/koppel https://graph.facebook.com/koppel http://twitter.com/arsduo http://github.com/arsduo http://blog.twoalex.com
  • 33. EXTRAS
  • 34. 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
  • 35. 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 