Related feeds widget

2007-08-09

This a widget example, using the jQuery jFeed and wordStats plugins, to display a list of articles related to the current document.

• wordStats computes the top keywords
• jFeed asks WordPress.com search engine for related articles (matching the top keywords), using a server side proxy

• jQuery displays the results

• Basic related feeds example

• The PHP proxy

JavaScript code:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.wordstats.js"></script>
<script type="text/javascript" src="jquery.wordstats.en.js"></script>
<script type="text/javascript" src="jquery.jfeed.pack.js"></script>
<script type="text/javascript">

$(function() {

   var count = 3;
   $.wordStats.computeTopWords(count); //compute the 3 first top words

   //create the query
   var query = '';
   for(var i = 0; i < count && i < $.wordStats.topWords.length; i++) {
       query += $.wordStats.topWords[i].substring(1) + ' ';
   }
   query = query.substring(0, query.length - 1);
   $('#related').html('Querying blogs for: "' + query + '" ...');

   //load and parse the feed
   jQuery.getFeed({
       url: 'proxy.php?query=' + query,
       success: function(feed) {
           var html = "<h2>Related articles</h2><ul>";
           for(var i = 0; i < feed.items.length; i++) {

               html += '<li><h3 class="feeditemtitle">'
                       + '<a href="' + feed.items[i].link + '">'
                       + feed.items[i].title + '</a></h3>'
                       + '<p class="feeditemdescription">'
                       + feed.items[i].description + '</p>';
               }

           html += '</ul>';
           $('#related').html(html);
       }
   });
});

</script>