Building your own Twitter client with Fluid and jQuery

Update: I have made some significant changes to Twoot and it now works well as my primary twitter client. Check out the TODO and README over at Github for more information on features etc.

Like many before me, I was searching (unsuccessfully) for a decent twitter client. There are many, but most seem to be ad sponsored or based on a rather hefty framework like AIR (which by now, I guess, has been silently installed on my computer anyhow).

Custom apps have major implications for usability so I decided to roll my own. I wanted to try out Fluid, the Prism-like app to contain web apps in their own process/window, to see if it is possible to build a complete open source ad-free twitter client in a single web page only using javascript and HTML.

So, I cuiled for a jQuery twitter plugin but had to google it to find it. Some minor modifications to the code by the fine folks at SeaOfClouds and adding a method to post new status messages gave this native-looking OS X twitter client (HUD-style to the left, default style to the right and HUD avatars style below):

Twoot in HUD style

Custom twitter client with Fluid and javascript

Twoot with avatars

Thank’s to the twitter json api it was trivial to query my own friend feed and display it in Safari. Then, I used Fluid to create a self contained OSX app that displays my static HTML page. Googling a nice application icon makes it much better-looking in the taskbar. I decided to call it “Twoot”. Twoot consumes little memory and plays nice with embedded URLs (they open in a new Firefox tab).

