SuksitSripitchayaphan

So you have seen some screenshots of FireTwitter in my last post, now I will show you the step-by-step guide on how to create FireTwitter.

Before we start, I’d like to mention the reason I write this guide (besides @goodlan’s request, of course :P)

Quoted from Twhirl’s blog

Twitter mainly is a website that is intended to be used via a web browser, an instant messaging client or SMS. Using these three access points, you are free to fetch information or interact with the service as often as you like, there is no limit imposed.

During this time, where IM interface is not really reliable, and 30 req/hr limit of Twitter’s API renders most desktop clients to almost unusable, web interface seems to be the best way to use Twitter. More than that, I think web interface timeline is far more easier to read than in IM, while it can achieve near real-time updates like IM too.

So are you convinced that web interface is cool? :) Anyway, let’s get started!

1. Configure Firefox to run in a separate profile

First, you’ll have to create a new Firefox profile to be used as twitter client. Just select Start > Run (or press Windows + R) and type in firefox -profilemanager

Note that you have to close all instances of Firefox before issue the command, or it will just open another Firefox window. If the command does not work, try to put it the full path to firefox.exe e.g. "C:\Program Files\Mozilla\Firefox\firefox.exe" -profilemanager

Then the profile manager window will appear.

Click on Create Profile… button, and name the profile whatever you want, for me I just name it “twitter”. You may want to set the profile folder to somewhere other than the default path, in case you format your Windows and don’t want to lose the configuration. When you finish, press Exit

Next we have to create a shorcut to run Firefox in this newly created profile. Copy the original shortcut to firefox.exe and rename it to something else e.g. FireTwitter, then right-click on the shortcut and select Properties…

In the Target text box, put in additional parameter to tell Firefox to use profile named “twitter” (or whatever you named it) by adding -P "twitter" -no-remote at the end.

Before we continue with our new profile, run Firefox normally by double-clicking the original Firefox icon. It will ask which profile you want to use, just select default and mark the option Don’t ask at startup so that your Firefox will behave the same like before.

Now it’s time to start your FireTwitter by clicking the FireTwitter shortcut. the following steps will be done on the newly created profile, not the default one.

2. Install the extensions

The two critical extensions are Stylish and Greasemonkey, the other one that is not really critical but extremely useful if you want to modify the style is Firebug. Thai people who use Firefox 2 should also install MozTle extension.

Just visit those pages and click Add to Firefox button to install the extension. You can install as many extensions as you want before restarting Firefox.

Now your FireTwitter status bar should have these icons:

3. Login to Twitter and apply the styles

Next, you should login to your twitter account by going to http://twitter.com/login. Then install FireTwitter Style by clicking the Load into Stylish button, after that go back to Twitter home and adjust the window width to fit the style… and Viola! you’re now less than half way to finish.

The color scheme used in the style is based on Twhirl’s “Into the dark” color scheme, which is my favorite.

4. Open external links in new window

External links should be opened in new, properly sized windows because you cannot view most web sites in only 350px width. So this is where Greasemonkey kicks in. I wrote a small Greasemonkey script to force the external links to open in a new window. But before we install it, you’ll have to make a decision about Pagination first.

5. Pagination

Now it’s time to decide whether you want automatic page scrolling or not. With automatic page scrolling, when you scroll near the bottom of the page, the next page will be loaded automatically via AJAX. So you will be able to view all pages without clicking any Back or Previous links.

A picture can describe a thousand words: with automatic page scrolling (left), page 2 is loaded automatically, without automatic page scrolling (right), it will display only one page with Older button, just like the normal web interface.

If you don’t want automatic page scrolling, install this script. It will only modify the external links to open in new windows and do nothing more. But if you want automatic page scrolling, install this one. It is a modified version of the awesome Pagerization script in order to force the external links to open in new windows.

There may be more elegant way to do this (like a separate script that hooks to Pagerization and runs every time a new page is inserted) but I’m just a new Greasemonkey user, thus this is the only solution I can figure out for now.

6. Auto reloading

Here it comes to your preferences again — if you don’t want auto reloading then just skip this step, but if you want one, read on.

There are two alternatives for this feature: Firefox extension or Greasemonkey script. ReloadEvery extension lets you easily configure the reload timeout via a drop-down menu near the Refresh button. Whereas a bunch of Greasemonkey scripts can also do this with some useful indicator like StayFresh. So it’s really your choice :)

This is why I said that web interface can achieve near real-time update like IM, because you can specify the reloading period to anything you want. Normally, I prefer 1.5 min. - 2 min.

7. Add some useful utilities

Because of Twitter’s 140 characters limit, one thing that’s really necessary is url shortening service e.g. TinyURL, Snurl, etc. and some image posting service like TwitPic would be nice too. We can add these services to our FireTwitter by adding bookmarks to open them in a new window. Just create a new bookmark and type in the location as

javascript:void window.open('url_to_the_site', '', 'scrollbars=1, width=1024, height=768');

You can always adjust the width and height of the window to suit your screen resolution.

8. Final polish

Now let’s make FireTwitter a little prettier. I recommend Autohide Menubar for hiding the menubar and unhide it on mouse over.

I also hide the Bookmarks Toolbar and use only Navigation Toolbar to hold the Back/Forward/Refresh buttons along with some useful bookmarks. All other unused buttons are removed from the navigation bar (including the location box and search box).

I created a bookmark folder to keep bookmarks to various personal Twitter pages that I use only once in a while such as Friends (http://twitter.com/friends), Followers (http://twitter.com/followers), etc.

For the look and feel, I recommend Foxdie Safari (Blue) theme. It has many button styles and color schemes to play with, and a lot of configurable options.

I also installed Firesomething to get “Firetwitter” in the window title :)

9. Set your home page

Finally, don’t forget to set your home page to http://twitter.com/home so when you run FireTwitter, it will display the latest tweets from your friends.

10. Conclusion

That’s how we can create a practical Twitter web client from Firefox without too much effort. The FireTwitter user style can still be improved (a lot, I guess) or modified to other color schemes.

Moreover, there may be some useful extensions/styles/scripts that I haven’t discovered yet. So any comments or suggestions on how to improve FireTwitter are very welcome! :D