Facebook on Rails

9,634 views

Published on

Developing a FBML Facebook app with rails.

Published in: Technology
2 Comments
9 Likes
Statistics
Notes
  • 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/>
       Reply 
    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/>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,634
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
0
Comments
2
Likes
9
Embeds 0
No embeds

No notes for slide

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 obj.style </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?

×