Facebooker Quick Start - Facebook & Rails

Assumptions: You have a rails application & you want to create a Plugin on Facebook for it. You want it integrated into Facebook & to have the look and feel of Facebook.

Disclaimer: I am writing this as I learn it, it could be all wrong, I will update as I learn more, send me corrections and I will fix.

Outcome : After doing this, you will be able to run your rails app in stand alone mode and as a facebook fbml canvas on the same rails tree. You will have a base fbml tab set in a layout along with a way to add actions & views.

1.) Start by going here and following the directions (up to step 8)
Couple specific things for your app:
- chose fbml & website
- callback url = http://your-public-ip:your-public-port
- make a unique name for your app, remember it, its used for your canvas path below.

2.) Install Facebooker:

script/plugin install http://facebooker.rubyforge.org/svn/trunk/facebooker/
(facebooker is changing rapidly, always make sure you have the latest version of this,
even if you downloaded last week, its tool old)

3.) Configure Facebooker: (if you installed via plugin, it should have created a file
   called facebooker.yml in your config directory. Edit this file and add your keys,
   also use your canvas name for canvas_page_name. Also add your callback_url it should be the same as the facebook setting (your ip and port)
* your api key & secret key can be found on the my applications page of the facebook
  app you create.

4.) Create a new controller called FaceController (you can use script/generate)

5.) Add to top of your new controller:
  ensure_application_is_installed_by_facebook_user
  ensure_authenticated_to_facebook

6.) Add this line to the top of your routes.rb file

  map.facebook_root '', :controller=>"face", :conditions=>{:canvas=>true}

7.) Add this line to your environment file (development.rb)

  ActionController::Base.asset_host = "http://myip:myport"
(this will eventually move the the facebooker.yml file, so if you see it there,
dont do this step)

8.) Create an index method on your new controller

#controller
def index
     @userF = session[:facebook_session].user
end

9.) Create a layout for Facebook apps (in your layouts folder, face.rhtml)

<fb:dashboard>
  <fb:header decoration="add_border" icon="false">MyApp</fb:header>
  <fb:create-button
href="<%= facebook_root_url + url_for(:controller => 'face', :action => "new", :only_path => true,:skip_relative_url_root => true) %>">
New Thing</fb:create-button>   
</fb:dashboard>
<fb:tabs>

<%= fb_tab_item("My Stuff", facebook_root_url + url_for(:controller => :face,:action => :my_stuff,
   :only_path => true, :skip_relative_url_root => true)) %>
<%= fb_tab_item("Other Tab", facebook_root_url + url_for(:controller => :face,:action => :other_tab,
   :only_path => true, :skip_relative_url_root => true)) %>
<%= fb_tab_item("Settings", facebook_root_url + url_for(:controller => :face,:action => :my_settings,
   :only_path => true, :skip_relative_url_root => true)) %>

</fb:tabs>

<%unless flash[:notice].blank? %>
<fb:status><%= flash[:notice] %></fb:status>
<%end%>

<%= yield  %>

10.) Create a view (index.rhtml in face view folder)

Hello from facebooker <BR><br/>

My ID: <%=@userF%> <BR/>

<%=fb_profile_pic(@userF) %>

Friends: <BR/>
<% for a_friend in @userF.friends %>
  <%= fb_name a_friend %><BR>
<% end %>

11.) Try it out:
http://apps.facebook.com/myapp - coming in this way all requests get routed to your FaceController.
or still use your local rails app
http://myappip:myappport - here you should see the regular rails application.

Thanks to the Facebooker team for writing this awesome application and sharing with us and having the
patience to answer our questions! (I asked about 20 questions to get to this point)

Comments

[divebomber]

Thanks a lot for this guide. I've been looking for some confirmation that Facebooker works. Did you use Rails > 2.0?

[Joel Nylund]

Your welcome, I will post an update to this example in a couple days after the team does one more fix to make it easier to sandbox your facebook app. Im using 1.2.6, but it should work fine under 2.x (actually all the developers of facebooker are running 2.x)

[Fernando Correia]

Thank you for this article. It was helpful to me, for I am learning Facebook as I develop an open source sample Facebook app:

http://rubyforge.org/projects/wisdomgems/

I had to adapt some file names: facebook.fbml.erb and index.fbml.erb. Also, I think the layout needs some adjustments. For me, the #layout line was being shown on Facebook so I deleted it. I also closed the tag, even though I'm not sure it needs closing.

[Alex]

I can see my own app in facebook but when I try to navigate to the face_controller it comes up with this error

Facebooker::Session::IncorrectSignature

Any ideas?

[Joel Nylund]

Fernando - your welcome, I will remove the #layout, that was just a comment. Which tag did you close? I will update the example if its wrong.

Alex - to go to your face controller you need to go via facebook via http://apps.facebook.com/yourapp which will call the controller with the proper parameters. You cant go directly to it.

[Joel Nylund]

I see, I have updated the example to remove the #layout comment as its not valid in an rhtml file, also I have added a close tag for in the layout.

There is a much better way to setup the routing and links, I will redo this once the patch is checked in to facebooker.

[Shanti Braford]

Facebooker looks sweet. I've used the other Facebook ruby library, but will give this one a try for my next Rails app.

[S Woodside]

There's currently a bug in the installer. When you try to run mongrel or script/generate the plugin you get "no such file to load -- net/http_multipart_post". The installer isn't copying a file over into vendors/plugins. To fix this, you have to also do:

svn co http://facebooker.rubyforge.org/svn/trunk/facebooker/

cp facebooker/lib/net/http_multipart_post.rb vendor/plugins/facebooker/lib/net/

Then delete the checked out facebooker directory.

[jm]

I also have the same error :

Facebooker::Session::IncorrectSignature

what does that really mean ? But only when i use a form.

If i dont use a form i must use url like this :

http://apps.facebook.com.myapp//action

Any clue ?

[Daniel Bigham]

It should be noted that you need to restart your web server after you install the facebooker plugin in step 2, otherwise you'll get the following error when you add ensure_authenticated_to_facebook to your controller:

undefined method `ensure_authenticated_to_facebook' for YourController:Class