Widget "Bài viết liên quan" có sử dụng công nghệ Google's Ajax Feed API

Hôm nay mình sẽ giới thiệu đến bạn widget "Bài viết liên quan" của bác Hoctro. Với widget này bạn sẽ theo dõi các bài viết theo 1 nhãn ( label ) hiệu quả hơn và liền mạch hơn. Xin nói trước đây là widget do tác giả Hoctro viết nên bạn hãy giữ nguyên dòng chữ Widget by Hoctro để tôn trọng công sức tác giả đã bỏ ra.

Bước 1: Đăng ký để lấy mã từ Google's Ajax Feed API.
http://code.google.com/apis/ajaxfeeds/signup.html


Bước 2: Chèn đoạn mã sau vào trước thẻ </head>. Nhớ thay chữ YOUR-KEY bằng mã mà ta lấy ở bước 1.

<script src='http://www.google.com/jsapi/?key=YOUR-KEY' type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

Bước 3: Thêm Widget vào blog.
Chèn widget mới này vào bất kỳ đâu trong cặp thẻ "b:section" ( xem hình vẽ bên dưới để biết vị trí ) với id='sidebar'


Theo mình bạn nên chèn vào cuối cặp thẻ, trước </b:section>

<b:widget id='Blog3' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
</b:includable>
<b:includable id='backlinks' var='post'>
</b:includable>
<b:includable id='post' var='post'>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='status-message'>
</b:includable>
<b:includable id='feedLinks'>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
  <a name='comment-form'/>
  <h4 id='comment-post-message'><data:postCommentMsg/></h4>
  <p><data:blogCommentMessage/></p>
  <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>
  <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
  <data:post.iframeColorizer/>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='comments' var='post'>
</b:includable>
<b:includable id='main'>
<!-- *****************http://hoctro.blogspot.com*****Oct,2008********** -->
<!-- ***Related Articles by Labels Written by Hoctro- Take Four******* -->
<!--<b:if cond='data:blog.pageType == "item"'>-->
<div class='widget-content'>


<h5>Related Articles</h5>
<div id='data2007'/><br/><br/>
<h6>Related Article Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-and-improved-related-articles.html'>Hoctro</a></u></h6>


<script type='text/javascript'>


// Incorporating modified by Jackbook to the next line, thank you very much.
var homeUrl = "<data:blog.homepageUrl/>"
var maxNumberOfPostsPerLabel = 8;
var maxNumberOfLabels = 10;
var urlArray = new Array();
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 15;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 4;
</b:if>
var titleArray = new Array();
var titleTest = 0;

function relInitialize() {
var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";


var test = 0;
// Do not add identical labels from posts
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {
    var url = homeUrl + 'feeds/posts/default/-/'
+ encodeURIComponent(textLabel);
    var feed = new google.feeds.Feed(url);
    feed.setNumEntries(maxNumberOfPostsPerLabel);
    feed.load(function(result) {
      if (!result.error) {
        var container = document.getElementById("data2007");
        for (var i = 0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
          titleTest = 0;
          for (var i = 0; i < titleArray.length; i++)
            if ( titleArray[i] == entry["title"] ) titleTest = 1;
          if (titleTest == 0 ) {
            titleArray.push(entry["title"]);
            var div = document.createElement('div');
            var a = document.createElement('a');
            a.href = entry["link"];
            // Adding an if statement to exclude current post.
            // Addition from Jackbook.com. Thank you
            if( a.href!=location.href ) {
              var txt = document.createTextNode(entry["title"]);
              a.appendChild(txt);
              div.appendChild(a);
              container.appendChild(div);
            } // if not home page
          }// if titleTest
        } // for
      }// if result is not error
    }); // feed.load

    numLabel++;
   }
  }
  </b:loop>
  </b:loop>
 }
 google.load("feeds", "1");
 google.setOnLoadCallback(relInitialize);
</script>
</div>
<!--</b:if>-->
</b:includable>
</b:widget>

Trong đó:
var maxNumberOfPostsPerLabel = 4; :Số lượng bài viết hiển thị trên 1 label.
var maxNumberOfLabels = 10; : Số lượng Label được hiển thị.