Blogger Hacks, Categories, Tips & Tricks

Sunday, April 29, 2007
Blog Update Feed and Sidebar Display
One question that arises regularly with my blogging is the update dilemma - what should to do with those little scraps of information that pertain to an earlier post? This article outlines an approach to dealing with this common issue.

When I'm following a breaking news story or there's delayed developments or even a random thought occurs, I want to inform my readers in the most convenient way. If it's big enough, a whole new post may be warranted (with a link back to the earlier post). Otherwise, I ask myself: should it be done with a comment or with a manual update to the bottom of the original post? Thanks to Hearsay (and other recent comments hacks), a comment will have visibility across all blog pages, informing all visitors (but not subscribers). If there's a lot of comments on a particular post or a high rate of commenting on the blog, important updates can get lost. Alternatively, appending an update (or follow-up, postscript, addendum, errata or correction) to the post may not get out to subscribers and visitors who are interested.

I've tried to get the best of both worlds by using Yahoo Pipes to automatically generate an update feed for my blog. This feed consists of the most recent updates (to any post on my blog) and can be offered to subscribers, much like a regular post or comment feed. It can also be combined with Hearsay to produce a friendly sidebar panel to display the most recent updates to your site visitors.

The rest of this article introduces the Blogger Update Extractor pipe, explains its operation and how you can use it in your blog. I conclude with some possible alternative uses and pointers on future developments.

First of all, to get a clearer idea about the problem I'm talking about (and my solution), have a look at this post about a court case I was following. As you can see, there were five updates (each about two paragraphs) over the twelve months after the original post. This is fairly common with my posts - perhaps a quarter of them feature one or more updates like this.

