Facebook App by Rails using Koala

| Comments

To get to know much about developing Facebook applications using a server side, I have chosen with Koala for Rails.  For .NET, Facebook C# SDK is being well supported by Microsoft also (http://facebooksdk.codeplex.com/).  In this post, I explain how to use Koala in your Rails applications.  As any Facebook app, the prerequisite  are:

  • Facebook account (of course you should be the one in the 10% of world population :) )
  • A Facebook application (which could be in sandbox mode), so you should have App ID, App Secret and Callback URL
  • A Rails application in your local machine and the Facebook app pointed to this as http://localhost:3000 (default port for Mongrel or WEBrick)

Installing Koala

Install Koala gem from https://github.com/arsduo/koala by using sudo gem install koala –pre

Configuring Koala

Create facebook.yml in /config with the following content

1
2
3
4
5
6
7
8
9

# config/facebook.yml
development:
 app_id: 184xxxxxxxxxxxx
 secret_key: 80xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 callback_url: http://localhost:3000/
test:
 ...
production:
 ...

Add the following in config/environment.rb

1
2
3
4

# config/environment.rb
# in Rails::Initializer.run do |config|
config.action_controller.allow_forgery_protection = false
config.gem "koala"

The first line enables Facebook callback to your server.  The following line adds koala gem into this application.

Create koala.rb in /config/initializers with the following content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# config/initializers/koala.rb

module Facebook
 CONFIG = YAML.load_file(Rails.root + "/config/facebook.yml")[Rails.env]
 APP_ID = CONFIG['app_id']
 SECRET = CONFIG['secret_key']
 CALLBACK_URL = CONFIG['callback_url']
end

Koala::Facebook::OAuth.class_eval do
 def initialize_with_default_settings(*args)
 case args.size
 when 0, 1
 raise "application id and/or secret are not specified in the config" unless Facebook::APP_ID && Facebook::SECRET
 initialize_without_default_settings(Facebook::APP_ID.to_s, Facebook::SECRET.to_s, Facebook::CALLBACK_URL.to_s)
 when 2, 3
 initialize_without_default_settings(*args)
 end
 end

 alias_method_chain :initialize, :default_settings
end

The above code loads the Facebook.yml settings into Facebook, so you can access AppID, AppSecret and CallbackURL anywhere in your application in an unified way.  The following OAuth extension method is taken from Koala guidance to simplify the instantiation of OAuth.new.

Controller Part

In ApplicationController, add the following

1
2
3
4
5
6
7
8

#app/controller/application.rb

# protect_from_forgery

before_filter :parse_facebook_cookies
def parse_facebook_cookies
 @facebook_cookies = Koala::Facebook::OAuth.new.get_user_info_from_cookie(cookies)
end

Note that protect_from_forgery has been commented.  The following instructions, let this application load OAuth details from cookies for getting Facebook access token.

Your Login Page

Add the following on your login page layout, in this case /app/views/layout/login.html.erb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
 xml:fb="http://www.facebook.com/2008/fbml">
<head>
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 <title>Udooz Sample</title>
 <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>
<div id="fb-root"></div>

<script type="text/javascript">
 FB.init({
 appId  : '<%= Facebook::APP_ID %>',
 status : true, // check login status
 cookie : true, // enable cookies to allow the server to access the session
 xfbml  : true  // parse XFBML
 });

 FB.login(function(response) {
 if (response.session) {
 location.href = '/home'
 } else {
 // user cancelled login
 }
});
</script>
<h1>udooz</h1>
</body>
</html>

In this example, I’ve used Facebook JavaScript SDK for login screen.  To use this, I’ve include FBML scheme in as xml:fb=”http://www.facebook.com/2008/fbml&#8221; followed by referring Facebook SDK script file.

You Home Page

In your home page, add the following things.

In app/controllers/HomeController.rb

1
2
3
4
5
6

class HomeController < ApplicationController
  def index
    graph = Koala::Facebook::GraphAPI.new(@facebook_cookies["access_token"])
    @likes = graph.get_connections("me", "likes")
  end
end

In the above code, new Graph instance has been created.  By using this, I’ve invoked the currently logged in user’s likes.

In app/views/home.html.erb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<table border="0">
 <% if @likes %>
 <% for like in @likes %>
 <tr>
 <td><b><%=h like["name"]%> </b></td>
 </tr>
 <tr>
 <td><%=h like["category"] %></td>
 </tr>
 <tr>
 <td>&ndash;</td>
 </tr>
 <% end %>
 <% end %>
</table>

Now, run your application.  Hope it would be easy.