Introducing The New Related Articles Widget

Hi friend,

This is my first take on the new Related Articles Widget.

Please cut and paste the code below to a new HTML Widget from your Page Elements to see if it is working.

I cut and paste the same code to create a new widget, located at the end of this post.

You don't have to get rid of the existing Related Articles widget on your blog. This new one is a totally independent, self-contained widget!

As you can see, the widget forms a query of all the "keyword" (in this case "labels") in this post, queries, and gets a resulting list for the most relevant posts from your blog. It's just like you query a list of terms and get results from the google search at http://www.google.com/ .

The result is, in my humble opinion, a truly "most related articles" relevant set of links, unlike my previous attempts - where only the newest posts from each label showed up. This time, we employ Google's famous ranking algorithm to do the "related" part for us.

I will explain the motivations, excecution and nuances of this "beta" widget in a follow-up post. There are ways to modify the look of the results, such as showing the snippet text or not, or use CSS to alter the look of the widget.


Update: See my explanations here:

Part 1: http://hoctro.blogspot.com/2010/08/dissecting-new-related-articles-part-1.html

Part 2: in progress.


Regards,

<!-- Related Articles - Take 5 - Using JQuery & Google Search API - by Hoctro 8/2010 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[

//var website = "hoctro.blogspot.com";
var website = getBaseURL();
var hoctroRelated = "site:" + website + " ";
var labelArray = new Array();

function getParams() {
  $('div.post-footer-line span.post-labels a').each(function(idx, el) {
    var test = 0;
    var textLabel = $(el).html();
    for (var i = 0; i != labelArray.length; i++) {
      if (labelArray[i] == textLabel.toString()) test = 1;
    }
    if (test == 0) {
      labelArray.push(textLabel.toString());
      hoctroRelated = hoctroRelated + '"' + textLabel.toString() + '" OR ';
    }
  }); // each
}
// Callback main function
$(document).ready(function() {
  getParams() ;
}); // function

function OnLoadRelated() {
  // create a search control
  var searchControl = new google.search.SearchControl();

  // create a draw options object so that we
  // can position the search form root

  var options = new google.search.DrawOptions();
  options.setSearchFormRoot(document.getElementById("searchHoctroRelatedForm"));

  // populate with searcher
  var blogSearch = new google.search.WebSearch();
  blogSearch.setUserDefinedLabel("Related Articles");
  var options2 = new google.search.SearcherOptions();
  options2.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

  searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
  searchControl.addSearcher(blogSearch, options2);
  searchControl.draw(document.getElementById("searchHoctroRelatedResults"), options);
  getParams();
  searchControl.execute(hoctroRelated);
}

// Copied from http://www.gotknowhow.com/articles/how-to-get-the-base-url-with-javascript
function getBaseURL() {
  var url = location.href; // entire url including querystring - also: window.location.href;
  var baseURL = url.substring(0, url.indexOf('/', 14));
  if (baseURL.indexOf('http://localhost') != -1) {
  // Base Url for localhost
    var url = location.href; // window.location.href;
    var pathname = location.pathname; // window.location.pathname;
    var index1 = url.indexOf(pathname);
    var index2 = url.indexOf("/", index1 + 1);
    var baseLocalUrl = url.substr(0, index2);
    return baseLocalUrl + "/";
  }
  else {
  // Root Url for domain name
  return baseURL + "/";
  }
}



  // Important, this has to be called here, otherwise main var is not yet created
  google.load('search', '1.0');
  google.setOnLoadCallback(OnLoadRelated, true);

//]]>
</script>

<style>
  //#searchHoctroRelatedResults a.gs-title, a.gs-title * { color : brown; }
  //#searchHoctroRelatedResults .gs-webResult .gs-snippet { display : none; }
  //#searchHoctroRelatedResults .gs-webResult .gs-visibleUrl { display : none; }
  //#searchHoctroRelatedForm { display : none; }
</style>

<div id="searchHoctroRelatedResults">Loading...</div>
<div id="searchHoctroRelatedForm">Loading...</div>
<h6>Related Articles Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u></h6>