Creating Feed scripts to display your N number of latest post is quite easy as it is provided by your Feed provider like Feedburner or Mailchimp. But creating own scripts to fetch your N Number of Latest Articles is quite different. You can style them too individually.

This article is Inspired by Skyje News Widget which gives you a 6 line script that fetches their latest news entries. This is a well known example of Cross Promotion of articles with news articles. But recently they have changed to simple wordpress code to display latest news entries. The tutorial is as follows.

The Internal file script.

Create a Javascript file with name of your choice and save the following script in that file. Do not forget to change the contents of the script like your Feedburner URL and your news link in the begining of the script.

blogURL='http://smashingeeks.com/';feedURL='http://feeds.feedburner.com/SmashinGeeks';postCount=5;excerptLength=20;function loadBlogFeed(r){var container=document.getElementById('skyjefeed');if(r.responseStatus=='200'&&r.responseData.feed.entries.length>0){for(i=0;i<r.responseData.feed.entries.length;i++){var post=r.responseData.feed.entries[i];var title=unescapePureXMLEntities(post.title);var entry=unescapePureXMLEntities(cleanPostContent(post.content));var link=post.link;var date=post.publishedDate;date=new Date(date).toDateString();renderPost(title,entry,link,date)}var moreLink=document.createElement('a');moreLink.href=blogURL;moreLink.innerHTML='More Posts &raquo;';container.appendChild(moreLink)}else{renderNoPost()}}function cleanPostContent(entry){entry=entry.replace(/<span>[^<]*<\/span>/,'');entry=entry.replace(/<[^>]*>/g,'');var snippet=entry.split(' ',excerptLength);snippet.pop();return snippet.join(' ')+' ...'}function unescapePureXMLEntities(str){return str.replace(/&([^;]+);/g,function(s,entity){switch(entity){case'amp':return'&';case'lt':return'<';case'gt':return'>';case'quot':return'"';default:if(entity.charAt(0)=='#'){var n=Number('0'+entity.substr(1));if(!isNaN(n)){return String.fromCharCode(n)}}return s}})}function renderPost(title,entry,link,date){var linkNode=document.createElement('a');linkNode.href=link;linkNode.appendChild(document.createTextNode(title));var snippetDiv=document.createElement('div');snippetDiv.className='snippet';snippetDiv.appendChild(document.createTextNode(entry));var dateDiv=document.createElement('div');dateDiv.className='time';dateDiv.appendChild(document.createTextNode(date));var container=document.getElementById('skyjefeed');container.appendChild(linkNode);container.appendChild(dateDiv);container.appendChild(snippetDiv)}function renderNoPost(){var container=document.getElementById('skyjefeed');container.innerHTML='<a href="'+blogURL+'">'+blogURL+'</a>'}function importBlogJS(){var scriptNode=document.createElement('script');apiURL='https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q='+feedURL+'&num='+postCount+'&callback=loadBlogFeed';scriptNode.setAttribute('src',apiURL);document.getElementsByTagName('head')[0].appendChild(scriptNode)}window.onload=importBlogJS;

Also you can change the interval timings and also the number of posts to be displayed at a time in the script.

You can download the already made file here.

The Calling JavaScript.

Just save the above file on your server and copy the direct link to the script file you just made or downloaded. To call the script, we have a simple piece of code. Paste this script in your sidebar or anywhere you want to display.

Also, don’t forget to remove the direct link to the script you just made in the previous step.

<!-- Start Skyje Feed --> <h3>SmashinGeeks</h3> <div id="sgfeed"></div> <script src="http://dl.dropbox.com/u/9550507/media01.smashingeeks/Uploads/sgfeed.js" type="text/javascript"></script> <!-- END skyje Feed -->

The CSS.

We have made a simple styling to it,just fonts and font sizes. Paste this CSS code either on the top of the above script or in your theme’s CSS file after removing <style></style> tags.

<style>  #sgfeed {font-family:Verdana, Arial, Helvetica, sans-serif;  font-size:10px; width:295px;}  #sgfeed a{font-family:Georgia, Helvetica, serif; font-size:14px;  text-decoration:none; display:block;margin-top:10px;} #sgfeed  .time{color:#999; font-size:10px;}  #sgfeed .snippet{color:#999;} </style>