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
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.
- Twitter is…
- Why would you do this?
- 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“
…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.
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.
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).
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”).
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).
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.
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).
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