Skip to main content

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

  1. Twitter is...
  2. Why would you do this?
  3. Requirements
  4. Examples in use
  5. The code
  6. Limitations & lessons learned
  7. Hax & back-channels

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

  1. http://opendna.com/... loads tweets with the #FOK hashtag. (FOK="Friends of Keith" Olbermann)
  2. http://opendna.com/... loads tweets with the #openmedia tag, related to the Canadian Internet activist group OpenMedia.ca.
  3. 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/...%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/... 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.freeshell.org/...

Originally posted to opendna on Wed Jan 26, 2011 at 07:50 PM PST.

Also republished by Toolbox.

EMAIL TO A FRIEND X
Your Email has been sent.
You must add at least one tag to this diary before publishing it.

Add keywords that describe this diary. Separate multiple keywords with commas.
Tagging tips - Search For Tags - Browse For Tags

?

More Tagging tips:

A tag is a way to search for this diary. If someone is searching for "Barack Obama," is this a diary they'd be trying to find?

Use a person's full name, without any title. Senator Obama may become President Obama, and Michelle Obama might run for office.

If your diary covers an election or elected official, use election tags, which are generally the state abbreviation followed by the office. CA-01 is the first district House seat. CA-Sen covers both senate races. NY-GOV covers the New York governor's race.

Tags do not compound: that is, "education reform" is a completely different tag from "education". A tag like "reform" alone is probably not meaningful.

Consider if one or more of these tags fits your diary: Civil Rights, Community, Congress, Culture, Economy, Education, Elections, Energy, Environment, Health Care, International, Labor, Law, Media, Meta, National Security, Science, Transportation, or White House. If your diary is specific to a state, consider adding the state (California, Texas, etc). Keep in mind, though, that there are many wonderful and important diaries that don't fit in any of these tags. Don't worry if yours doesn't.

You can add a private note to this diary when hotlisting it:
Are you sure you want to remove this diary from your hotlist?
Are you sure you want to remove your recommendation? You can only recommend a diary once, so you will not be able to re-recommend it afterwards.
Rescue this diary, and add a note:
Are you sure you want to remove this diary from Rescue?
Choose where to republish this diary. The diary will be added to the queue for that group. Publish it from the queue to make it appear.

You must be a member of a group to use this feature.

Add a quick update to your diary without changing the diary itself:
Are you sure you want to remove this diary?
(The diary will be removed from the site and returned to your drafts for further editing.)
(The diary will be removed.)
Are you sure you want to save these changes to the published diary?

Comment Preferences

Subscribe or Donate to support Daily Kos.

Click here for the mobile view of the site