Using Facebooker to make a Rails site with Facebook Connect (Part 1)

I think that from the title you can pretty much guess what this post will be about, specially if you are familiar with these magic words: Rails, Facebooker, Facebook Connect. Ok they are not that magic, but you can do lots of fun stuff with them. In case you don’t live in the facebook planet I will briefly explain them, since there is a lot of info out there about them I wont get into detail. I won’t explain Rails for obvios reaons.

Facebook Connect

It’s something (who knows what and who cares anyway?) from Facebook that allows you to use your facebook login to login into other web sites.

Facebooker

It’s a gem for Ruby, and also a plugin for Rails that converts the results from the facebook API into ruby objects so you can interact with the API using just ruby.

Let the magic begin…

We want to have a site that handles users like we would normally do, except we won’t handle nor model them. We will get them from facebook. The first thing we want to do is join the developers group in facebook, go to http://www.facebook.com/developers/ and create a new application. You will then have to configure some couple of things, the main one is “Connect URL” in which you should put the url of your site like: “http://my_new_fb_app.com/”. Do not forgett the last slash, it won’t work if it’s not there (and you can spend hours trying to figure out what’s wrong). You have many other setting but we won’t get to them here.

As an advice, you may want to create two apps so that you can have one for development and one for production. the development one for example can point to http://localhost:3000/

Other thing you may see is that facebook gives you some strange numbers after you create your app, now is when we start with facebooker. Follow this tutorial until point 5, we won’t care too much for the other stuff, but you can read it. I want you to know how to install facebooker (and to actually do it),  and then generate and complete the facebooker.yml file.

Now what?

After you have that completed the first thing we wan’t is to show this little pretty blue button  facebook connect. This is the login button, and when you click it a pop up from facebook asking your password and email should appear. So, let’s make that happen.

Add this to your application controller

Add the followng lines to one of your views (typically a login page)

Now you should be seeing the button after you refresh. The facebook_login_users_path is the url you want to redirect your users after they login. As usual in Rails facebook_login is the action and users the controller.

After the user logges in you will have a facebook_session variable abailable to do almost whatever you want. For example you can:

facebook_session.user, this will return you the facebook user and all of it’s methods. Everything you can do with it it’s here http://facebooker.rubyforge.org/classes/Facebooker/User.html. The typicall things you may want are facebook_session.user.first_name, facebook_session.user.last_name, facebook_session.user.first_name.id (this will return an id facebook provides. You can access with it the user any other time).

Other interesting thins you can do is facebook_session.friends to get all the user friends or  facebook_session.user.friends_with_this_app will return all the users that use this application and are already your friends in facebook.

Well, that’s it for now. In part 2 we will discuss a bit about XFBML (facebook markup language) and show you how to invite friends to your app, show stories in their dashboard, etc. Also a little example of using javascript to call the Facebook API.

-colow

14 Responses to “Using Facebooker to make a Rails site with Facebook Connect (Part 1)”

  1. When I use this I am getting an error that undefined local variable or method `fb_connect_javascript_tag’. Any ideas?

  2. Augusto Guido

    Hey BRam!

    I would make sure that the plugin is corretly installed. You can find that helper inside the fb_connect.rb file. Go to “your app root”/vendor/plugins/facebooker/lib/rails/helpers and you should find it there. If it’s not there then make sure you have correctly followed the steps to install the plugin.

    tell me how it went
    thanks!

  3. Hi

    I’m having the same problem as BRAm as well…

    undefined local variable or method `facebook_login_users_path’

    fb_connect.rb file is in /vendor/plugins/facebooker/lib/facebooker/rails/helpers

  4. Augusto Guido

    hi Wayne, thanks for reading !

    It’s not the same problem, in this case facebook_login_users_path is the name of a route in my particular project as I mentioned in the post. So instead of that you should put the path to the action you want to redirect the users after they login using facebook connect.

    In this case it’s the facebook_login action in the users controller.

  5. Hi

    I am getting a javascript error in the script generatet by these lines:

    and the blue button doesn’t appear.
    The error is:
    Element.observe is not a function

    Here is the source code:

    //

    Any ideas?

    Thanks

  6. The code doesn’t appear so i removed the tags..

    Hi

    I am getting a javascript error in the script generatet by these lines:

    fb_connect_javascript_tag
    init_fb_connect “XFBML”
    fb_login_and_redirect(‘/player/player’)

    and the blue button doesn’t appear.
    The error is:
    Element.observe is not a function

    Here is the source code:

    “text/javascript”
    //

    Any ideas?

    Thanks

  7. OH COOME OON !!!

    Hi

    I am getting a javascript error in the script generatet by these lines:

    fb_connect_javascript_tag
    init_fb_connect “XFBML”
    fb_login_and_redirect(’/player/player’)

    and the blue button doesn’t appear.
    The error is:
    Element.observe is not a function

    Here is the source code:

    “text/javascript”
    [CDATA[
    Element.observe(window,’load’, function() {
    FB_RequireFeatures(["XFBML"], function() {
    FB.init(’17d56e9a114f18b8eb2bbb30540eed14′,’/xd_receiver.html’, {});

    fb:login-button onlogin=”window.location.href = "/player/player";”
    fb:login-button

  8. I solved it, i just needed to include Jquery

    Thanks anyway, your post was very helpful.

  9. Augusto Guido

    Hey Andrew sorry I didn’t get back to you before ! does that work using Jquery? I’m using prototype..

    thanks for reading

  10. I had the same problem with the element.observe. I’m using mootools. I removed the init_fb_connect “XFBML” and wrote this javascript instead

    window.addEvent(‘domready’, function() {
    FB_RequireFeatures(["XFBML"], function() {
    FB.init(’0a3d09575ec0586cc776c78a55489832′,’/xd_receiver.html’, {});
    });
    });

    I get the button to show up now

  11. great post, and thanks for the assists, everyone. i just wanted to clear 1 thing up for future googlers:

    :jquery) %>

    is the tag you jQuery folks may be looking for if you’re having trouble.

    thanks

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*