Lars Trieloff's Collaboration Weblog

I've been a fan of personal feed aggregation services for a long time. I've been trying:

• Suprglu
• iStalkr
• Feedfriend
• and Plaxo Pulse

I've even built my own pulse once and twice. Now Plaxo announces something new: The Plaxo Pulse Widget allows you to embed your pulse (your feed of anything you do on the web) in your weblog. Actually it is not that new, because with the help of Mysyndicaat you could already do this before and it is not that good, because you cannot completely control the look and feel, as I can with the custom widget you see in the sidebar of my blog.

How I did it:

1. I created an OPML file with my feeds. I simply re-used my personal OPML file, I created for the older incarnation of my personal aggregator.
2. I downloaded and installed Sam Ruby's Planet Venus, a refactored version of the Planet software that powers many websites, for instance Planet Apache.
3. I created a new profile that reads my OPML file:

# subscription list
[http://weblogs.goshaky.com/weblogs/lars/page/OPML]
content_type = opml

1. I created a new theme that creates a JSON feed from my aggregated feed using following XSLT stylesheet:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
                xmlns:atom="http://www.w3.org/2005/Atom"
                xmlns:xhtml="http://www.w3.org/1999/xhtml"
                xmlns:planet="http://planet.intertwingly.net/"
                xmlns="http://www.w3.org/1999/xhtml"
                exclude-result-prefixes="atom planet xhtml">
 
  <xsl:output method="text" omit-xml-declaration="yes"/>

  <xsl:template match="atom:feed">
var planet = [
    <xsl:apply-templates select="atom:entry[position()&lt;51]"/>
];
  </xsl:template>
 
  <xsl:template match="atom:entry">
  {
    title: "<xsl:call-template name="strip-quotes">
  <xsl:with-param name="text">
    <xsl:value-of select="atom:title" />
  </xsl:with-param>
</xsl:call-template>",
    href: "<xsl:call-template name="strip-quotes">
  <xsl:with-param name="text">
    <xsl:value-of select="atom:link[@rel='alternate']/@href" />
  </xsl:with-param>
</xsl:call-template>",
    icon: "<xsl:value-of select="atom:source/planet:css-id" />.png"
  }
  <xsl:if test="position()&lt;50">
  ,
  </xsl:if>
  </xsl:template>
  
  <!-- remove everything else -->
  <xsl:template match="@*|node()"></xsl:template>

  <xsl:template name="strip-quotes">
    <xsl:param name="text" />
    <xsl:if test="contains($text, '&#x22;')">
      <xsl:value-of select="substring-before(translate($text,'&#10;',''), '&#x22;')" />
      <xsl:text>\"</xsl:text>
      <xsl:call-template name="strip-quotes">
        <xsl:with-param name="text">
          <xsl:value-of select="substring-after(translate($text,'&#10;',''), '&#x22;')" />
        </xsl:with-param>
      </xsl:call-template>
    </xsl:if>
    <xsl:if test="not(contains($text, '&#x22;'))">
      <xsl:value-of select="translate($text,'&#10;','')" />
    </xsl:if>
  </xsl:template>
  
</xsl:stylesheet>

1. Finally, I customized my blog's sidebar template to include the JSON feed as a list:

<li id="container">
    <h2>Activity</h2>
    <p><script type="text/javascript" src="http://del.icio.us/feeds/js/networkbadge/trieloff?name;nwcount;icon=s"></script></p> 
<script type="text/javascript" 
        src="http://internal.mindquarry.com/venus/lars/index.json"></script>

<script type="text/javascript">
    function showImage(img){ return (function(){ img.style.display='inline'; }) }

    var ul = document.createElement('ul')
    for (var i=0, post; post = planet[i]; i++) {
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.setAttribute('href', post.href);
        a.appendChild(document.createTextNode(post.title));
        li.style.backgroundImage = "url(http://internal.mindquarry.com/venus/lars/"+post.icon+")";
        li.style.backgroundRepeat = "no-repeat";
        li.style.paddingLeft = "20px";
        li.appendChild(a);
        ul.appendChild(li);
    }
    document.getElementById('container').appendChild(ul);
</script>
   </li>

Using this method I am more flexible in adding feeds and supporting services, I can easily customize the appearance of the widget in my sidebar and I have all the super-powers that Planet Venus offers, for instance filtering Feedburner spam from my feeds.