Distinguish your environments with favicons

I have to admit it, I’m a real neat freak when it comes to my desktop organization. The same goes with Firefox. I like to keep it clean and minimalistic. That’s why I’m using a few Firefox extensions and scripts to hide bookmarks and tab titles.

When I developed SalsaJungle.com, I was sometimes confusing my development and production websites. I know it doesn’t sound too clever but there are times when I reloaded a page after a fix only to realize that I was looking at the production site. That’s what happen when you multitask between development and client support.

Notice the last two tabs which are running the same application on two different environments

Well I took the matter in hands and simply created a second favicon with a different background color for my development environment. I named it favicon_dev.ico and put it in the same directory as the favicon.ico. Then I added this little snippet of haml code to my application.html.haml template :

- if RAILS_ENV == 'development'
  %link{ :rel => "shortcut icon", :href => "/favicon_dev.ico" }

With this code, I force the path of the favicon to favicon_dev.ico in the development environment.

Et voila! Now I know at a glance that blue is for development and red for production!

5 tips for a viral Facebook Connect application

This the fourth article of a series of 4 articles on Facebook Connect.

This fourth and last article about Facebook Connect gives you a few tricks to gain a viral effect with your application on Facebook. This is basically done by getting friends of your users to notice your application.

1- Post updates on your users walls

Using the Stream.publish function, you can post news on your users walls that will appear on their friends newsfeeds. There are different ways to do this and it requires some extra permissions from you users if you wish to auto-publish without users approval each time. Personally, I prefer to let my users decide whether they want the application to publish on their feed and they can personalize the content of the message :

The dialog asking to publish on your wall

2- Add the friends invitation widget

The invitation widget lets your users invite friends to try your application. I used this code to get it done. Unfortunately, the restriction on how many friends you can invite per day is rather draconian.

Friends invitation dialog

3- Add the Fanbox widget

This widget is a simple snippet of code that adds a Fanbox to your page. When a Facebook user become fan of you application, it’s displayed in his friends newsfeed highlights (column on the right).

SalsaJungle.com Fanbox

4- Use Facebook comments system

Another very interesting widget that you can configure in a minute is the comment box. You get the basic comment thread (Facebook style) and the user can choose to publish his comment on his profile. And this equals more visibility for your app.

The Facebook comment box

5- Optimize the Facebook links to your site

When a Facebook user posts a link to your site in a status update or in a message to a friend, you want it to get noticed. Facebook automatically checks for images on your website to display with the link. It also figures out a description by parsing the text on page.

But instead of relying on luck, you should control all of this by using the description meta-tag and the link tag in your HTML header. You tell exactly Facebook which image and description to use when a link is made to a page of your site :

<meta name="description" content="My application description" />
<link rel ="image_src" href="http://montreal.salsajungle.com/images/logo_for_fb.gif">

Note that the image_src href has to be absolute in order to work.

That’s it! Your site should now get all the attention it deserves. Let me know in the comments if you have other ways to promote your Facebook Connect website.

Facebook Connect : Working with offline user’s data access

This the third article of a series of 4 articles on Facebook Connect. It assumes you’re using Rails and the Facebooker gem.

In my Facebook Connnect salsa network application, I have a cron task that runs each night to create new Facebook events associated with clubs. So for example, if there is a salsa night every Tuesday at Moe’s bar, the related Facebook event will be created 7 days in advance on behalf of the administrator of the bar. But in order to create the events on behalf of a Facebook user that doesn’t have an active session on the site, there is a few steps to follow.

1- Request the offline_access extended permission

Some of the Facebook API functionalities require you to get permission from the user first. In this case, we need the offline_permission to access user’s data.

<div id="grant-permissions">
  <fb:prompt-permission perms="offline_access" next_fbjs="$('#grant-permissions').hide()">
    Click here to grant offline access!
  </fb:prompt-permission>
</div>

The previous line can be inserted in your view. The XFBL code creates a link to a popup prompt asking the user for offline access permission. The next_fbjs attribute is a javascript callback function that executes once the user has granted or refused the permission. In this case, we just hide the div using a jQuery function.

2- Store the user’s infinite session key

If the user has granted the offline_access permission, each request will now contain an infinite session key. We need to store this information somewhere in the DB if it’s not already there. In this case, I added a session_key attribute to my User model.

# This goes in your application_controller.rb
before_filter :set_fb_session_key
def set_fb_session_key
  if logged_in? && facebook_session.infinite? && !current_user.fb_session_key
    current_user.update_attribute(:fb_session_key, facebook_session.session_key)
  end
end

You will notice that the keys have this format <random hexadecimal key>-<facebook user_id>

3- Use the session key to access user’s data

Finally, you will be able to access your user’s datas through the Facebooker API by initalizing the session with the user’s session key this way:

facebook_session = Facebooker::Session.create
facebook_session.secure_with!(user.fb_session_key)

That’s it! You can now use the user’s data as you wish!