Designing Your Own Recent Posts Widget for MSDN Blog

  • Article

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 https://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 = "https://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: https://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:

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

// https://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>