Sprite Club

UPDATE: Sprite Club’s code has been open-sourced :  https://github.com/clickonchris/spriteclub

===========================================================

I have been working on a Facebook application in my spare time for quite a while now and I think that it is finally interesting enough to start telling people about.

Sprite Club banner

The application is a game called Sprite Club; it is a place where you can judge kids (sprites) on the basis of cuteness, and upload a photo of your own sprite to have them compete for internet fame.  The application is accessible from

apps.facebook.com/spriteclub

or from the friendly url:
www.spriteclub.net

The idea was conceived by my uncle, Matthew Deutch, while looking for an outlet to prove that his daughter is the cutest kid on the internet (We think she’s pretty great).  I am in the project to learn how to do Facebook and social media development.  The application is written in Rails and uses the Facebooker library to interface with Facebook.

Enjoy!

Facebooker – converting from FBML to iFrame

In my free time I dabble in Ruby on Rails development and Facebook application development.   Last year I picked up Mike Mangino’s book, Developing Facebook Platform Applications with Rails, which gives great step-by-step instructions for creating a facebook FBML application using the facebooker gem.

FBML is not the only type of Facebook application, however.  There is also the iframe method, which Lead Facebook Engineer Charlie Cheever has been endorsing for a while.  His blog post gives a good comparison of the two methods:http://www.ccheever.com/blog/?p=10 .  In addition to this, the Facebook developer roadmap (http://developers.facebook.com/roadmap ) shows that soon you will not be able to create new FBML applications, and is recommending that existing FBML applications be migrated to iframe.  The message is clear: time to switch to iframe people!

Unfortunately the tutorials performing this kind of switch are hard to come by.  Mike Mangino has created a new RoR gem named facebooker2 to support iframe and facebook connect development but documentation is limited.

This blog post includes some documentation on how to convert a facebooker FBML app to a facebooker2 iframe app.  Read Charlie Cheever’s blog post to understand the architectural differences between the FBML and iframe approach, especially the bit about server-side FBML.  More details here: http://developers.facebook.com/docs/reference/fbml/serverFbml

Remove the facebooker gem

Get Facebooker2 and mogli

$gem install facebooker2
$gem install mogli

Reccomended: unpack gems to /vendor (http://errtheblog.com/posts/50-vendor-everything)

Update environment.rb, set

RAILS_GEM_VERSION = 2.3.5

Create an initializers/load_facebook_yaml.rb file to read from facebook.yml.  It should include a single line:

Facebooker2.load_facebooker_yaml

Inside your facebook.yml file add the following two parameters to each environment config:
app_id: 131336175362
secret: f7b15a925058e7be60f0a4d56294e938

Application controller

Rename application.rb to application_controller.rb. Add the following command to your application_controller.rb

Include Facebooker2::Rails::Controller

Comment out the set_current_user method

Paste in this method:


def current_user
if session[:user_id]
@current_user ||= User.find(session[:user_id])
elsif current_facebook_user and @current_user.nil?
@current_user = User.find_by_facebook_id(current_facebook_user.id)
session[:user_id] = @current_user.id
end
end

Add a ‘ensure_authenticated_to_facebook’ method to keep making sure that the user has a facebook session when accessing your site.  In my case my sessions/login page just displays “please login to facebook”, and since we’re in an iframe in the context of apps.facebook.com/myapp, there is a facebook login prompt displayed immediately above my page.


before_filter :ensure_authenticated_to_facebook
def ensure_authenticated_to_facebook
if current_user == nil
logger.info "current user is nil"
redirect_to :controller=>'sessions', :action=>'login'
end
end

With Facebook Connect it is not required that your application runs inside the context of apps.facebook.com/myapp.  Your login page could technically detect if it is running in app.facebook.com and only display “please login”, otherwise if you are running it as a standalone page present the user with a facebook connect login button.

Enable oauth 2.0.  This will facebook cause to send a “signed_request” request parameter to your application once the user has authenticated.  Mogli will use this token to authenticate the user and create the current_facebook_user object.

Copy/Rename your .rhtml.erb files to .html.erb.  You will no longer have a canvas and will never render rhtml files again.

Remove  <%= facebook_messages %> in your erb files or replace them with <%= flash[:error]  %> or <%= flash[:error]  %>

Put the facebook connect javascript initializer in your layouts file so that it gets executed during each page load


<% fb_connect_async_js do %>
<%= yield :fb_connect%>
<% end %>

This should always be the first snippet of javascript to be executed as it will instantiate the FB global variable that the rest of your page will probably use.

Start going through your erb files and replace FBML code with <fb:serverFBML /> and their javascript SDK equivalents. This is pretty much the final step and will require the most effort. Use the documentation and test console found here: http://developers.facebook.com/docs/reference/javascript/

-facebooker2 reference project: https://github.com/mmangino/facebooker2_fb_connect_example

-images for stream publisher popups need to be accessible by facebook servers.  You used to use a reverse tunnel so facebook could read them directly from your local server.  If you have images that fall into this category you may still need to use a reverse tunnel.

Facebook Javascript SDKs – Old vs. New

There are two ways to handle initializing your fb:serverFBML tags

1 – using the New Javascript SDK
doc: http://developers.facebook.com/docs/reference/javascript/

(identified by the js library http://connect.facebook.net/en_US/all.js)



2 – Using the Old Javascript SDK
which is what our friends at StackOverflow have done. I reference this thread because it kept coming up while I was solving this problem, and the solution they give is outdated.

http://stackoverflow.com/questions/820421/can-i-use-facebooks-fbfriend-selector-in-an-iframe

(identified by the js library http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php and xd_receiver.html)
doc:http://developers.facebook.com/docs/reference/oldjavascript/



Facebook…

I have never fancied myself a purveyor of social networks. They’ve always come off as a big popularity contest to me – like “lets see who has the most friends”. As I get older however I see the value in using facebook as a tool just to keep in touch with old contacts.

Like Doc from Back to the Future, I say: ” I figured – eh, what the hell?”

presenting the new, socially networked clickonchris:

Christopher Johnson's Facebook profile