Facebook App by Rails using Koala

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

[code lang="javascript"]

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

Add the following in config/environment.rb

[code lang="ruby"]

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

[/code]

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

[code lang="ruby"]

# 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

[/code]

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

[code lang="ruby"]

#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
[/code]

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

[code lang="html"]

<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>

[/code]

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

You Home Page

In your home page, add the following things.

In app/controllers/HomeController.rb

[code lang="ruby"]

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

[/code]

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

[code lang="html"]

<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>

[/code]

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

Mark this!
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • Add to favorites
  • RSS
  • Twitter