Facebookrails 101203062132-phpapp01
Upcoming SlideShare
Loading in...5
×
 

 

Statistics

Views

Total Views
155
Views on SlideShare
155
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Facebookrails 101203062132-phpapp01 Facebookrails 101203062132-phpapp01 Presentation Transcript

  • + 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   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
  • 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
  • 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  Javascript sets signed cookie cookies  Server  through callback and event 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     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
  • 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", 25T21:27:40+0000", "updated_time"=>"2009-10- "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  XFBML  Like  session storage and login/logout buttons, profile pics and names Asynchronous API access  Avoid server load/delays when generating your UI
  • 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>
  • 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 
  • 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 