OPML2HTML

This is version 2.0 of this script which now handles feeds in categories, and displays them as nested lists. At some point this should become a click-and-expand hierarchy via the magic of CSS.

My list of blogs I read is no longer powered by Blogrolling, instead it's powered by the OPML generated by Syndirella. From the ‘File’ menu I click "export feed list as OPML", save it as ‘syn.xml’ (the .xml extension is important), and FTP it up to the root directory of my website (it has to be the root directory AFAICT because the different XML loaders have trouble with paths).

Then I put the following into my head tag:

  <script language="JavaScript" type="text/javascript">
  <!--
  function importXML()
  {
    if (document.implementation && document.implementation.createDocument)
    {
      xmlDoc = document.implementation.createDocument("", "", null);
      xmlDoc.onload = createList;
    }
    else if (window.ActiveXObject) 
    {
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");    
      xmlDoc.onreadystatechange = function () {
        if (xmlDoc.readyState == 4) createList()
      };
    }
    else
    {
      alert('Your browser can\'t handle this script');
      return;
    }
    xmlDoc.load("syn.xml");
  }

  function createList()
  {
    var x = xmlDoc.getElementsByTagName('outline');
    var newEl = document.createElement('ul');

    for (i=0; i<x.length; i++)
    {
      if (x[i].hasChildNodes())
      {
        var children = x[i].getElementsByTagName('outline');
        var listitem = document.createElement('li');     
        var title    = document.createTextNode(x[i].getAttribute('title'));        
        var sublist  = document.createElement('ul');

        for(var y = 0; y < children.length; y++)
        {
          var childtitle  = document.createTextNode(children[y].getAttribute('title'));
          var sublistitem = document.createElement('li');
          var link        = document.createElement('A');   
          link.setAttribute('href',children[y].getAttribute('htmlUrl'));              
          link.appendChild(childtitle);
          sublistitem.appendChild(link);
          sublist.appendChild(sublistitem);
        }

        listitem.appendChild(title);
        listitem.appendChild(sublist);
        newEl.appendChild(listitem);
      }      
      else
      {
        if (x[i].parentNode.nodeName!='outline') 
        { 
          var listitem = document.createElement('li');     
          var link = document.createElement('A');   
          link.setAttribute('href',x[i].getAttribute('htmlUrl'));    
          var title = document.createTextNode(x[i].getAttribute('title'));
          link.appendChild(title);
          listitem.appendChild(link);
          newEl.appendChild(listitem);
        }
      }
    }
    document.getElementById('writeroot').appendChild(newEl);
  }


  //-->
  </script>

and then wherever I want the list to be written I insert the following:

    <span id="writeroot">
      <script type="text/javascript">importXML();</script>
      <noscript>
        <ul>
          <!-- some token blogs here ;) -->
          <li><a href="http://diveintomark.org" target="_blank" title="Mark Pilgrim">diveintomark</a></li>
        </ul>
      </noscript>
    </span>

and voila, real links to the blogs I'm really reading.

(Of course, you can also just import the javascript from an external file instead of including it all in your head, by cutting and pasting the code into a file called opml2html.js and then putting the following in its place: <script type="text/javascript" src="opml2html.js"></script>)