in Applications, General, Mac, Markup, Usability

Building your own Twitter client with Fluid and jQuery

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).

Update: This project is now deprecated and Twitter has removed basic authentication.

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!

Write a Comment here on the real web

Comment

36 Comments

  1. 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. @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.

  3. 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?

  4. @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!

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

    Thanks

  6. 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”.

  7. 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?

  8. 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.

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

  10. Ooh thanks Peter :)

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

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

  12. 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.

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

  14. 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?

  15. @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.

  16. 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!

  17. 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?!?

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

  19. Beginner out here
    Is it possible to create twoot from XP OS?
    Is Fuild available for XP OS?

  20. I do not get the error when launching it in Safari. I am trying to get it working via an apache server, on the iphone – I see the page, but get no login. I also don’t get the login when I open it directly in Safari (via http).

  21. Why is my twoot going to fiserv? Isnt it supposed to ask for my twitter username and passwd? Where does it store these?

  22. @alvin, I am not sure what you mean by “fiserv” but Twoot will call the twitter API and store your username and password in your local keychain.

  23. This isnt working for me im afraid. Spent a long time trying to get fluid just to create the app and when it finally did it didnt work. You click the app and nothing happens. :(

  24. Downloaded all the source files from github and followed the directions. The SSB loads the styled page with the tweet prompt at the bottom. However, it never prompts for my twitter credentials. I’ve deleted the app and it’s prefs and rebuilt it in fluid a few times.

Webmentions

  • 50 Twitter Tools and Tutorials For Designers and Developer | GirlyTechStuff July 6, 2010

    […] 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. […]

  • Twitter Tools and Tutorials For Designers and Developers « Debasishphp's Blog July 6, 2010

    […] 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. […]

  • get twitter followers fast July 6, 2010

    get twitter followers fast…

    […]Building your own Twitter client with Fluid and jQuery – Peter Krantz[…]…

  • Twitter: 50 herramientas y Tutos. « Otto1303 July 6, 2010

    […] Building Your Own Twitter Client with Fluid and jQuery […]

  • Downloads Twitter API » Example Codes July 6, 2010

    […] 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. […]

  • 40 Twitter Applications For Mac OS (Part I) July 6, 2010

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

  • Geek is a Lift-Style. »Archive » 50 Twitter Tools and Tutorials For Designers and Developers July 6, 2010

    […] 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. […]

  • 50 Twitter Tools and Tutorials For Designers and Developers July 6, 2010

    […] 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. […]

  • Pretty Pretty Pixel Princess July 6, 2010

    […] tweets when the Dow Jones Industrial Average (or any stock or index you like) makes a big jump.This tutorial goes over the basics, teaching you how to build your own Twitter client using Fluid.Interested in […]

  • Turning Any Web App Into a Site Specific Browser App with Fluid [Mac] | APPnox - All about Applications! July 6, 2010

    […] To get ideas on how far you can go with the customization, you could visit this site. […]

  • Tutorials And Tips On Building A Twitter Application | How-To | PelFusion.com July 6, 2010

    […] Building your Own Twitter Client With Fluid and jQuery […]

  • 50 Twitter Tools and Tutorials For Designers and Developers | Tasarım,Bilim,Müzik,Kitap,Sanat,Weblog July 6, 2010

    […] 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. […]

  • All Twitter Tools & Tutorials 4 Designers & Developers | Twitter Social Networking July 6, 2010

    […] 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. […]

  • 40 Twitter Applications For Mac OS (Part I) | Piyada's World July 6, 2010

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

  • Tweet Town Twitter Apps « Tweet Town July 6, 2010

    […] 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. […]

  • 50 Twitter Tools and Tutorials For Designers and Developers | The Scripts Zone July 6, 2010

    […] 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. […]

  • 50 Twitter Tools and Tutorials For Designers and Developers | ClickLogin Web Design July 6, 2010

    […] 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. […]

  • 50 Twitter Tools and Tutorials For Designers and Developers July 6, 2010

    […] 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. […]

  • 50 Công cụ Twitter hay dành cho Designers và Developers | Giải Pháp Số July 6, 2010

    […] 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. […]

  • Twoot : Twitter App Database July 6, 2010

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

  • ma.tija.cc | building your own koornk client with Fluid and jQuery July 6, 2010

    […] 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). […]