Create a Blogroll from OPML Files

God breathing through me

Create a Blogroll from OPML Files

Published on February 17, 2007

One of things that I wanted to add to new version of Nayyeri.NET was a blogroll. Community Server supports blogrolls out of the box but they're not easy to manage. Probably you can remember that I had written an OPML to Blogroll converter control for Community Server 2.0 but in fact it wasn't fast for large numbers of links. Dave had modified my control with a SQL server to avoid many iterations in APIs and had replaced them with direct SQL statements but finally he left that control like me.

For new version I was looking for an easier way to apply this with Community Server APIs but nope, result wasn't good! Finally I switched to another solution that I was going to implement from the first day!

As I wanted an easier way to manage links I decided to avoid any .NET code and write a better transform to convert my OPML file to blogroll on fly. The result was absolutely better than what I had with my Community Server control. I wrote an XSL Transform to generate final HTML from OPML and used ASP.NET XML server control to automate this conversion and put this control in a user control and cached it on local server to improve the performance. So you can guess, result was great! But after finding this solution I belief that there are many links that make my sidebar heavy and ignored this blogroll from the base!

However, it may be helpful for some users because I saw that some guys were asking for an easier solution to manage their blogrolls in Community Server.

Here is the XSL Transform that I used to convert OPML to HTML:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:dc="http://purl.org/dc/elements/1.1/"
                version="1.0">
  <xsl:output method="xml" indent="yes" />
  <xsl:template match="opml">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <style>
          a:link, a:active, a:visited, a:hover {
          color: #ce0000;
          text-decoration: none;
          }
        </style>
      </head>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <div id="Blogroll">
          <xsl:for-each select="/opml/body/outline">
            <h4>
              <xsl:choose>
                <xsl:when test="@title">
                  <xsl:value-of select="@title"/>
                </xsl:when>
                <xsl:otherwise>
                  <xsl:value-of select="@text"/>
                </xsl:otherwise>
              </xsl:choose>
            </h4>
            <ul>
              <xsl:for-each select="./outline">
                <li class="ItemListItem">
                  <a>
                    <xsl:attribute name="href">
                      <xsl:choose>
                        <xsl:when test="@htmlUrl">
                          <xsl:value-of select="@htmlUrl"/>
                        </xsl:when>
                        <xsl:otherwise>
                          <xsl:value-of select="@xmlUrl"/>
                        </xsl:otherwise>
                      </xsl:choose>
                    </xsl:attribute>
                    <xsl:value-of select="@text"/>
                  </a>
                </li>
              </xsl:for-each>
            </ul>
          </xsl:for-each>
        </div>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Then I used an XML server control and set its DocumentSource property to my OPML file address and TransformSource to the address of this XSL file. You can see a sample output below.