Monday, January 5, 2009

How to create list of post links grouped by category using RSS (blogspot)

This post presented how to make list of links of your blog posts which are grouped by categories. For example I have category "webs" and want that on the sidebar is list of my posts which are in "webs" category.

The result should look like this:

Useful webs






The difference between link list in this post and link list in How to create scrollable link list post is that in this case links are coming from RSS feed and there is no need for manual updating new links. When you add new post your link list will automatically be updated and this is main advantage.

There are two methods to fill link box. One is by using Feed2Jscript and another is by using Google AJAX Feed API - Code.

I chose Feed2Jscript because it is faster but this service is not guaranteed and it is possible to go away.

Steps for creating list of links grouped by category using RSS


  1. Go to Feed2Jscript


  2. Enter the web address of the RSS Feed

    • Web address of the RSS Feed can be for all posts or for all posts in one category

    • For all posts web address is http://[BLOG NAME].blogspot.com/feeds/posts/default

      • [BLOG NAME] is name of your blog

      • For my blog web address for all posts is http://interestingwebs.blogspot.com/feeds/posts/default


    • For all posts in one category web address is http://[BLOG NAME].blogspot.com/feeds/posts/default/-/[CATEGORY NAME]

      • [CATEGORY NAME] is a label, and all posts having this label will be listed

      • For more details about labels and categories in blogspot look Adding categories to blogspot (blogger)

      • For example in my blog address for category "webs" is http://interestingwebs.blogspot.com/feeds/posts/default/-/webs

      • To lear more about writing url for blogspot feed see article Parameters in Blogspot feed


    • You can type directly in web browser web address of the RSS Feed to check if address is correct

    • RSS Feed



  3. Chose remaining values and click button Generate JavaScript

  4. Feed2JS page, click to enlarge

  5. You will get code which you can copy, or you can copy my code bellow

  6. <div style="overflow:auto;width:96%;height:150px;border:1px solid #ccc;padding:5px">

    <script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2F[BLOG-NAME].blogspot.com%2Ffeeds%2Fposts%2Fdefault%2F-%2F[CATEGORY]&chan=n&num=0&desc=0&date=n&targ=n" type="text/javascript"></script>

    <noscript>
    <a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2F[BLOG-NAME].blogspot.com%2Ffeeds%2Fposts%2Fdefault%2F-%2F[CATEGORY]&chan=n&num=0&desc=0&date=n&targ=n&html=y">View RSS feed</a>
    </noscript>
    </div>


    • If you want to use my code, you should replace [BLOG-NAME] with name of your blog (for my blog [BLOG-NAME] is interestingwebs) and replace [CATEGORY] with your categories (for example in my blog webs and blog-tutorial), more about categories in Adding categories to blogspot (blogger)


    • <div> tag is for scrollbox

      <div style="overflow:auto;width:96%;height:150px;border:1px solid #ccc;padding:5px">

      </div>


  7. Now you need to paste code in HTML/jscript gadget

    • Go to Layout.

    • Click on Add Gadget.

    • Select HTML/JavaScript.

    • Enter a title and paste adjusted HTML code from this article and click on button Save (for detailed instructions see How to add HTML code to blog)



  8. You can to add more category lists in one HTML\jscript gadget if you want




That's it.

For those who wants to use Google AJAX Feed API - Code and in case that Feed2Jscript is turning off there are steps to create list of posts with Google AJAX Feed API:

  1. You need to generate API key at http://code.google.com/intl/hr/apis/ajaxfeeds/signup.html

  2. Use this code:

    <!doctype 1.0 strict//en -//w3c//dtd
    http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd public html xhtml>



    Google AJAX Feed API - Simple Example
    <script src="http://www.google.com/jsapi?key=[API-KEY]"
    type="text/javascript"></script>
    <script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {
    var feed = new google.feeds.Feed("http://[BLOG NAME].blogspot.com/feeds/posts/default/-/[CATEGORY NAME]
    ");
    feed.setNumEntries(100);
    feed.load(function(result) {
    if (!result.error) {

    var container = document.getElementById("feed");
    var ul = document.createElement("ul");
    for (var i = 0; i < result.feed.entries.length; i ) {
    var entry = result.feed.entries[i];
    var li = document.createElement("li");
    var a = document.createElement("a");
    li.appendChild(a);
    a.href = entry.link;
    a.appendChild(document.createTextNode(entry.title));

    ul.appendChild(li);
    }
    container.appendChild(ul);
    //div.appendChild(container);
    }
    });

    }
    google.setOnLoadCallback(initialize);

    </script>


    <div id="feed"
    style="overflow:auto;width:100%;height:150px;border:1px solid
    #ccc;"></div>

    </!doctype>



  3. Replace [API-KEY] with yours generated API KEY, [BLOG NAME] and [CATEGORY NAME]




Related articles:
Adding categories to blogspot (blogger)
How to create scrollable link list
Create expandable TOC (table of contents or sitemap) in HTML

4 comments:

The Active Foodie said...

I love this!! However, do you have code for turning this into a drop down list? My lists are getting quite long. Thanks!

The Active Foodie said...

I love this, but how can I make it work in wordpress?? Also, do you have code for a drop-down list?

Mark said...

Sorry, I tried to find code for Select element (dropdown list) but without success. It is not simple.
Think, my instruction should work and on WordPress too, follow Steps for creating list of links grouped by category using RSS. When you get code you should put this code somewhere to be shown in sidebar. I don't have experience with WordPress.

Watch Movie Online Free said...

This is article nice information to share for us.. I really appreciate to share your knowledge . Thanks a lot