12

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.

10 Comment(s)

Legend: Guest Article Author Contributor
  • 1

    Chris Herbert said on

    June 27th, 2008 at 9:57 am

    Has anyone tried these steps with Gmail? I love being able to display the iPhone/Touch interface on my Mac!

    (subscribed to comments)  Add karma Subtract karma  +0
  • 2

    dex said on

    June 27th, 2008 at 10:08 am

    Okay, I tried it with Gmail. Works but doesn’t look good in my opinion.

     Add karma Subtract karma  +0
  • 3

    Chris Herbert said on

    June 27th, 2008 at 10:11 am

    I thought it would look like the iPhone Gmail interface since Facebook does. I am going to try it tonight anyway. Thanks dex! Any other sites to try this way?

    (subscribed to comments)  Add karma Subtract karma  +0
  • 4

    Greg Healy said on

    June 27th, 2008 at 12:28 pm

    Great tutorial. Looks like it will be pretty handy for some websites.

     Add karma Subtract karma  +0
  • 5

    Kali said on

    June 27th, 2008 at 3:44 pm

    Thanks for posting this tutorial. It works really well with Pandora!

     Add karma Subtract karma  +0
  • 6

    Max said on

    June 27th, 2008 at 7:10 pm

    Gotta say, this officially kicks ass for wikipedia.

     Add karma Subtract karma  +0
  • 7

    Fluid Fan said on

    June 28th, 2008 at 2:45 am

    This is an awesome idea.

    I actually just created an SSB with 37sig Campfire and shockingly enough, it’s made the experience even that much better.

    Two weeks ago, you could’ve asked me about Fluid and I wouldn’t be able to tell you any solid uses for an app like this. But now, I get it. After trying some things out with a slew of different web apps, I can with the utmost confidence say, I am an avid fan of Fluid!

    Keep these tips rolling Jacob. I love it.

     Add karma Subtract karma  +1
  • 8

    MikeH said on

    July 1st, 2008 at 1:18 am

    count me in as a fan as well!

     Add karma Subtract karma  +0
  • 9

    Jeremiah Fyffe said on

    July 3rd, 2008 at 5:20 pm

    I would really like to use fluid, but I use 1password for my passwords and use 15 or more character complicated passwords. Can I embed my passwords to be automatically entered somehow when I launch my fluid created “Facebook” app?

    Ahhhh … I hate it when I have to great applications doing two great, but different things and can’t figure out how to make them work together to do something truly beautiful.

    (subscribed to comments)  Add karma Subtract karma  +0
  • 10

    paxton said on

    July 23rd, 2008 at 1:09 pm

    How can I save those icons w/ a transparent bg?

    (subscribed to comments)  Add karma Subtract karma  +0
  • 2 Link(s) Referencing this Post

    More at MacApper

    • Discuss 'Make Your Own Menubar SSB With Fluid' in our new Mac Forums

    Post a Comment


    Post your comment below (spam filtered)