Facebookrails 101203062132-phpapp01

113 views
107 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
113
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Facebookrails 101203062132-phpapp01

  1. 1. + Building Facebook Applications with Ruby Alex Koppel, 12/2010
  2. 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. 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. 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. 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. 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. 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. 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. 9. ACCESSING FACEBOOK
  10. 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. 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. 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. 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. 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. 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. 16. FACEBOOK AND RUBY
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. JAVASCRIPT SDK (FORMERLY FACEBOOK CONNECT)
  27. 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. 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. 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. 30. WRAPUP
  31. 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. 32. ME http://facebook.com/koppel https://graph.facebook.com/koppel http://twitter.com/arsduo http://github.com/arsduo http://blog.twoalex.com
  33. 33. EXTRAS
  34. 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. 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 

×