Facebook + Ruby

6,553 views

Published on

An introduction to developing for Facebook using Ruby and the Koala gem, presented to the Ruby Users Group in Munich in December 2010.

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

No Downloads
Views
Total views
6,553
On SlideShare
0
From Embeds
0
Number of Embeds
695
Actions
Shares
0
Downloads
52
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Facebook + Ruby

  1. 1. + Building Facebook Applications with Ruby
  2. 2. WHY DEVELOP WITH FACEBOOK? <ul><li>Over 500 million users </li></ul><ul><ul><li>50% of active users log on every day </li></ul></ul><ul><ul><li>150 million in USA </li></ul></ul><ul><ul><li>10 million in Germany </li></ul></ul><ul><li>Application Platform </li></ul><ul><ul><li>Over 550,000 applications </li></ul></ul><ul><ul><li>Over 1,000,000 websites integrated with Facebook </li></ul></ul><ul><ul><li>Over 150 million users use such FB integrations / month </li></ul></ul><ul><li>Huge audience, extensive Platform </li></ul>
  3. 3. WHAT CAN APPS OFFER USERS? <ul><li>Better interface to Facebook core functionality </li></ul><ul><ul><li>iPhoto, Wall moderation and publishing platforms </li></ul></ul><ul><li>Promotion of an existing service </li></ul><ul><ul><li>Netflix, Yelp, Goodreads </li></ul></ul><ul><li>Create a connection with fans of a brand </li></ul><ul><ul><li>Chase Community Giving, other branded apps </li></ul></ul><ul><li>Authentication </li></ul><ul><ul><li>Groupon, Kayak, Goodreads </li></ul></ul><ul><li>Many applications fall into multiple categories </li></ul>
  4. 4. WHAT KINDS OF APPS ARE THERE? <ul><li>Websites </li></ul><ul><li>Your own site </li></ul><ul><li>Complete control </li></ul><ul><li>Javascript SDK </li></ul><ul><li>Any level of integration </li></ul>Canvas Apps Tab Apps Mobile Apps Desktop Apps <ul><li>Hosted on facebook.com </li></ul><ul><li>Less friction for users on the site </li></ul><ul><li>Some limitations (size/etc.) </li></ul><ul><ul><li>FBML+FBJS => restrictions </li></ul></ul>
  5. 5. WEBSITES <ul><li>Wherever, whatever </li></ul><ul><li>Benefits for users </li></ul><ul><ul><li>A way to share activity </li></ul></ul><ul><ul><li>Easy login </li></ul></ul><ul><li>Lightweight integration </li></ul><ul><ul><li>Social plugins (iframes) </li></ul></ul><ul><ul><li>Javascript SDK only </li></ul></ul><ul><li>Heavyweight integration </li></ul><ul><ul><li>Javascript frontend </li></ul></ul><ul><ul><li>Server backend </li></ul></ul>
  6. 6. CANVAS APPS <ul><li>Live on Facebook </li></ul><ul><li>iframe or FBML </li></ul><ul><ul><li>iframe ~ website </li></ul></ul><ul><ul><li>FBML to be retired </li></ul></ul><ul><li>Less friction than off-FB apps </li></ul><ul><ul><li>Users stay on site </li></ul></ul><ul><li>Have to work within Facebook limits </li></ul><ul><ul><li>iframe container </li></ul></ul><ul><ul><li>Fixed size </li></ul></ul>
  7. 7. TAB APPS <ul><li>Live on Facebook Page </li></ul><ul><li>Tight integration with Page (brand/product) </li></ul><ul><li>Can help drive Liking </li></ul><ul><li>Limitations </li></ul><ul><ul><li>FBML/FBJS only (iframe in the future) </li></ul></ul><ul><ul><li>Size limitation </li></ul></ul><ul><ul><li>First load is anonymous </li></ul></ul>
  8. 8. FACEBOOK INTEGRATION <ul><li>Both front- and back-end integration </li></ul><ul><li>Browser handles tasks requiring interaction </li></ul><ul><ul><li>Login, permissions, publishing stories </li></ul></ul><ul><li>Server handles many API-related tasks </li></ul><ul><ul><li>Offline access, realtime updates, app management </li></ul></ul><ul><ul><li>Persisting results </li></ul></ul><ul><li>Many tasks can be done by either server or client </li></ul><ul><ul><li>Authentication </li></ul></ul><ul><ul><li>API calls </li></ul></ul><ul><ul><li>Let your need guide you </li></ul></ul>
  9. 9. ACCESSING FACEBOOK
  10. 10. FACEBOOK AUTHENTICATION <ul><li>OAuth-based authentication scheme </li></ul><ul><ul><li>Token provides access to user info </li></ul></ul><ul><li>Multiple ways to authenticate </li></ul><ul><ul><li>Javascript API </li></ul></ul><ul><ul><li>Redirect with OAuth code </li></ul></ul><ul><ul><li>Signed request parameters </li></ul></ul><ul><ul><ul><li>Provided in request to tab and canvas apps </li></ul></ul></ul><ul><li>Old proprietary auth scheme being deprecated </li></ul>
  11. 11. AUTHENTICATING WITH JAVASCRIPT <ul><li>iframe-based secure login prompt </li></ul><ul><ul><li>XFBML login button </li></ul></ul><ul><ul><li>Programatic via Javascript </li></ul></ul><ul><ul><li>Includes permissions if desired </li></ul></ul><ul><li>Browser gets OAuth token, user ID, expiration, etc. </li></ul><ul><ul><li>Notified through callback and event </li></ul></ul><ul><li>Javascript sets signed cookie cookies </li></ul><ul><ul><li>Server libraries provided parsing </li></ul></ul><ul><li>Preferred method </li></ul><ul><ul><li>Easy for users </li></ul></ul><ul><ul><li>Keeps people on your site </li></ul></ul>
  12. 12. AUTHENTICATING WITH REDIRECTS <ul><li>Send user to login page on facebook.com </li></ul><ul><li>User redirected to app’s callback with OAuth code </li></ul><ul><li>App server requests token using code and secret </li></ul><ul><li>Server gets OAuth token and expiration </li></ul><ul><ul><li>Can then make server-side API calls </li></ul></ul><ul><li>Use the JS login if you can </li></ul><ul><ul><li>Redirects are disruptive </li></ul></ul><ul><ul><li>Requires server-server communication </li></ul></ul>
  13. 13. PERMISSIONS <ul><li>Granular permission model </li></ul><ul><li>55 different controls over data access </li></ul><ul><li>User data </li></ul><ul><ul><li>Feed, likes, checkins </li></ul></ul><ul><ul><li>Demographic data, email </li></ul></ul><ul><li>Friends’ data </li></ul><ul><ul><li>Friends’ demographics, likes, checkins, etc. </li></ul></ul><ul><ul><li>Cannot get friends of friends </li></ul></ul><ul><li>Acting for user </li></ul><ul><ul><li>Publish to feed stories </li></ul></ul>
  14. 14. FACEBOOK APIS <ul><li>Facebook has 2.5 server-side APIs </li></ul><ul><ul><li>All RESTful with JSON responses </li></ul></ul><ul><li>Graph API </li></ul><ul><ul><li>New, fast, shiny, incomplete </li></ul></ul><ul><ul><li>OAuth authentication </li></ul></ul><ul><ul><li>Accessible via the browser </li></ul></ul><ul><li>REST API </li></ul><ul><ul><li>Supports almost the entire API </li></ul></ul><ul><ul><li>To be deprecated, someday </li></ul></ul><ul><ul><li>Fast new OAuth endpoint </li></ul></ul><ul><ul><li>Slow old custom auth endpoint </li></ul></ul>
  15. 15. API METHODS <ul><li>REST API method names </li></ul><ul><ul><li>Many but not all also available via Graph API </li></ul></ul><ul><ul><li>events.invite </li></ul></ul><ul><ul><li>pages.blockFan </li></ul></ul><ul><ul><li>fql.query </li></ul></ul><ul><ul><li>photos.upload, videos.upload </li></ul></ul><ul><ul><li>ads.createCampaigns </li></ul></ul><ul><ul><li>status.set </li></ul></ul><ul><ul><li>admin.setAppProperties </li></ul></ul><ul><li>Graph API only: </li></ul><ul><ul><li>https://graph.facebook.com/user_id/checkins </li></ul></ul><ul><ul><li>https://graph.facebook.com/app_id/insights </li></ul></ul>
  16. 16. FACEBOOK AND RUBY
  17. 17. MAKING IT WORK WITH RUBY <ul><li>Many Facebook libraries for new Graph/REST APIs </li></ul><ul><ul><li>Koala </li></ul></ul><ul><ul><li>Mogli </li></ul></ul><ul><ul><li>MiniFB </li></ul></ul><ul><ul><li>rest-graph </li></ul></ul><ul><ul><li>FBGraph </li></ul></ul><ul><li>For old REST API/custom auth, one clear winner </li></ul><ul><ul><li>Facebooker </li></ul></ul>
  18. 18. KOALA <ul><li>My goals: lightweight, fast, flexible, tested </li></ul><ul><li>All results as basic Ruby objects (Hash, Array)* </li></ul><ul><li>Full support for Facebook platform </li></ul><ul><ul><li>OAuth, Graph, REST, realtime updates, test users </li></ul></ul><ul><li>Typhoeus and Net::HTTP built in </li></ul><ul><li>Full RSpec coverage </li></ul><ul><li>Rails 3- and Ruby 1.9.2-compatible </li></ul><ul><li>* get_connection and search return GraphCollection < Array, which provides pagination support </li></ul>
  19. 19. AUTHENTICATION WITH COOKIES <ul><li>@oauth = Koala::Facebook::OAuth.new(app_id, secret, callback_url) </li></ul><ul><li># pass in Rack cookies directly </li></ul><ul><li>@oauth.get_user_from_cookies(cookies) # => &quot;2905623&quot; </li></ul><ul><li>@oauth.get_user_info_from_cookies(cookies) </li></ul><ul><li># => { </li></ul><ul><li>&quot;session_key&quot;=> ..., </li></ul><ul><li>&quot;uid&quot;=>&quot;2905623&quot; , </li></ul><ul><li>&quot;sig&quot;=> ..., </li></ul><ul><li>&quot;secret&quot;=>&quot;YeOkUZhI6csLggJ_jFmm2A__&quot;, </li></ul><ul><li>&quot;access_token&quot; => ... </li></ul><ul><li>} </li></ul>
  20. 20. AUTHENTICATION WITH REDIRECTS <ul><li>@oauth = Koala::Facebook::OAuth.new(app_id, secret, callback_url) </li></ul><ul><li>@oauth.url_for_oauth_code(:permissions => &quot;publish_stream&quot;) </li></ul><ul><li># => url </li></ul><ul><li># send your users there, they’ll return with their codes </li></ul><ul><li>@oauth.get_access_token(code) </li></ul><ul><li># => token </li></ul><ul><li>@oauth.get_access_token_info(code) </li></ul><ul><li># => { </li></ul><ul><li>&quot;expires&quot; => seconds_from_now, </li></ul><ul><li>&quot;access_token&quot; => ... </li></ul><ul><li>} </li></ul>
  21. 21. USING THE GRAPH API <ul><li>@graph = Koala::Facebook::GraphAPI.new(oauth_token) </li></ul><ul><li>@graph.get_object(&quot;koppel&quot;) # => { </li></ul><ul><li>&quot; name &quot;=>&quot;Alex Koppel&quot;, </li></ul><ul><li>&quot; timezone &quot;=>1, </li></ul><ul><li>&quot; gender &quot;=>&quot;male&quot;, </li></ul><ul><li>&quot; id &quot;=>&quot;2905623&quot;, </li></ul><ul><li>&quot; first_name &quot;=>&quot;Alex&quot;, </li></ul><ul><li>&quot; last_name &quot;=>&quot;Koppel&quot;, &quot; updated_time &quot;=>&quot;2009-10-25T21:27:40+0000&quot;, </li></ul><ul><li>&quot; verified &quot;=>true, </li></ul><ul><li>&quot; locale &quot;=>&quot;de_DE&quot;, </li></ul><ul><li>&quot; link &quot;=>&quot;http://www.facebook.com/koppel&quot; </li></ul><ul><li>} </li></ul>
  22. 22. USING THE GRAPH API <ul><li>@graph.get_connections(&quot;koppel&quot;, &quot;feed&quot;) </li></ul><ul><li># => [{ # lots of data! </li></ul><ul><li>&quot; id &quot;=>&quot;2905623_174424332576660&quot;, </li></ul><ul><li>&quot; message &quot;=>&quot;At Can-Tine drinking beer, eating spicy poutine, and watching Army of Darkness.&quot;, </li></ul><ul><li>&quot; likes &quot;=>2, </li></ul><ul><li>&quot; comments &quot;=>{&quot;data&quot;=>[{&quot;from&quot;=>{&quot;name&quot;=>&quot;Isaac Wolkerstorfer&quot;, &quot;id&quot;=>&quot;2900100&quot;}, &quot;id&quot;=>&quot;2905623_174424332576660_2109285&quot;, &quot;created_time&quot;=>&quot;2010-12-01T20:31:44+0000&quot;, &quot;message&quot;=>&quot;This place sounds amazing.&quot;}], &quot;count&quot;=>1} </li></ul><ul><li>&quot; from &quot;=>{&quot;name&quot;=>&quot;Alex Koppel&quot;, &quot;id&quot;=>&quot;2905623&quot;}, </li></ul><ul><li>&quot; created_time &quot;=>&quot;2010-12-01T18:05:09+0000&quot;, </li></ul><ul><li>&quot; type &quot;=>&quot;status&quot;, </li></ul><ul><li>“ privacy &quot;=>{&quot;value&quot;=>&quot;NETWORKS_FRIENDS&quot;}, </li></ul><ul><li>&quot; attribution &quot;=>&quot;iPhone&quot;, </li></ul><ul><li>&quot; actions &quot;=>[{&quot;name&quot;=>&quot;Comment&quot;, &quot;link&quot;=>...}, ...], </li></ul><ul><li>}, ...] </li></ul>
  23. 23. USING THE GRAPH API <ul><li>@graph.search(&quot;Muenchen&quot;) </li></ul><ul><li># => [{ # lots of data! </li></ul><ul><li>{&quot; from &quot;=>{&quot;name&quot;=>&quot;Daniel Ragogna&quot;, &quot;id&quot;=>&quot;100000110972279&quot;}, &quot; type &quot; => &quot;status&quot;, &quot; message &quot;=>&quot;Muenchen + Dom Rep. Wir kommen Juhu&quot;, &quot; id &quot;=>&quot;100000110972279_160648203978214&quot;}, </li></ul><ul><li>{&quot; from &quot;=>{&quot;name&quot;=>&quot;Scheinen Saint Jesus Jong&quot;, &quot;id&quot;=>&quot;561597582&quot;}, &quot; type &quot; => &quot;status&quot;, &quot; message &quot;=>&quot;muenchen i m comming&quot;, &quot;id &quot; =>&quot;561597582_171405789546392&quot;}, </li></ul><ul><li>{&quot; name &quot;=>&quot;Main Concept - Muenchen 58&quot;, &quot; from &quot;=>{&quot;name&quot;=>&quot;Sergej Galkin&quot;, &quot;id&quot;=>&quot;100001607331988&quot;}, &quot; id &quot;=>&quot;100001607331988_154183774628283&quot;, &quot; type &quot;=>&quot;video&quot;, &quot; source &quot;=>&quot;http://www.youtube.com/v/tyXYK-CgBQo&autoplay=1&quot;, &quot; message &quot;=>&quot;...das Spiel Das Ich Treib...&quot;}, </li></ul><ul><li>...] </li></ul>
  24. 24. USING THE GRAPH API <ul><li>@graph.put_wall_post(&quot; hey, i'm learning koala &quot;) </li></ul><ul><li># => {&quot;id&quot;=> new_post_id) </li></ul><ul><li>@graph.put_comment(new_post_id, comment_text) </li></ul><ul><li># => {&quot;id&quot;=> new_comment_id} </li></ul><ul><li>@graph.delete_object(new_comment_id) </li></ul><ul><li># => true </li></ul>
  25. 25. INTEGRATING KOALA <ul><li>Easy to integrate Koala into Rails </li></ul><ul><ul><li>Create a before_filter for OAuth validation </li></ul></ul><ul><ul><li>GraphCollections provide pagination params for urls </li></ul></ul><ul><ul><li>Documentation on github wiki </li></ul></ul><ul><li>Can also integrate into authentication middleware </li></ul><ul><ul><li>Devise, OmniAuth, etc. </li></ul></ul>
  26. 26. JAVASCRIPT SDK (FORMERLY FACEBOOK CONNECT)
  27. 27. JAVASCRIPT SDK OVERVIEW <ul><li>Evented Javascript library for Facebook interaction </li></ul><ul><li>Login and permission management </li></ul><ul><ul><li>Cookie session storage </li></ul></ul><ul><li>XFBML </li></ul><ul><ul><li>Like and login/logout buttons, profile pics and names </li></ul></ul><ul><li>Asynchronous API access </li></ul><ul><ul><li>Avoid server load/delays when generating your UI </li></ul></ul>
  28. 28. JAVASCRIPT SDK EXAMPLES <ul><li>Login with permissions </li></ul><ul><li>FB.login(callback, {perms: permList}) </li></ul><ul><li>FB.Event.subscribe(&quot;auth.statusChange&quot;, callback); </li></ul><ul><li>function callback(response) { </li></ul><ul><li>if (response.session) { </li></ul><ul><li>// user successfully logged in </li></ul><ul><li>} else { </li></ul><ul><li> // user cancelled login </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>XFBML login button: </li></ul><ul><li><fb:login-button perms=“read_stream&quot;></fb:login-button> </li></ul>
  29. 29. JAVASCRIPT SDK EXAMPLES <ul><li>Is the user a fan of your Page? </li></ul><ul><li>FB.api({method: &quot;pages.isFan”, page_id: pid}, callback); </li></ul><ul><li>// can show/hide UI elements based on the result </li></ul><ul><li>Friend list </li></ul><ul><li>FB.api({method: ”friends.get”}, callback); </li></ul><ul><li>// build the UI based on the response </li></ul>
  30. 30. WRAPUP
  31. 31. RESOURCES <ul><li>Facebook Developer Wiki </li></ul><ul><ul><li>Graph API </li></ul></ul><ul><ul><li>Javascript SDK </li></ul></ul><ul><ul><li>REST API </li></ul></ul><ul><ul><li>Facebook Developer Policies </li></ul></ul><ul><ul><li>Facebook’s Best Practices </li></ul></ul><ul><ul><li>Facebook’s Bugzilla </li></ul></ul><ul><li>Koala Facebook library </li></ul><ul><li>OAuth Playground </li></ul>
  32. 32. ME <ul><li>http://facebook.com/koppel </li></ul><ul><ul><li>https://graph.facebook.com/koppel </li></ul></ul><ul><li>http://twitter.com/arsduo </li></ul><ul><li>http://github.com/arsduo </li></ul><ul><li>http://blog.twoalex.com </li></ul>
  33. 33. EXTRAS
  34. 34. APPENDIX: GRAPH API IN THE BROWSER! <ul><li>You can play with the Graph API in any browser </li></ul><ul><li>https://graph.facebook.com/ID/CONNECTION_TYPE </li></ul><ul><ul><li>https://graph.facebook.com/koppel </li></ul></ul><ul><ul><li>https://graph.facebook.com/contextoptional/feed </li></ul></ul><ul><ul><li>Private info requires access_token parameter </li></ul></ul><ul><li>Returns JSON to your browser </li></ul><ul><li>Go to http://graph.facebook.com/ to authenticate </li></ul><ul><ul><li>Links with your OAuth token are halfway down Introduction </li></ul></ul><ul><li>Add metadata=1 to object URLs to see available options </li></ul><ul><ul><li>Great way to explore the graph </li></ul></ul>
  35. 35. APPENDIX: PUT_WALL_POST <ul><li>In general, don’t post stories via the API </li></ul><ul><li>Policy limits what you can post automatically </li></ul><ul><ul><li>Can’t include user message </li></ul></ul><ul><li>Browser prompt is a much better experience </li></ul><ul><li>API use appropriate for offline/mobile experiences </li></ul>

×