I have long adopted the convention of using *** UPDATE *** to indicate that the subsequent text has been appended to the original post. I also use a named anchor (eg <a name="update1"> ... </a>) on each update heading. Why? Two reasons. Firstly, it gives me a unique URL for each update (ie http://...#update1) in case someone wishes to bookmark it. Secondly, my Blog-Nav system picks up anchors so that users can jump up and down the page (use the up/down arrow in the top right to see).

What the Update Extractor pipe does is gather my blog's RSS feed (not Atom - see below) and parse out the updates, returning a new RSS feed that consists of just the most recent updates. This works because of handy feature in Blogger's RSS feed that is not present in Atom: when you update any post it automatically goes to the top of your RSS feed. The rest is just straightforward regular expressions in Yahoo's Pipes.

With this new feed, you can offer it to readers (perhaps after burning it through FeedBurner for stats) and/or display it in your blog's sidebar to let all readers know. The links will point to the actual update, not just the post (eg http://...#update1)

Now, the latest Blogger has support for displaying arbitrary RSS feeds: you can simply use that. Or, you can create a "special" feed that will work with the Hearsay hack to give you a bit more control over presentation.

If you want an RSS feed of your recent updates, use this URL:

http://pipes.yahoo.com/pipes/pipe.run?BlogID=xxxxxxxx&_id=pAQ35A322xGwxdeMouNLYQ&_run=1&_render=rss

(replace xxxxxxxx with your blog's Blogger ID)

If you want a Hearsay-style sidebar panel of your recent updates, insert this code into your Blogger template sidebar:

<div id="recent-updates" ><center><br/><br/><br/>Please wait ... <br/>loading updates.<br/><br/><img src="http://ghill.customer.netspace.net.au/snake_transparent.gif"/></center></div>
<script type="text/javascript" src="http://ghill.customer.netspace.net.au/hearsay/hearsay-v01c.js"></script>
<script type="text/javascript">
hearsay("http://pipes.yahoo.com/pipes/pipe.run?BlogID=xxxxxxxx&_id=Ik9FeAz22xGZT18tqWIyXQ&_run=1&_render=json", "recent-updates", true);
</script>

(Again, where xxxxxxxx is your blog's Blogger ID.)

The Update Extractor comes in three flavours: "Full" grabs all the text following an update (ie to the end of the post); "Partial" grabs just the next (substantial) paragraph and "Hearsay" grabs the partial feed but prepares it for display by the Hearsay script. Please feel free to clone and modify the pipes as needed; I'd appreciate it if you could put a comment here so I can have a look.

NB: Using more Pipes, your blog's update feed can be merged easily with your blog's comment feed if that would make more sense for your blog.

One downside of this solution is when there are multiple updates to a post: it will only "see" the most recent (ie physically last) update. This is okay for low-frequency updates but completely inadequate if you put your updates at the top of the blog.

The problem is that the feed doesn't contain any information about the time of all the updates, just the first publication timestamp and the most-recent update timestamp. To deal with this, I'm now using a new convention whereby instead of naming my anchors "update1", "update2" etc I'm using a timestamp "update1177829961000". Future versions of the pipe will be able to see this and handle multiple updates per post intelligently.

Rather than typing all that in each time, I've made a bookmarklet to help out. (See below for code.) The automatically generated update heading looks like this:

<center><a title="Sunday, 29 April 2007 04:59:21 PM" name="update1177829961000"><span style="font-weight:bold;">*** UPDATE ***</span></a></center>

This same basic approach - mark out content with an anchor, process the RSS feed through Pipes and display via JSON - can apply to other content too. For example, I quote heavily from newspapers in my blog posts, so I could create a feed just of quotes. You could also make a feed for hat-tips, code, links, images, citations, headings or pretty much anything else.

So there you have it: blog update feeds for your subscribers and visitors. As usual, comments, criticisms and suggestions are most welcome.

Timestamp Anchor Bookmarklet Code:

javascript:var insert_date= new Date(); insert_timestamp=Date.parse(insert_date); insert_html='<center><a title=%22'+insert_date.toLocaleString()+'%22 name=%22update'+insert_timestamp+'%22><span style=%22font-weight:bold;%22>*** UPDATE ***</span></a></center>'; document.forms.stuffform.htmlPostBody.value+=insert_html; void(0);

*** UPDATE ***

It occurs to me that maybe a live working example on this page might help. This is what I mean by an update - some content added some hours laters. If you mouseover the update heading thingy above, you'll note that it gives you the time of update. At the risk of inducing recursive madness, here's Freshblog's update feed. Note that the embedded link in the feed doesn't just point to this post, it points to this update (via the named anchor).

*** UPDATE ***

After noticing "something screwy" going on, I've modified this Yahoo Pipe to append the now-required orderby=updated to the feed fetch module. Props to Phydeaux3 for the explanation and syntax.

Filed in: , , ,
Posted at 8:22 AM by Greg.
18 Comments:
<    >
Blogger Singpolyma said...
Very cool -- I assume it requires we use the ***UPDATE*** syntax?

Of course, it could be cloned and modded for alternate syntaxes :)

I like the idea of permalinks to updates in the posts... that's really good!

<    >
Blogger Aditya said...
Now this is more like it! :D Can you put up a demo of this?

<    >
Blogger Aditya said...
I found the demo on your blog ... very 'very' well done! :) I will of-course be taking it apart soon enough!

<    >
Blogger Greg said...
Thanks for the feedback. Aditya, I'm glad you found the "demo" - I'm sure there's a heap of cool things that can be done with slicing and dicing your own content like this.

Singpolyma, it only requires an anchor named with "update" ie <a name="update...."> - what you put inside the anchor is up to you.

<    >
Blogger CoralPoetry said...
Hi,

Thank you for the neat tricks with
updating previous posts with:

... )

