Monday, July 18, 2005

Javascript: Adding Bloglines & Technorati citations

Robert Scoble’s been on a bit of a Technorati-vs-Bloglines kick recently: his initial post, more comparisons; and more; more; yet more. David Berlind calls him on his approach; Scoble responds, twice; and so it goes on. It’d be fair to say this has become a minor obsession.

Meanwhile, the rest of Scoble’s readers got a bit fed up with his new habit of adding citation counts to every post he makes. I fell firmly in the “fed up” camp, commenting:

I hate the links; they’re just so much extra non-content cruft getting in the way of skimming the posts.

And you, Robert, of all people, should understand the value of skimming. To you, every single post in your blog is of interest (as mike put it, you like yourself a lot), so you consider the links useful “for finding other opinions”.

But your readers are a lot more selective in what we find interesting. Not all your posts interest all of us; we skim you. We’re not interested in other opinions on the posts and links that don’t interest us.
The “you of all people” is a reference to Robert’s notorious 1000-feeds-a-day reading habit, a feat he accomplishes with a combination of skim-reading and targeted searches.

In retrospect, that was a little harsh; sure, the links are irritating, but his blog is his place to do whatever he wants with. Sorry Robert. But one thing he said, though, stuck with me:

I wish there was a bit of JavaScript code that I could insert into my posts here, that would add a link automatically.
Well, that seems fairly easily doable; I knocked a quick one up, and here’s an example of it in action on an edited version of one of Robert’s recent roundup posts. Hit the “Add citations” link to see it work. (This won’t work if you're reading in an aggregator, as uses a script loaded from my blog template.)

Brian Smith at Comparison Engines reports: Microsoft officially enters the comparison shopping space.

Sunbelt Blog: So just what does "ignore" mean? (Discussion about Claria and other spyware ratings).

Engadget: FAA not planning to make in-flight cellphone calls very easy. GOOD!!!

Susannah Gardner in USC Annenberg Online Journalism Review: Time to check: Are you using the right blogging tool?

Gizmodo: Joel quits: The Next Generation.

eWeek: New XP SP2 Flaw.

Apophrenia: Which evil nation state are you? (similies for Microsoft, Yahoo, and Google).

add link citations
This doesn’t quite duplicate Robert’s hand-edited citations, which include the link count. That part’s not doable from JavaScript (for security reasons, scripts can’t make requests outside the page’s domain), and even if it were, fetching the link count for each link on each page view would be rather abusive of Bloglines and Technorati. But it’s kinda cute; I can’t quite decide if I want to keep it or not.

The nitty-gritty: function add_autocitations in file blogger-tools.js; pass it the ID of a div or other element to which you want citations added. Add extra citation sources by adding to the citation_sources array.

The citations are added wrapped in a <span class="autocitation">, so they can be styled. The CSS applied here tones down the font size and colours, to make the added links less intrusive:

.autocitation { font-size: 70%; color: #808080; }
.autocitation a:link { color:#8080d0; }
.autocitation a:visited { color:#b080b0; }
.autocitation a:active { color:#d08080; }
.autocitation a:hover { color:#d08080; }

And finally, class="no-autocitation" disables autocitation on any link or containing element: just in case you don’t want your carefully-composed prose messed with.