Facebook Application with Rails

I tried to integrate ruby on rails app in Facebook. Developing facebook app is quite easy to with rails and Javascript sdk. The documentation for Facebook Javascript sdk is easy to implement in rails app.

Here the steps to develop facebook app using rails, First we need to create an app in Facebook developer site as shown in the image

App will be created with unique App ID and Application Secret. You will use these values in rails app. Now on another side, we will create an sample rails app using scaffold as

[source language=”ruby”]
rails new blog
cd blog
rails generate scaffold Post name:string title:string content:text
[/source]

Now let us make some changes to integrate facebook with this rails app. Create yaml file in config/facebook.yml with the following contents

[source language=”ruby”]
development: &defaults
client_id: YOUR_APP_ID
client_secret: YOUR_APP_SECRET
scope: user_about_me,user_activities,user_birthday,user_education_history,
user_events,user_groups,user_hometown,user_interests,user_likes
canvas_url: http://apps.facebook.com/UserBookmarks/
test:
<<: *defaults production: <<: *defaults [/source]

Once these changes are done, run you rails app and find your system ip address. Let’s assume your rails app is running in http://192.168.1.103:3000/, use this url to integrate with facebook app. Going back to Facebook app in Developers page, enable Website and App on Facebook and give your rails app running url as shown below

Save the changes and search your App(ex: UserBookmarks) in Facebook, your facebook app running using rails will be loaded inside the canvas page as shown below

Now in the above image, you will be seeing facebook logout, share and send request links. I used Facebook Javascript sdk to communicate with facebook api. In order to use that in your app, you need to edit your erb file. I have changed my application.html.erb file as follows

First you have to load all.js based on the locale as

[source language=”ruby”]

[/source]

Then, load the SDK synchronously which may be useful for debugging with your app_id as

[source language=”ruby”]

[/source]

Then, create a div with id as fb-root and create facebook login button as

[source language=”ruby”]

[/source]

The above will create the Facebook login button and wil change to logout button once it is connected. While logging, it will request you for permission as below

You can use other api like app_request and sharing the info in post. You can send app request to your friends as shown

[source language=”ruby”]
<%= link_to 'Send Request to your friends', '#', :id => :app_request %>

[/source]

Similarly the sample code to post your feed in facebook is as below

[source language=”ruby”]
<%= link_to 'Share your experience', '#', :id => :post_comments %>
$(‘#post_comments’).click(function () {
// calling the API …
var obj = {
method: ‘feed’,
link: ‘http://apps.facebook.com/265171790218414/’,
picture: ‘http://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256×256/User1.png’,
name: ‘User Bookmark App’,
caption: ‘Using RoR and FaceBook’,
description: ‘Integrated RoR app in Facebook through canvas’
};
FB.ui(obj);
return false;
});
[/source]

Now when we click send request link in your app, you can see all your friends as shown

As well as Share your experience link will render a popup as

I have deployed this app in Heroku and replace the Url in FaceBook app as

Also specify the app domain in Facebook app as

I hope this blog will be useful for developing a facebook app using rails. The sample source code can be found at https://github.com/Dhepthi/User-History. Please feel free to improve and send me a pull request.