Designing Your Own Recent Posts Widget for MSDN Blog


In my MSDN blog, I need “Recent Posts”, but I don’t need archive side bar. After having played with template for a while, still no luck. Hmmm, looks like I have to DIY it. Fortunately in News sidebar, you can fill in raw html including JavaScript. Then next question is where we can retrieve post tiles. The immediate idea is from current DOM document. Through experiments, I found this is impossible because the DOM is not fully loaded yet when the script is executed. Later, I figured it out that all posts title can be gotten from RSS. For my blog, the address is http://blogs.msdn.com/bali_msft/rss.xml. One thing worth noticing is the fact that RSS in MSDN blog is not up to date - Your post will not instantly appear in the RSS. After I get all posts in RSS format, things became much easier. And then I go ahead to add more interesting things:




  • Posts background use two colors in turn


  • Show a new tag for posts less than 3 days old


  • Show latest 8 posts only


  • Show posts' age

So, the final thing will look like this:





If you find it is useful, feel free to paste below code to you blog’s news section. Note to customize “Configurable params” to your own needs and leave other code intact. It works well at least in my IE 8 and Firefox 3.0.6.







<div id="RecentPosts"></div>


<Script>


// Configurable params


var recentPostNumber = 8;


var rssUrl = "http://blogs.msdn.com/bali_msft/rss.xml";


var title = "My Recent Posts";


var newPostAgeInHour = 72;


 


// Cacluate age of one post. It is all about getting time span in Javascript


// return formate: x min; x hour y min, x day y min, x days, x yeas (ago)


// Refer to: http://www.w3schools.com/jsref/jsref_obj_date.asp


function calculateAge(postDate)


{


    var ret = "fresh!";


    CurrentDate = new Date();


    TimeSpan = new Date(CurrentDate - postDate);


    var mySpanArray = new Array();


    mySpanArray[0] = TimeSpan.getUTCFullYear()-1970;
    mySpanArray[1] = TimeSpan.getUTCMonth();
    mySpanArray[2] = TimeSpan.getUTCDate()-1;
    mySpanArray[3] = TimeSpan.getUTCHours();
    mySpanArray[4] = TimeSpan.getUTCMinutes();


    var TimeSpanTagArray_1 = new Array("years", "months", "days", "hours", "minutes");


    var TimeSpanTagArray_2 = new Array("year", "month", "day", "hour", "minute");


   


    // Starting from non-zero element and pick two significant values


    for(i = 0; i < mySpanArray.length; i++) {


        if(mySpanArray[i] != 0) {


            var correctTag = (mySpanArray[i] == 1)?(TimeSpanTagArray_2[i]):(TimeSpanTagArray_1[i]);


            ret = mySpanArray[i] + " " + correctTag;


            if(i+1 < mySpanArray.length && mySpanArray[i+1] != 0) {


                correctTag = (mySpanArray[i+1] == 1)?(TimeSpanTagArray_2[i+1]):(TimeSpanTagArray_1[i+1]);


                ret = ret + ", " + mySpanArray[i+1] + " " + correctTag;


            }


            break;


        }


    }


   


    return ret;


}


 


// Display the recent posts


// Refer to:


// http://www.w3schools.com/DOM/dom_node.asp


// http://www.w3schools.com/DOM/dom_methods.asp


function displayPosts (xmldoc)


{


    var newTag = "<SPAN style=\"COLOR: red\">(New!)</SPAN>";


    var posts = xmldoc.getElementsByTagName("item");


    var displayText = "<h3>" + title + "</h3><UL>";   


    if (posts.length < recentPostNumber) {


        recentPostNumber = posts.length;


    }


    for(var i = 0; i < recentPostNumber; i++)


    {


        PostTitle = posts[i].firstChild.firstChild.nodeValue;


        PostLink = posts[i].firstChild.nextSibling.firstChild.nodeValue;


        PostDateStr = posts[i].firstChild.nextSibling.nextSibling.firstChild.nodeValue;


        PostDate = new Date(PostDateStr);


        CurrentDate = new Date();


       


        // Calculate age


        var _PostAge = calculateAge(PostDate);


        var PostAge = "<SPAN style=\"font-size: 80%; color: black\"> (" +_PostAge + " ago)</SPAN>";


               


        // Show a new tag for posts happening last days defined by 'newPostAgeInHour'


        var myNewTag = "";


        if((CurrentDate.getTime() - PostDate.getTime())/1000/60 < newPostAgeInHour * 60) {


            myNewTag = newTag;


        }


       


        // Get background color


        var BKColor = (i%2 == 0)?("#B8CCE4"):("#DBE5F1");


        displayText = displayText + "<LI style=\"background-color:" + BKColor + "\"><A href=\"" + PostLink + "\">" + myNewTag + PostTitle + PostAge + "</A></LI>"       


    }


    displayText = displayText + "</UL>";


    var target = document.getElementById("RecentPosts");


    target.innerHTML=displayText;


}


 


// Call back


function complete(){


    if (req.readyState == 4) {


      if (req.status == 200) {


            displayPosts (req.responseXML);


        }


    }


}


 


// Initial async call


function getPosts()


{


  if (window.XMLHttpRequest) {


      req = new XMLHttpRequest();


  }else if (window.ActiveXObject) {


      req = new ActiveXObject("Microsoft.XMLHTTP");


  }


  if(req){


      req.open("GET", rssUrl, true);


      req.onreadystatechange = complete;


      req.send(null);


  }


}


 


// Entry point


getPosts();


</Script>


 

Comments (1)

Comments are closed.

Skip to main content