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 .

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:

Part 2: in progress.


<!-- Related Articles - Take 5 - Using JQuery & Google Search API - by Hoctro 8/2010 -->
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[

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

function getParams() {
  $(' 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) {
      hoctroRelated = hoctroRelated + '"' + textLabel.toString() + '" OR ';
  }); // each
// Callback main function
$(document).ready(function() {
  getParams() ;
}); // function

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

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

  var options = new;

  // populate with searcher
  var blogSearch = new;
  blogSearch.setUserDefinedLabel("Related Articles");
  var options2 = new;

  searchControl.addSearcher(blogSearch, options2);
  searchControl.draw(document.getElementById("searchHoctroRelatedResults"), options);

// Copied from
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);


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

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