Revamped ‘shared links’ sidebar

Whenever I come across a website worth sharing I save it to my delicious account and tag it ‘wongablog’. Anything with this tag appears in this blog’s sidebar, just beneath the tweets (on the front page only). This works ok, but I’ve recently been using Google Reader’s sharing options in a similar way, and I wanted to combine the two.

Google Reader lets you share posts with any gmail contact. So when I see an interesting post while browsing one of my way-too-many-feeds, I click ‘share’. The post then appears in an ‘Andrew’s shared items’ feed in the Reader account of anyone who wants to follow me. ‘Share with note’ lets me add editorials. I’ve been doing this more and more lately, and I wanted to add them to the blog somehow.

It was trickier than I thought, which just meant I got a bee in my bonnet. I needed some help, but got there in the end: the Shared Links now picks up links from both delicious and GR, and the latter’s ‘share with note’ posts have my little editorials as a description.

I had to learn Yahoo Pipes to get it working. If you’re interested, the method is after the break.

delicious is designed as a bookmarking service, so it helpfully supplies an rss feed of links, titles and descriptions. GR is different, and shares the entire post, including content. I only wanted the link, the title and the shared ‘note’, so I needed to strip out the rest. This seemed like a job for Yahoo Pipes.

I’d never ventured into Yahoo’s RSS app before, but how hard could it be? It did indeed take only two minutes to combine the two RSS feeds, but re-formatting GR took a week, on and off.

It’s easy enough to strip the post content from GR’s feed, but not if you want to keep the shared ‘note’: Google Reader shoves these into a <blockquote> at the top of the post content1. So I needed to remove everything but the initial blockquote. Yahoo Pipes’ only tool for messing around with the post content was the regex tool, which meant I had to learn regular expressions.

I did my best. I knew I needed to have the primary regex search pattern pick out the whole text, while a seconday, bracketed instruction picked out the blockquote. I could then replace the primary result with $1, and I was sorted. But I couldn’t do it. Happily my friend Nod provided me with an expression which worked perfectly in every online validator I could find. Sadly, Pipes rejected it: $1 just doesn’t work if used in a tag expression2. Then Mr Simon figured you could use two expressions to delete everything before and after the blockquote content, using the tags as start and endpoints. Sorted. I’m vaguely embarrassed I didn’t think of it first, mind.

A simple regex cleared the ‘Shared by Krypto’ messages, and another deleted all the content of note-less shared items. I added Pipes modules to keep the items unique, and sorted in date order, then published the combined output as an RSS feed. I pulled this into WordPress using KB Advanced RSS Widget, and all was done.

Except it looked really really boring. Too many un-noted shared items. Needed extra spice. I decided each link needed a little logo representing which sharing-site it came from.

This was a bit silly, as you’re not really meant to use HTML in RSS titles. But I did anyway, and Yahoo Pipes was happy to stick an <img> tag before each title. This confused the living hell out of WordPress until I turned off all the security-filtering (designed to extract javascript from incoming feeds), at which point everything Just Worked.

The RSS feed is useless to anyone but me, as the titles are full of code. And it’s a bit odd that the images are part of the sidebar links. But whatever. I’m just happy I managed it, hence the somewhat unnecessary level of detail in this post. But I was irrationally determined to pull it off, and it’s a while since I’ve had a decent coding challenge. Kinda fun.

  1. if anyone tells me they’re also stored separately in some hidden rss field I will probably cry []
  2. searching on ‘\<blockquote\>(.*?)\</blockquote\>.*’ and replacing with ‘$1’ just deletes the entire <blockquote> leaving everything else intact []