Friday, April 6, 2012

List all posts in a topic

If you use labels to characterize your posts (and you should, it is a very handy way to organize your blog), you probably know how each label groups those posts together by category on separate label-search pages.

But wait, there's more.

You can list all of the posts with the same label in your sidebar, sorted alphabetically if you like, or in chronological order, oldest first.

For instance: All your recipes. Your 2010 trip to Italy. Your beer reviews. Whatever.

Click on any of the post titles on the list to see the full post. The list is dynamically generated, so it will grow automatically as you add posts.

For an example, look no further than the sidebar of this blog at the lower sidebar of my other blog (I'm not using this trick in this blog at the moment).

Before I provide the step-by-step, an overview. (Or, if you know all this, you can jump directly to the short summary workflow at the end.)

Every label on your blog is associated with a feed that comprises all your posts with that label. A third-party web service called Yahoo Pipes lets you manipulate feeds (for example by sorting them).

Other web services will then turn that reordered feed into a script that, when pasted into a sidebar gadget, will generate the list of posts.

No programming knowledge is required. You cut, paste, and click some buttons.

You got that? We take your blog content, in the form of a feed, completely out of Blogger.

We then manipulate it, turn it into a script, and finally bring it back to your blog.

Feed
There are several formats for a feed of a label on your blog, all equally valid. To keep things simple I'm only going to describe one of them:
http://www.yourblogname.blogspot.com/feeds/posts/default/-/labelname?max-results=999
Swap in your blog url and label to get the feed for that label.

Feed Notes:
  • Substitute your blog's root address for "yourblogname.blogspot.com." If you have a custom (non blogspot) domain, use that.
  • Label names are case-sensitive: if you've labeled posts as "Recipes," do not use "recipes" in the feed.
  • Spaces in the label name, if any, must be rendered as "%20" in many browsers, thus "France%20Trip" not "France Trip."
  • If you paste this url into your browser, you may see a reasonable representation of the posts in the feed or you may see a bewildering set of xml tags.
  • Different browsers render feeds differently, but it doesn't matter how the feed looks.

Reorder
If you want your list of posts to be in the default order, most-recent first, you can skip this step and just port your feed url over to the script maker.

Otherwise, meet Yahoo Pipes, a third-party (i.e., not part of Blogger) web service devoted to mixing, reshuffling, slicing, and dicing feeds of all kinds.

To make this easy, I have written a pipe that will alphabetize your feed and another that will put it in chronological order.

Choose your pipe, enter your feed, run the pipe, and then choose "Get as RSS" from the options near the top of the page.

This last step will generate another feed, which you can then port over to the script maker by copying and pasting from the address bar of your browser.

Feed to Javascript
There are several web sites that turn feeds into scripts. I've been using feed2js.org. Here you enter the feed url and specify the script according to several attributes.

Since you are only taking the titles of the posts for your list, this part is easy.

The first specification you are asked for is the url for the feed. Unless you have skipped Yahoo Pipes (because you want the list of posts to be in Blogger's default chronological order), this is the feed from the pipe, which you can copy and past from the address bar in your web browser.

There's one thing to check about this url. If it begins with
feed://
you must change that to
http://
or feed2js will fail.

You can play with the other specifications to see how they work, but I recommend the following settings for most indexes.
  • Show channel: No.
  • Number of items to display: 999
  • Show/hide item descriptions? How much? 0
  • Show item author? No
  • Use HTML in item display? Yes
  • Show Item Posting Date? Your call
  • Time Zone Offset: Only if showing date
  • Target links in the new window? No
  • UTF-8 Character Encoding: Check "Use UTF-8 character encoding"
  • Podcast enclosures: No
  • Custom CSS: Leave blank
Test this using "Preview Feed" and, when you are satisfied, click "Generate JavaScript." That's as close as you need come to programming.

Remember that the number-one source of errors at this point is failure to change "feed://" to "http://" in the feed url.

Also note that the script will take its formatting from your blog, so the list will look different (and will fit in better) than the preview.

Copy the script and paste it into your blog

Paste the Script into Your Blog
You can paste this into a blog post or a static page, but I think the best place for this sort of index is in your blog's sidebar.

To do that, create a new sidebar gadget through your dashboard's Design setting. Choose "HTML/JavaScript", give the gadget a descriptive title (such as "Recipes" or "Reviews"), paste the script, and save.

Position the gadget where you want, save again, and you are done! Oh wait, an important note.

Long Lists
Unfortunately, Yahoo paginates its feeds in groups of 100 posts. The whole feed is available, but in segments (The link describes this limits and how to get around it).

If you have more than 100 items in your feed, you will have to make a script for each 100-post segment. If you paste the scripts back to back, on the same page or widget, there will be no line or gap.

Blogger similarly paginates its label feeds at 500. If you have more than 500 items in your feed then you will also have to take this into account by basing scripts of 500-1,000 feeds on its second feed "page."

If you read the two links above you will see how to get around these limits, but on request I will write a step-by-step detailing exactly how to set up this index for long lists of more than 100 posts and for very long ones of more than 500.

Summary workflow with links:
1. Get your feed in order and run it through Yahoo Pipes.
  • For an alphabetical list of post titles, use my alphabetizing pipe.
  • For a chronological table of contents, use my chronological pipe.
  • To keep the default last-first order, skip Pipes, go to Step 3.

2. Get the feed of the pipe output

3. Paste the feed into feed2js.org
  • if the feed url begins with "feed://," change that part to "http://"
  • specify the output of the script using the settings at feed2js
  • test the settings to see what you will get, making changes to settings if necessary
  • once you are satisfied, create the script
  • copy the script and return to your blog's Layout settings page (accessible from your dashboard)

4. On your blog's Layout page
  • create a new HTML/Javascript gadget in your sidebar
  • give it a descriptive short title
  • paste the script from feed2js
  • save the gadget
  • position the gadget as you like
  • save the change.

No comments:

Post a Comment