Tiện ích mới: "Bài viết liên quan" (Related Articles)

Bạn,

Giới thiệu với bạn tiện ích mới nhất: "Bài Viết Liên Quan".

Hãy cắt dán vào một HTML widget trong trang thiết kế để coi nó có chạy hay không.

Tôi có làm thử một cái, dùng chính đoạn mã mà tôi viết dưới đây, vào trang Anh ngữ của tôi, thì nó chạy ngay http://hoctro.blogspot.com/2010/08/testing-of-new-related-articles-widget.html . Trang Hoctro Việt cũng có tiện ích này.

Nếu bạn đã lắp các "Bài Liên Quan" widget trước của tôi, bạn cứ tự nhiên lắp tiếp cái này, chứ đừng bỏ cái kia vội. Cái mới này chỉ cần một bước cài đặt thôi, mà sau khi cài đặt xong ta có thể chuyển nó sang chỗ mới dễ dàng, không như cái cũ.

Như bạn thấy, cái tiện ích này tạo ra một dòng mã gồm những từ khóa/nhãn của trang đang xem, sau đó nó gửi lên Google, và được kết quả trả về gần sát nhất những gì bạn muốn tìm. Các kết quả này do google tìm kiếm trong trang của bạn mà thôi. Ta thấy cách này hệt như khi ta muốn tìm một bài viết nào đó trên Google http://www.google.com/ .

Theo thiển ý, đây là widget sát ý nhất với ý nghĩa "bài liên quan", vì nó đăng lên những bài giống với những từ khóa mà ta tìm nhất. tiện ích trước tôi viết không làm được điều này, vì nó chỉ trả về những kết quả mới nhất của từng nhãn trong trang mà thôi, những bài hay nhất mà xưa thì sẽ không được hiện ra. Ta đã dùng giải thuật "page ranking" của Google lần này để tìm các bài liên quan nhất.

Tôi sẽ đăng tiếp một bài viết tiếp theo về những động lực để làm tiện ích, giải thích cấu trúc mã, và những chỉnh sửa khác. Có nhiều cách như dùng CSS để chỉnh màu sắc, font chữ, hiện thêm dòng ngắn giới thiệu (snippet) hay không, v.v.

Chúc bạn thành công,

Thân mến,

Hoctro
8/16/2010

<!-- 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>