bioneural.net

Many blogs display a panel for "recent posts" which rely on server-side scripting. iBlog doesn't do server-side scripting, but you can achieve the same effect by using someone else's sever, the power of RSS, and a bit of JavaScript. Here's how...

This article refers to iBlog (version 1.x), a Mac blogging client that was formerly used to publish this site. It may refer to design elements and other features that have since been replaced.

Before you do this, consider that iBlog provides a perfectly good list of recent posts by default, in the BlogPage.txt template. You could, however, choose to display only the most recent post on your blog home page (set "Number of entries in blog page" to 1 in Display Settings). In such a case in makes more sense to list the topics of recent posts in the navigation area (for example).

Step 1: Know your feed

For this to work you need to publish an RSS feed (iBlog does by default; why wouldn't you?). Make a note of your feed URL; it will look something like this:

http://www.bioneural.net/blog/rss.xml

Step 2: Feed your feed to Feed2JS

Bring up Feed2JS in your web browser; click on the Build tab. Then:

1. Enter the URL of your feed as above;
2. Set "Show channel" to no (people won't need reminding they're viewing you blog);
3. Set the "Number of items to display" to 5 if you want to list the last 5 posts;
4. Set "Show/hide item descriptions" to 0 (we want entry titles only);
5. Set "Use HTML in item display" to no (we'll control display using CSS in iBlog);
6. Set "Show item posting date" to yes or no as you choose;
7. Set "Target links in new window" to n (we aren't leaving your blog so why open a new window?);
8. You can safely ignore the last two options (unless you use non-ASCII characters or have a creative itch).

Click on the "Preview Feed" button to make sure this is what you want, and the "Generate JavaScript". Copy the generated code into your HTML editor.

Step 3: Make it valid, son!

You do care about good code, don't you? Time to fix some wrongs in your HTML editor (I have a long relationship with BBEdit). BBEdit's "Check Syntax" function will tell you that the URL path needs encoding. Don't panic; all you have to do is swap each "and" sign for the proper entity encoding (&):

Step 4: Tell it where to go

With you edited code safely in the clipboard, open the iBlog Navigation Editor. Create a new navigation entry and paste your code into the Content area. Using the iBlog default styling, you should have produced something like this:

Of course you are free to override the iBlog defaults and create a custom design (see here). You have now produced an auto-updating simple list of the most recent posts to your blog:

Actions Send this article link by e-mail Print this article without other content Follow responses to this article (comments feed) Share this on del.icio.us, Digg, StumbleUpon Translate this page: DE | ES | FR Follow tag feeds: howto, iblog, Internet, javascript, rss, webdev. Buy for yourself on Amazon.com or Amazon.co.uk, leave a "tip"