... it gives a unique URL for each update (ie http://...#update1) in case someone wishes to bookmark it.

Did you discover this by trial and error and do the RSS feeds and Technorati page update the information?

Would you mind if I added you to my bloglist?

Thanks,
Coral

<    >
Blogger Greg said...
I'm pretty sure that technorati would re-index the content periodically, much like any search engine. I assume they work on the RSS feed for your blog in any case.

It wasn't trial and error; using named anchors (ie http://...#update1) in this way is how they're meant to be used.

Sure, feel free to blogroll this blog, or indeed just the updates, as you see fit.

Thanks for dropping by.

-Greg.

<    >
Anonymous Anonymous said...
Thank you for bringing such nice posts. Your blog is always fascinating to read.

<    >
Anonymous Anonymous said...
Yeah, blogKomm seems to work. If you go to http://lovingjacqui.net/ it's up and running and I have recent comments in the sidebar, in this, PHP powered.

The developer, Holger Kreis, recently updated the script with a much better anti-spam captcha. It allows great styling and all comments are inline.

There are shortcomings with blogKomm though. In particular, all the comments are stored in one flat .txt file and for a high volume blog, this just won't cut out; you need databases like Blogger and Word Press offer.

What I really like on both of my blogs' sidebars is I've fed the recent blog posts, labels, and archives into a list that creates a flyout menu.

Loving Jacqui's flyout menus (including the one above each post) are HTML 4.01 Transitional, not valid XHTML 1.0 Strict. But ChristophDollis.com's is. So my archives don't take up a lot of space and yet they all pop out as needed without even needing to click a drop down list, just hover.

Both work great in Win IE 5.5 and 6 (with the .htc Javascript in this case), and without .htc in pretty much every other browser.

It uses PHP to generate a label cloud, which I transformed into a flyout menu.

To get the label cloud PHP, see Where the Magic Lives. Converting it to whatever HTML outpout is trivial.

My new sidebar favourite, though, is the literal snake graphic when the comments load. Too cool, and then they pop up.

<    >
Blogger Texas Liberty Lady said...
Greg,
this looks fantastic but I am so new to all this - but learning fast tears, tears, oh well.

Question: Does the feed and sidebar display html which goes in the sidebar (under html/Java) I assume, go before or after the timestamp language you gave.

You will probably be laughing at this but I love this widget and want it - can you help me?

Thanks so much for your time.

<    >
Blogger Greg said...
You can create your own "update feed" by plugging your BloggerID (8477527554853995965) into the Yahoo Pipe:

http://pipes.yahoo.com/pipes/pipe.run?BlogID=8477527554853995965&_id=pAQ35A322xGwxdeMouNLYQ&_run=1&_render=rss

Now, you just need to put some updates onto some existing posts and they'll get their own RSS feed. I recommend using the bookmarklet provided above for doing this.

As a separate issue, if you want to have this update feed nicely formatted and showing up in your sidebar, some people can re-use the Hearsay hack for that.

But it sounds like you're using the new Blogger's widgety goodness. This Hearsay feed hack was created for the "old" Blogger (now "Blogger Classic" template).

I'm not sure if you can just sub in arbitrary bits of javascript into your template any more? But I think Blogger already has support for showing off RSS feeds in the sidebar. Just use the RSS module and give it the pipes URL above.

As a third - and entirely unrelated - issue, I notice that one of your blogs is currently showing recent popular search queries for one of my blogs.

The odds of this being a coincidence are pretty small, so I'm going out on a limb and suggesting that you've tried implementing my BuzzFlux hack.

If you'd like to have recent search queries for your blog displayed instead, check out the BuzzFlux instructions. (This requires putting the BlogFlux code snippet into your template.)

Hope this helps - and good luck!

<    >
Blogger Greg said...
Blogger made a change to their feeds today. Now, the item.link element is an array. This broke the Pipe for a few hours before I rectified it.

It works fine now, but if Blogger change it back it will break again.

Naughty Blogger!

<    >
Blogger Soufflè Beaumont said...
Speaking of feed, I thought you might be interested in the latest Blogger widget, WonderTicker, which uses Blogger's JSON feed in a scrolling ticker. It's completely customizable and you can even filter which post titles scroll. For more info, check out www.wonderticker.com

<    >
Blogger jilcov said...
If it's big enough, a whole new post may be warranted (with a link back to the earlier post)

<    >
Anonymous Anonymous said...
i dont know it. But ill try it to costumize my blog. And i hope my blog is so cool. and you can show your demo for that think. Thx

<    >
Anonymous lirik said...
nice info..thanks

<    >
Anonymous lirik said...
nice info..

<    >
Anonymous Andi said...
very2 complete & useful article, how the blog update feed and sidebar display implemented in wordpress..thanks

<    >
Anonymous Softlize Hotstuff said...
Very nice info.. but, why you didn't post any articles again? your articles are very useful, buddy..


eXTReMe Tracker