All in the <head>

– Ponderings & code by Drew McLellan –

– Live from The Internets since 2003 –

About

Textpattern and the Technorati Link Count Widget

23 November 2006

Late last week, Tantek Çelik announced the new Technorati Link Count Widget over on their corporate weblog. This is a little chunck of JavaScript that queries the Technorati servers to find the number of blog posts index that link to any given URL, and then shows that count on the page itself. The idea is you can place this alongside a post or article and readers will see a link to explore other content that references the content they’re currently looking at. It’s like pingback/trackback through an intermediary. As an experiment, I’ve added it to each post on this site.

What I like most about the widget is its implementation of unobtrusive DOM scripting techniques. Adding the widget to a page is a case of adding a regular HTML link element with its rel attribute set to a value of linkcount. The JavaScript will find all instances of such tags in the page and replace them out with live data, but the nice thing is that you can set the basic links to point to Technorati’s blog search for that post. If the user doesn’t have JavaScript enabled (or does bother to wait for the entire page to load and the JavaScript to kick in) they still get the same basic functionality from the link. All that is lost is the neat live count on the page.

Looking at the script itself it’s using a tidy object structure to neatly namespace its functions and variables – a practise that’s increasingly becoming essential for multiple scripts to co-exist on pages without stepping on each other’s toes. They seem to have done a good job here making sure that the widget will play nicely with whatever else is in your page.

Anyway, the purpose of this post wasn’t to prattle on about the widget itself, but to note how I implemented it in Textpattern. The widget page gives instructions for Wordpress and a few other blogging tools, but not for TXP. Essentially, all that is needed to implement the widget is the URL of the content item. Textpattern has no standard template tag for getting that – the only available tag returns a block of markup and not just the bare URL. Therefore we need to be just a little hacky. In your post template, replacing the [square braces] with normal angle brackets:

<a href="http://technorati.com/search/[txp:php] global $thisarticle; echo permlinkurl($thisarticle); [/txp:php]" rel="linkcount">View blog reactions</a>

Update: thanks to Robert in the comments for pointing out that from Texpattern 4.0.4, you can simply do this:

<a href="http://technorati.com/search/[txp:permlink /]" rel="linkcount">View blog reactions</a>

You’ll need to have PHP in templates enabled in order for the former to work, but we should all be running at least 4.0.4 anyway. Following that, just drop a script tag linking to the Link Count script into your page and job’s a good’en. I’ve added mine just before the closing body tag, rather than in the head. This is because the Technorati servers often seem really slow to respond, so having the script down there will minimize the negative impact on my site when that happens.

This is working for me in Textpattern 4.0.3 (not quite the newest), let me know if you spot any problems.

- Drew McLellan

Tags

  • <a href="http://technorati.com/tools/linkcount/" rel="tag">link count</a> <a href="http://technorati.com/tags/technorati" rel="tag">technorati</a> <a href="http://technorati.com/tags/textpattern" rel="tag">textpattern</a>

Comments

  1. § Joshua:

    Thanks so much for posting this. I went to implement this right after they released it but for the life of me I couldn’t figure out how to grab the URL only without the entire link tag in TXP. Really appreciate you posting this and it seems to work on 4.0.4.

    Cheers!

  2. § Robert Wetzlmayr:

    Drew, I’m not sure if this was introduced with Textpattern 4.0.4, but at the most recent incarnation txp:permlink returns the URL of the current article without any surrounding markup when used as a single tag.

    Coincidentally, the code in the tag handler is about just the same as the one in your PHP snippet.

Photographs

Work With Me

edgeofmyseat.com logo

At edgeofmyseat.com we build custom content management systems, ecommerce solutions and develop web apps.

Follow me

Affiliation

  • Web Standards Project
  • Britpack
  • 24 ways

Perch - a really little cms

About Drew McLellan

Photo of Drew McLellan

Drew McLellan (@drewm) has been hacking on the web since around 1996 following an unfortunate incident with a margarine tub. Since then he’s spread himself between both front- and back-end development projects, and now is Director and Senior Web Developer at edgeofmyseat.com in Maidenhead, UK (GEO: 51.5217, -0.7177). Prior to this, Drew was a Web Developer for Yahoo!, and before that primarily worked as a technical lead within design and branding agencies for clients such as Nissan, Goodyear Dunlop, Siemens/Bosch, Cadburys, ICI Dulux and Virgin.net. Somewhere along the way, Drew managed to get himself embroiled with Dreamweaver and was made an early Macromedia Evangelist for that product. This lead to book deals, public appearances, fame, glory, and his eventual downfall.

Picking himself up again, Drew is now a strong advocate for best practises, and stood as Group Lead for The Web Standards Project 2006-08. He has had articles published by A List Apart, Adobe, and O’Reilly Media’s XML.com, mostly due to mistaken identity. Drew is a proponent of the lower-case semantic web, and is currently expending energies in the direction of the microformats movement, with particular interests in making parsers an off-the-shelf commodity and developing simple UI conventions. He writes here at all in the head and, with a little help from his friends, at 24 ways.