Make Your Own Menubar SSB With Fluid

We at MacApper are big fans of Fluid, the Site-Specific Browser (SSB) creator application from Todd Ditchendorf. This handy little app, which we’ve discussed before, allows you to take your favorite websites and turn them into applications in and of themselves. Basically, you get a fully functioning browser without all the clutter of toolbars and icons of your conventional browser (although you can get that stuff back if you want it). However, with the latest version of Fluid 0.9.2, a couple of new very useful features have been added. In this MacApper tutorial I’ll be explaining how you can create your very own SSB, which you can choose to put in your Menubar as a menubar item or actually on your desktop. Click on after the jump to see how to get started.

The first thing that you want to do is download the latest copy of Fluid. (You can get it from here). After you’ve downloaded, drag the application into your Applications folder. Open it up and click past the security warning (because you’re opening it for the first time). You’ll be greeted by the familiar Fluid interface that has been fairly constant throughout Fluid’s development stages.

For this demo, I’m going to be making a Facebook application, as shown from the information that I’ve provided above. Additionally, I’ve chosen to use one of the Facebook icons that I found in the Flickr Fluid Icon Pool, which is a great resource for finding Fluid SSB icons for almost any website. The icon I chose to use can be found here. Anyways, after entering the URL of the site and the name for your new application, click on the “Create” button and let Fluid work its magic. After a few moments you should get a message saying that your browser has been created successfully.

After you’ve created your browser, click the option to open it and you will be greeted by your newly created SSB. Up until the latest versions of Fluid, this would be the end of the road for your browser. However, using a few tricks and the new features in this latest version of Fluid, you can take your SSB to the next level.

From this step, there are two main options for what you’d like to do with your new SSB. I’m going to show you both, but I’ll show you the one that I prefer first. After creating your browser, click on the menubar location for the Application menu (where it says the name of the Application on the top left of your menubar) and click on “User Agent”. For this particular site I’m going to select the iPhone User Agent, because I know that Facebook has a really nice iPhone interface and it will work perfectly for what we’re about to do next.

After changing your user agent, restart your browser and you should immediately notice the change in the interface of your browser. Now, instead of seeing the full Facebook desktop interface, you should see the specialized iPhone/iPod touch one. (If it doesn’t work, you can click on the lozenge-shaped button on the top right of the window and enter the iPhone Facebook mobile address on your own: http://iphone.facebook.com/?w2m).

After you’ve changed the user agent to get a different interface, you can choose one of two main options. The first option is to click on the “Facebook” menu (top left of the menubar) and choose “Convert to MenuExtra SSB…” After selecting that option it will give you a notification that you have to relaunch your SSB to see the changes. Afterwards you should see a small version of your icon on the top Menubar, and when you click it you will have a fully functioning SSB available without having to launch any other applications. By changing the interface to the iPhone interface, it’s super compact and super easy to use.

This menubar window is fully resizable and interactive. The movements are just as if they were happening on an iPhone itself, complete with sliding motions and other visual effects. This is really helpful and makes having your most visited sites very easy to access at any time. Additionally, you have the option to turn the SSB into an “Embedded SSB”, which basically overlays it onto your desktop and remains fully interactive and live. This is excellent for Google Reader and other things that are constantly getting refreshed. Also, because it’s still a full Fluid browser, you have the opportunity to add Userscripts to even further customize your browsing experience.

With these new features in Fluid, it’s super easy to have your favorite websites literally a single click away! Fluid is a free download from FluidApp.com.