Announcing Facebooker support for Facebook Connect

Over the last few months I’ve received quite a few requests for Facebook Connect support in Facebooker. Thanks to Kevin Lochner, I’m proud to announce Facebook Connect support in Facebooker. Read on to learn how to create a simple Facebook Connect application.

The setup of a Facebook Connect application is very similar to that of a Facebook Platform Application. You’ll need to create an application using the Facebook Developer tool and then build a Rails application and install the Facebooker plugin. If you need help with this, check out the screencast or My Book. You’ll need to set up your facebooker.yml and configure a callback URL on Facebook.

Once you’ve got a basic application set up and running, we’ll need to generate an xd_receiver file. The xd_receiver file allows Facebook to perform cross domain javascript requests. You can generate this file by running:

  script/generate xd_receiver

A file named xd_receiver.html will be generated and placed in your public directory. Make sure this file is added to your source code control system. It must exist for Facebook Connect to work.

With that setup done, it’s time to try out Facebook Connect. Before we can do anything else, we’ll need to ask our user to login. Let’s create a controller and an action for testing. I called my controller “connect” and just used the index action because I’m lazy. Inside the view for action, we’ll need to include a javascript file and do a little setup. Add this to your view:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
  <%= javascript_include_tag :defaults%>
</head>
<body>
<h1>My Great Application</h1>
<%= fb_connect_javascript_tag %>
<%= init_fb_connect "XFBML"%>
<%= fb_login_button%>

</body>
</html>

Facebook connect requires an XHTML doctype declaration along with a namespace on your HTML element. It also works most reliably if your HTML is valid. If you’re getting strange results, it’s worth validating your HTML. The three calls to helpers are the actual meat of the view. The first call includes the Facebook Connect javascript. The second line runs a little setup and the final line renders an <fb:login-button> tag.

If all goes well, you should see a login button. If you don’t, you’ll need to verify that things are configured just right. There’s a lot of magic going on and it tends to be brittle. Make sure that your callback URL is correctly set and that you are accessing your site using the callback URL. Make sure that your public/xd_receiver.html file exists. Finally, make sure that you have correctly set up your facebooker.yml file.

Take a look at the source of your page. Doesn’t that <fb:login-button> tag look strange? To render FBML inside your page, Facebook is using into the HTML equivalents. The login button is just one of many tags we can use. For example, we can include a user’s profile photo by calling fb_profile_pic Add a call to show your own profile.

Notice that Facebook isn’t showing your picture. That’s because of privacy restrictions. Before we can see information about a Facebook user, we’ll need to login. Click the “connect” button and you should see a popup prompting you to log in. After logging in, your profile picture will now be shown.

Getting access to FBML outside of the Facebook canvas is cool, but it’s just a start to what we can do. When we login using Facebook Connect, Facebook sets several cookies that our application can use to access a Facebook session. Facebooker knows how to use these cookies to set up a facebook session. Add the following code to your controller:

  before_filter :set_facebook_session
  helper_method :facebook_session

That code sets up the users Facebook session and makes it available to the view. With it, you have access to the normal REST API as you can see in the following code.

<% if facebook_session %>
  <h2>You are logged in as <%= facebook_session.user.name %></h2>
<% else %>
  <h2>You are not logged in!</h2>
<% end %>

This means you can ask for data about a user like their name and their friends. You can also post stories to their feed! You have most of the power of a Facebook Platform application inside your existing code!

This support is still very new, so make sure you join the Facebooker mailing list on Rubyforge if you decide to use it. Let us know what you build with it!

Thanks again to Kevin Lochner who provided the patch to support authentication using cookies. Thanks also to Nate Kontny of Inkling Markets who provided a great overview of how Facebook Connect works! Happy New Year everyone! </p