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. I’ve downloaded the script and build the app. However I build it my Mac just opens a styled but without any content page. There’s no second window which shows me a log in window.

Webmentions

  • 50 Twitter Tools and Tutorials For Designers and Developer | GirlyTechStuff July 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    get twitter followers fast…

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

  • Twitter: 50 herramientas y Tutos. « Otto1303 July 19, 2014

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

  • Downloads Twitter API » Example Codes July 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

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

  • Tweet Town Twitter Apps « Tweet Town July 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

    […] 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 19, 2014

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