Unfortunately, Fluid does not allow you to distribute the created app so you will have to roll your own by:

  1. Download and install Fluid.
  2. Create a folder called “twoot” in your home directory.
  3. Download the twoot html, js and css files from github and place in the twoot folder.
  4. Edit twoot.js and set your twitter username and password. (Enter credentials in the basic auth form when launching app the first time).
  5. Open Fluid and create a new app by pointing to the twoot.htm file (e.g. file:///users/you/twoot/twoot.htm) and set a nice icon.
  6. Save the app as “Twoot”.
  7. Your new twitter client is ready! Run it and resize as required, set the window to floating, kill tabs etc. Change the twoot.css and html file to customize it further.

Simple API:s are wonderful for usability!

This entry was posted on Friday, August 1st, 2008 at 00:50 and is filed under Applications, General, Mac, Markup, Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Comments

  1. Måns Sandström says at 2008-08-01 15:08:

    Cool! I’ll try it out. I sympathize with your motives. Only sloth can explain why we nerds would accept to be drowned in ads by free applications.

  2. Nicolas Noben says at 2008-08-04 09:08:

    Great idea.

    I wish you could just distribute it as a standalone app tho.

    The HUV view (black) is gorgeous.
    Cheers

  3. Taiwan Brown says at 2008-08-13 23:08:

    is their away to get a “posted via twoot” on our post?

  4. nicholi says at 2008-09-23 18:09:

    I don’t see where to edit the username and password.

  5. Pete says at 2008-09-23 18:09:

    @nicholi: Sorry, scrapped that part. Since it is based on webkit you will get a standard basic auth login prompt the first time you refresh the window. If you tick the checkbox “remember…” you won’t have to enter your credentials again.

  6. rampancy says at 2008-10-17 13:10:

    Hi there,

    I tried to follow your instructions but it just doesn’t seem to work for me - all I get is either a “host not found” error page or just a blank page with a text input field labelled “Status”. How could I fix this?

  7. Pete says at 2008-10-17 19:10:

    @rampancy: Strange. I just repeated the steps above with the latest version of Fluid. Did you download all the files from github? Please note that you have to enter “file://” before the path when you point out the directory in Fluid.

    What happens if you open the twoot.htm file in Safari? Please note that you can’t open it in Firefox (you will get an “Access to restricted URI denied” error).

    @Taiwan Brown: Done!

  8. ma.tija.cc | building your own koornk client with Fluid and jQuery says at 2008-10-31 10:10:

    [...] building your own koornk client with Fluid and jQuery flukoo is a customizable minimal koornk client for WebKit-based SSBs. It is based on jQuery, Fluid and some basic HTML and CSS. The idea is to provide a native-looking application that is easy to customize to your specific needs. flukoo javascript code is inspired and originally developed by Peter Krantz (twoot). [...]

  9. Carl Leiby says at 2008-11-13 16:11:

    Peter, I’ve got a git patch for you to get growl notifications in. Can I mail it to you somewhere?

    Thanks

  10. Tyrale says at 2008-12-09 17:12:

    Sweetness. Only thing I am trying to find is the avatar setting. How or where please?

  11. Pete says at 2008-12-09 18:12:

    Tyrale, you have to select a theme with avatars. One is included in the hud-black-avatars folder. To switch theme, edit twoot.htm and point the stylesheet to the correct css file in the styles folder. The link element should point to “styles/hud-black-avatars/style.css”.

  12. Tyrale says at 2008-12-09 20:12:

    Thanks. Just got in to fluid 2 days ago. Love the help.

  13. Nathan says at 2008-12-20 23:12:

    Peter,

    I was hoping Twoot would work with either Safari or Chrome on Windows, but that doesn’t appear to be the case. I even tried to backtrack to the original version with the username and password in the javascript, but again no luck. Would you be able to point out which parts of the code are OSX dependent?

  14. Oscar Godson says at 2008-12-23 22:12:

    I’m sorry, but I can’t get it to work. It just keeps saying “getting new tweets”. I was really excited about this too! I hope you can tell me what I need to do.

    I’m running Mac OS X 10.5, Fluid 0.9.5, and put it in my MAMP server.

  15. Travis says at 2008-12-24 05:12:

    Nice work man. Fluid ain’t open source though.

  16. Sarah says at 2009-01-05 04:01:

    Nice work. Is there a way to get a “from application name” on my posts?

  17. Peter krantz says at 2009-01-08 11:01:

    @Sarah It actually says “from Twoot” when you use it.

  18. Twoot : Twitter App Database says at 2009-01-21 23:01:

    [...] Twoot - An ad-free open source minimalistic customizable twitter client for those who know HTML and CSS. Appified with Fluid. [...]

  19. Sarah says at 2009-01-23 00:01:

    Ooh thanks Peter :)

    Any way to resize the app window to be thinner just like your top two screenshots?

  20. distefam says at 2009-02-16 01:02:

    Is there support for viewing replies or direct messages from a separate screen?

  21. John says at 2009-02-20 21:02:

    Very sweet, just discovered Twoot. Only problem I have is it does not refresh and show new tweets from friends. I can manually refresh with Command+R but Twoot won’t do it otherwise. Even so, I like it better than anything else I’ve tried, thanks for sharing.

  22. 50 Công cụ Twitter hay dành cho Designers và Developers | Giải Pháp Số says at 2009-03-03 04:03:

    [...] Building Your Own Twitter Client with Fluid and jQuery Here, you will learn how to build your own Twitter client using Fluid (which contains Web apps in their own process/window), to see if it is possible to build a completely open-source, ad-free Twitter-like client on a single Web page, using only JavaScript and HTML. [...]

  23. 50 Twitter Tools and Tutorials For Designers and Developers says at 2009-03-03 09:03:

    [...] Building Your Own Twitter Client with Fluid and jQuery Here, you module wager how to physique your possess Twitter computer using Fluid (which contains Web apps in their possess process/window), to wager if it is doable to physique a completely open-source, ad-free Twitter-like computer on a azygos Web page, using exclusive JavaScript and HTML. [...]

  24. 50 Twitter Tools and Tutorials For Designers and Developers | ClickLogin Web Design says at 2009-03-03 13:03:

    [...] Building Your Own Twitter Client with Fluid and jQuery Here, you will learn how to build your own Twitter client using Fluid (which contains Web apps in their own process/window), to see if it is possible to build a completely open-source, ad-free Twitter-like client on a single Web page, using only JavaScript and HTML. [...]

  25. Jeremy Ellison says at 2009-03-05 01:03:

    Thank you so much. I may actually be able to use twitter now. (tip: turn it into a MenuExtra). Cheers!

  26. 50 Twitter Tools and Tutorials For Designers and Developers | The Scripts Zone says at 2009-03-06 07:03:

    [...] Building Your Own Twitter Client with Fluid and jQuery Here, you will learn how to build your own Twitter client using Fluid (which contains Web apps in their own process/window), to see if it is possible to build a completely open-source, ad-free Twitter-like client on a single Web page, using only JavaScript and HTML. [...]

  27. Norm says at 2009-03-13 04:03:

    I’ve got a friend who wants to track and post from multiple twitter accounts from a single account. Where is the authentication kept for the app? Where would one start to add multiple accounts, in the same way that monitter.com does multiple searches?

  28. Peter says at 2009-03-13 07:03:

    @Norm Since Twoot uses a webkit instance the authentication details are kept in the OSX keychain. Currently, there is no code to handle authentication and I am not sure how it could be done. Please do investigate and get in touch if you are able to make it work.

  29. Nate Hudson says at 2009-03-17 21:03:

    I converted it to a a menubar extra….works sweet that way!!!!

  30. Joel says at 2009-03-23 00:03:

    Wow! I love it! I’ve tried several different Twitter Apps and really didn’t like them all that much, something was always too quirky about it, and the ads were annoying. I’ve never used Fluid before but will definitely be doing so for different sites and app ideas. THANKS!

  31. Tweet Town Twitter Apps « Tweet Town says at 2009-03-24 02:03:

    [...] Studio. OS X Desktop app by BlueCrestStudios Twittia Twitter-client for OS X by Jeena Paradies Twoot - An ad-free open source minimalistic customizable twitter client for those who know HTML and CSS. [...]

  32. Chris says at 2009-03-25 18:03:

    Maybe I’m an idiot, but can you elaborate on how to download from github? The download link doesn’t seem to work (the zip option gives an error, the tar gives something that’s not a tar file (when ungzipped). Right-clicking on the individual files doesn’t give what I want. I got twoot.htm by cutting and pasting into BBEdit. Surely I’m doing something wrong?!?

  33. Chris says at 2009-03-25 18:03:

    Of course, trying it again after posting, the download link zip option DID work. Doh!

  34. 40 Twitter Applications For Mac OS (Part I) | Piyada's World says at 2009-04-06 06:04:

    [...] Twoot - An ad-free open source minimalistic customizable twitter client for those who know HTML and CSS. [...]

  35. All Twitter Tools & Tutorials 4 Designers & Developers | Twitter Social Networking says at 2009-05-04 02:05:

    [...] Building Your Own Twitter Client with Fluid and jQuery Here, you module wager how to physique your possess Twitter computer using Fluid (which contains Web apps in their possess process/window), to wager if it is doable to physique a completely open-source, ad-free Twitter-like computer on a azygos Web page, using exclusive JavaScript and HTML. [...]

  36. 50 Twitter Tools and Tutorials For Designers and Developers | Tasarım,Bilim,Müzik,Kitap,Sanat,Weblog says at 2009-06-06 09:06:

    [...] Building Your Own Twitter Client with Fluid and jQuery Here, you will learn how to build your own Twitter client using Fluid (which contains Web apps in their own process/window), to see if it is possible to build a completely open-source, ad-free Twitter-like client on a single Web page, using only JavaScript and HTML. [...]

Leave a comment

You can use some HTML elements. You know which they are.