Wednesday, December 13, 2006

Recent Posts Widget for FTP Blogs

Several people asked me for a Recent Posts Widget for FTP-Blogs. Well, here it is! It has the same functionality as the Recent Posts Widget that I developed last month for the Blogger-hosted blogs, using JSON. You can customize it, give it your own styling, and place it anywhere you like on your FTP-blog. Go to the Widget Installation Page for a fool's rush-in, or read on to learn more about this widget!

If you are using a Blogger FTP-blog, you do the post-editing and template-maintenance on Blogger, but your Blog is published to your own domain. Your atom and rss-feeds are published to your domain as well, as xml-files.

So, the first thing you have to do is set up your blog's feeds.

In this example you can see the settings for my ftp-testblog. The root of my domain is at http://home.planet.nl/~hansoosting. Here I created a folder called testfeed to hold the feed files. The resulting xml-file url after publishing the blog will be (in this example) http://home.planet.nl/~hansoosting/testfeed/rss.xml.

If you have set up the site feed, you can install the widget. From my Widget Installation Page click the button to launch the installer.

You can enter the settings for your widget here. Make sure you enter the right path to your rss.xml-file. Notice that the rss-feed contains a maximum of 25 posts.
Click the Create-button. Then select the code in the box, copy it, and paste it into the sidebar of your blog template.
Add some css to your template to make it look as nice as you can, and republish.
My css is extremely simple:

.bbrecpost {
margin-top:10px;
}
.bbrecpostsum {
font-style: italic;
}
.bbwidgetfooter {
margin-top: 10px;
margin-bottom: 10px;
}

Take a look at my FTP Testblog to see this widget in action.

I have only tested this widget both for a full feed and for a short feed, but without comments. I still have to check how to retrieve comments.

Tech Stuff.
I found an extremely clear tutorial on how to parse a xml-file with javascript.
As far as I understand, javascript can not be used to access files from another domain (obviously for security reasons). That is why - for the normal Blogger blogs - the JSON trick is needed. You make a call to the blogger-feed, it sends back a JSON-formatted file and calls your javascript-function to parse it.
Such things are not necessary with a FTP-blog. Your blog, the feeds, and the javascript are all in the same domain.