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.

Update: You can use this same trick to list all the posts on your blog. Just use your main blog feed:
http://www.yourblogname.blogspot.com/feeds/posts/default/?max-results=999
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.

Update: Alas, Yahoo.com discontinued its useful and excellent "Pipes" service, which let us reorder things, in 2015.

One option if you'd like a list of posts in alphabetical order is a script made available by a blogger named Mike Hood. It will accept any valid feed from your blog (posts, labels, even comments)

It is a little less user friendly than Pipes, but it does work! It also handles feeds larger than 150 items.

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 paste 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.
  • Update: For an alphabetical order, skip this workflow and use Mike's script.

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.

16 comments:

  1. Great. I have been trying to show related posts in a widget , but my search has come to an end. I will display diffrent posts in my footer widgets. ( www.nchimoja.com )

    ReplyDelete
  2. Thanks this is exactly what I was looking for. Now to be able to follow the instructions. Although you have made them very clear my brain goes into overload faster than a speeding bullet.

    ReplyDelete
    Replies
    1. Jennie, I hope you can make it work for you!

      Delete
  3. Adam, yahoo is retiring pipes shortly; any alternatives?

    ReplyDelete
    Replies
    1. William: Yes, I just heard about this!

      I hope to have something soon, but probably an entirely different approach. The "pipes-like" replacements seem to be (a) not nearly as user friendly (b) in beta and often (c) not free.

      I've already got a Javascript solution that will work on the first 200 posts. I'm trying to bone up enough to make ti work on the entire feed, however long.

      Note that you don't need Pipes if you don't need to reorder the list of posts. That's not good enough for me though, and probably not for others most of the time.

      Let me know if you learn of anything.

      Delete
    2. UPDATE: Run, do not walk, to deploy this solution to save your lists.

      It's not as good as I'd hoped, but it will save what you've done if you act in the next few days.

      Delete
  4. Great it works properly in my blog
    http://sagunpaudel.blogspot.com
    Thankyou

    ReplyDelete
  5. Can you share that alphabetical Javascript solution that will work on the first 200 posts. I want to use it for labels.

    ReplyDelete
    Replies
    1. Hi Anon.

      I promise I will. Soon

      I've just had a really busy summer, sorry!

      Delete
    2. I, too, would be interested in your alphabetical Javascript solution. I'll be watching for a reply here. Thanks!

      Delete
    3. Sorry to say I am not able to deliver the replacement solution I'd envisioned.

      Run, do not walk, to deploy this solution instead.

      Delete
  6. Sadly, Yahoo Pipes is coming to an end. :-(
    Does anyone know another way to create an index in Blogger?

    ReplyDelete
    Replies
    1. Grass Tree, I think a Javascript-based solution ought to be possible, but I have not been able to pull it off.

      Until then you'll have to build your index by hand.

      Please post back here if you learn of any better solutions.

      Delete
  7. I too have searched for a replacement for the past several hours with no luck. I was hoping somebody could have saved the info from yahoo pipes and adapted it to one of the other alternatives that have similar functions. I will keep a link to this page and check back over the next few weeks to see if any alternatives appear.

    ReplyDelete
  8. I finally found a solution here:

    http://dansator.blogspot.co.uk/2015/10/general-alphabetical-list-of-posts.html

    Now if this could be put into a drop down box instead of a full page, it would be even better.

    ReplyDelete
    Replies
    1. Bucky, a belated thanks. This script manages to loop though the entire feed.

      Parts of it are a little beyond me, but I have been able to adapt it and am using it on my main blog.

      Delete