Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Facebook on Rails


Published on

Developing a FBML Facebook app with rails.

Published in: Technology
  • I am glad you found the slides interesting. I didn't call the facebook api directly from the model although that is an interesting idea. There is already java project to combine FQL and jdbc driver. For rails, I think combining the facebook social graph with the rails model interface would be much more intuitive than directly calling the api.<br /><br/>
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice ppt.
    I have a couple of questions,
    1. How close have u been to make your facebook app RESTful? I understand all requests from facebook our POST, but did u change Rails internals to avoid Rails from seeing a POST which is sematically a GET request?
    2. Did u got in to a situation where u had to use sessions in models? to follow fat models principle, having code which finds friends activities etc, wld require session usage in models.<br /><br/>
    Are you sure you want to  Yes  No
    Your message goes here

Facebook on Rails

  1. 1. Rails Meetup Vancouver Facebook on Rails Matthew Chiu Nov 6th, 2007
  2. 2. Outline <ul><li>Anatomy of Facebook Canvas Request </li></ul><ul><li>FBML </li></ul><ul><li>FBJS </li></ul><ul><li>Proprietary Markup vs Web Standards </li></ul><ul><li>Compatibility with Rails MVC model </li></ul><ul><li>Overview of RFacebook </li></ul><ul><li>RFacebook: Subtle bugs and design issues </li></ul><ul><li>Extensions: integrate FBML and IFrame </li></ul>
  3. 3. Dissecting Facebook Canvas Request <ul><li>Page Request for a canvas app is redirected through Facebook both ways. </li></ul><ul><li>Incoming : Facebook sends POST request with user's info ie facebook user id, facebook session id, and a signature (fb_sig params). </li></ul><ul><li>This guarantees the request came from Facebook </li></ul><ul><li>Your app can use the Facebook Session Id to call the Facebook APIs. </li></ul><ul><li>Outgoing : Facebook rewrites your FBML/FBJS into HTML. </li></ul><ul><li>Facebook also asks you to supply callbacks for App Installation, Attachments, and SMS. </li></ul>
  4. 4. FBML <ul><li><fb:header>Form</fb:header> </li></ul><ul><li><fb:editor action=&quot;<%= url_for(:controller => &quot;app&quot;, :action => &quot;edit&quot;)%>&quot; labelwidth=&quot;100&quot;> </li></ul><ul><li><fb:editor-text label=&quot;Title&quot; name=&quot;document[title]&quot; </li></ul><ul><li><fb:editor-textarea label=&quot;Description&quot; name=&quot;doc[body_markup]&quot; </li></ul><ul><li><fb:editor-custom label=&quot;Rating (out of 5)&quot;> </li></ul><ul><li><select name=&quot;ratings&quot;> </li></ul><ul><li><option value=&quot;1&quot;>1*</option> </li></ul><ul><li><option value=&quot;2&quot;>2*</option> </li></ul><ul><li></select> </li></ul><ul><li></fb:editor-custom> </li></ul><ul><li><fb:editor-divider /> </li></ul><ul><li><fb:editor-buttonset> </li></ul><ul><li><fb:editor-button value=&quot;Submit&quot; name=&quot;submit&quot;/> </li></ul><ul><li><fb:editor-cancel /> </li></ul><ul><li></fb:editor-buttonset> </li></ul><ul><li></fb:editor> </li></ul><ul><li>Many more useful FBML tags that can pull data from the backend. </li></ul>
  5. 5. FBJS <ul><li>var e2 = document.getElementById(&quot;venue_address&quot;); </li></ul><ul><li>e2.addEventListener('keydown', venue_listener, false); </li></ul><ul><li>function venue_listener() { </li></ul><ul><li>// if venue address is modified then pop-up save address checkbox </li></ul><ul><li>var elem = document.getElementById(&quot;save_address_checkbox&quot;); </li></ul><ul><li>if (elem != null) { </li></ul><ul><li>elem.setStyle({display : 'none'}); </li></ul><ul><li>venue_listener_done = true; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>DOM access becomes obj.setStyle() instead of </li></ul><ul><li>Many javascript functions have FBJS equivalent (event listeners, AJAX, etc), but not all. </li></ul><ul><li>Biggest problem is you can't use old javascript libraries and APIs like Google Map API. </li></ul>
  6. 6. Proprietary Markup vs. Existing Standards. <ul><li>What are the pros and cons? </li></ul><ul><li>Pro </li></ul><ul><ul><li>Maintain standard look & feel of the social network. </li></ul></ul><ul><ul><li>You can save trips to the backend by accessing data via markup. </li></ul></ul><ul><ul><li>Web standards are insufficient for mobile and other modes of interaction. </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>You have to learn another language and it makes your app less portable. </li></ul></ul><ul><ul><li>Proprietary markup is translated in arbitrary ways (making debugging a pain). </li></ul></ul><ul><ul><li>It breaks existing tools </li></ul></ul>
  7. 7. Compatibility with Rails MVC Model <ul><li>Technical Issues: </li></ul><ul><ul><li>Every request is POST </li></ul></ul><ul><ul><li>Cookies are not persisted (Rails session id is discarded) </li></ul></ul><ul><ul><li>Rails form helpers generate HTML instead of FBML. </li></ul></ul><ul><ul><li>Your development server must be online even for testing. </li></ul></ul><ul><li>Design Issue </li></ul><ul><ul><li>Your are not to supposed to store social data about your users, so you can only see the profile of the current user. It makes interactions between users more difficult. </li></ul></ul>
  8. 8. RFacebook <ul><li>RFacebook provides a Ruby way to call Facebook API. The syntax of calling facebook api is clumsy. </li></ul><ul><li>Solves many technical problems (doesn't provide form helpers, or address testing issue). </li></ul><ul><li>I would rate it a good tool, but changing Facebook interface means unfortunately it doesn't work as promised. </li></ul>
  9. 9. Rfacebook: bugs and design issues <ul><li>RFacebook was designed when there are fewer callbacks, and unpatched Rfacebook doesn't properly handle the following callbacks: Ajax, Attachments and <Form> tags on Canvas. </li></ul><ul><li>Go on Forums and find user-contributed patches. </li></ul><ul><li>Unfortunately, not much interest in contributing back to the community. </li></ul>
  10. 10. Extensions <ul><li>Facebook apps are either FBML or Iframe, but why not both? </li></ul><ul><li>Immediate problems: Canvas apps don't have cookies but IFrame apps do. So you don't have the same session. </li></ul><ul><li>Design problem: FBJS runs in a sandbox and IFrame runs in a sandbox. If you want to mix them freely, they need to communicate. Right now, the only way is FBJS <=> Server <=> IFrame. </li></ul>
  11. 11. Questions?