This article describes the use of a simple AJAX-powered webpage to display a (near) real-time feed from Twitter. If you found this page by following a link to a specific hash tag (i.e. #Jan25 for the Egyptian Revolution), it is likely that the page was removed after the tag fell into disuse.
Short Title: #bloxtalk project
Examples: one page like #SOTU, or multiple pages like #egypt and #algeria, or mixed with other elements, like #bloxtalk
Inspired by comments in Diogenes2008’s diary (Jan 25 2011), I rolled out a simple ajax-powered live feed of the #FOK twitter hash tag. Having kinda botched the first version, I gave it some more thought and came out with some innovations to promote real-time, cross platform communication for web events (live blogs, tweetathons, etc). It’s off-the-shelf javascript with vanilla html, blended together to put conversations from multiple platforms on the same page.
This is an easy how-to guide, offered in the hopes that future live blog events can be made more dynamic and live tweet events more accessible to those unfamiliar with twitter.
Contents
- Twitter is…
- Why would you do this?
- Requirements
- Examples in use
- The code
- Limitations & lessons learned
- Hax & back-channels
Originally published 26 January 2011, to DailyKos as “#bloxtalk: roll your own twitter+IRC wall“
Twitter is…
…a micro-blogging platform which makes it exceptionally easy to publish 140 characters-messages from a computer or cell phone. You may not use twitter, but the site is the 10th ranked in the world for traffic, 9th ranked in the US and accounts for a little over 0.3% of global page views (Alexa:Twitter). Twitter can be to real-time public conversations (see “Keith Olbermann – Live-Tweeting The SOTU“) as facebook is to reconnecting with acquaintances forgot (but it’s usually not). Anyway, a great deal has written about the twitter sphere on DailyKos and elsewhere, so back to the subject at hand:
Why would you do this?
Personally, I find twitter’s native tools a little annoying in that they require that you refresh frequently. Twitter search, for example, updates to tell you how many new messages there are but doesn’t load them on the fly. To my eyes, it’s a bit like pre-Ajax days of comments at DailyKos (ct be praised). There are a number of desktop (and smart phone) client applications but if I’m in a browser, I would rather stay in a browser. I don’t entirely trust third-party developers as even the most reputable have been caught out on security but, more importantly, even they usually require a higher commitment to participation than (I feel) should be necessary. That’s where this hack comes in.
It’s based around a simple javascript which can be loaded in (almost) any web browser page without installing extra software or browser plugins. Can be installed almost anywhere, as it doesn’t require server-side programming (you can even load it into your browser from your desktop). With this, you can host a twitter stream in a way that anyone can read it, without knowing their way around twitter.
So it’s fast, convenient, easy but really, it’s about communicating in the back channel. Any time a community gets as big as DailyKos (nevermind Twitter), it’s important to find quiet corners for like-minded people to conspire ways to promote their position. I think that these approaches could let us watch the room while talking to our friends.
Requirements
Software: a modern web browser and a text editor (MS Notepad’s fine)
Server: host plain html files, but you can load it privately from your own computer.
Skills required: (a) a little HTML knowledge; (b) an identifiable twitter feed; and for public use, (d) the ability to upload HTML files.
Examples in use
- http://opendna.com/fok/ loads tweets with the #FOK hashtag. (FOK=”Friends of Keith” Olbermann)
- http://opendna.com/openmedia/twitter… loads tweets with the #openmedia tag, related to the Canadian Internet activist group OpenMedia.ca.
- This shows the #dkos tag and this shows the #sotu tag.
“Great. A new tab for every hash tag.” Yeah, I know. That’s not ideal either, but you can load several pages in one window with frames or iframes. This frameset, for example, loads the DailyKos home page and the #dkos page side-by-side. You could… I don’t know, have the #SOTU feed and DailyKos liveblog comments at the same time? (If you’ve got the screen real estate, of course).
The code
My original source is the LIVE Twitter AJAX Script from @taranfx (some directions there), but you’re welcome to grap the source of any of the pages in the previous section or download them all here (“Save as”).
Search Filters
Setting up the script is really, really easy. Search the file for “search.twitter.com”. You’ll find this
var url = “http://search.twitter.com/search.json?q=%23dkos&callback=?”; // Change your query here
%23 = # so “%23dkos” is #dkos and and “%23followfriday” is #followfriday. Similarly, %40 = @ so “%40barackobama” is @barackobama and %40octothorpe” is @octothorpe. (And octothorpe is the best twitter name. Ever).
[I put up the @barackobama page and was going to make some snarky “you know he doesn’t read this” comment, then I noticed that it was dominated by re-tweets of Leonardo DiCaprio (you’ll approve).]
You can filter by tweets which have a keyword — or phrase if joined by “%20” (space) — and can use “+from:” to filter tweets from a single account. “+from:barackobama” reads the President’s tweets, “%40barackobama” is people talking to his account and “barack%20obama” is people talking about him. You can combine and filter in magnificent ways with a monstrously long search string, but I’ll let you play around with that. Go to http://search.twitter.com/advanced and then adapt the RSS feed.
Colors
With a little HTML/CSS experience, you’ll muddle your way though the font coloring and styling, the page background color and padding. (If you’re new at this, start by changing the hex color codes.) Here’s what’s likely going to trip you up: the background color of the tweets is deeper in the code. Search for
Simple Styling of the boxes START
and you’ll find the background colors for odd- and even-numbered tweets.
Limitations & lessons learned The code does not provide links to individual tweets. If someone comes up with a hack to do that, please let me know.
The vanilla code only pulls one feed and it’s very strict. This raises the possibility that you set up a page with one hash tag for an event, and another one gets used instead. I made a similar this goof during the #SOTU when I set the feed to %23fok (#fok) when +from:keithobermann (from @keithobermann) would have been more appropriate. If you think ahead, you can structure your search string to cast a wider filter and avoid this error.
Hax & back-channels
Tweet this meta You’ve seen those little blue “Tweet this” buttons? (Hint: see the top of this page), well you can get the code here.
Go old school Twitter is limited by the technology it adopted (SMS), so it’s feels very much like talking via text message. If you want to have a chat, why not embed an IRC channel along with the twitter feeds? Rizon.net’s webclient allows you to open and embed an IRC channel with iframes (click the blue icon in the top left).
When I mixed it all together… I came up with this: 
.
Thanks for playing along.
Updated by opendna at Sun Feb 13, 2011, 7:03:51 PM
That last page got borked by the DK4 update and will require a new hack. Here’s an alternate example, just for DK4: http://opendna.com/bloxtalk/dk4