Converting RSS Feed to HTML using JavaScript will help us to display the feed in your Website or Blog’s sidebar or widget. In this article we discuss bout a very simple RSS JavaScript Feed Reader. This JavaScript feed reader can be used to display your favorite feed in your page. The RSS feed reader will parse the XML feed and will convert into HTML. This HTML will be rendered as the content of a <DIV> element.
The RSS Feed Reader JavaScript utilizes the “XMLHttpRequest” or the ActiveXObject “Microsoft.XMLHTTP” libraries depending on the browser you use. This article focuses on how to parse the RSS feed XML and convert into corresponding HTML.
Related
- How to Display FeedBurner RSS Feed Subscriber Count As Text ?
- Display Any RSS Feed on Your Site Using PHP cURL And SimpleXML.
If you are using this code please ensure that you do proper testing before adding to your website or blog. You can apply CSS styles that suites your website color and layout. The following RSS Reader Script will display the feed as below.
RSS JavaScript Reader
This is a simple function which fetches the RSS Feed from a URL and parses it. There are three main sections
Fetch RSS Feed
The following code gets the Feed content as XML.
1 2 3 4 5 6 7 8 9 10 11 12 13 | var xmlhttp;
if (window.XMLHttpRequest)
{// For IE7 and above, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// For IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://feeds.feedburner.com/globinch?format=xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; |
In the above example we have used the Globinch.com RSS feed which is served from Google Feedburner. You need to replace “http://feeds.feedburner.com/globinch?format=xml” with the Feed URL that you want to display. The line “xmlDoc=xmlhttp.responseXML; ” retrieves the response XML from the XMLHttpRequest object.
Process the RSS Feed XML
Once the feed is retrieved you can start processing the feed. The “getElementsByTagName” method of XMLDoc object can be used to retrieve the XML elements present in the feed. For example if your feed is served from Google Feedburner you can use the below given code to process the XML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var strBuffer= "";
strBuffer = strBuffer +"<table border='1'>";
var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
{
strBuffer = strBuffer +"<tr><td><a href='";
strBuffer = strBuffer +(x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue);
strBuffer = strBuffer +"'>";
strBuffer = strBuffer +(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
strBuffer = strBuffer +"</a></td></tr><tr><td>";
strBuffer = strBuffer +(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue.substring(0,180));
strBuffer = strBuffer + "<a href='";
strBuffer = strBuffer +(x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue);
strBuffer = strBuffer +"'>... Read More...</a>";
strBuffer = strBuffer +"</td></tr>";
if(i==10){
break;
}
}
strBuffer = strBuffer +"</table>";
document.getElementById(param).innerHTML =strBuffer; |
In the above code based on the structure of the XML feed you may need to change the getElementsByTagName() method parameter name. We are building an HTML table using the Title, Description and Link fields from the RSS feed. The last line is to set the Value of the DIV as the processed RSS feed HTML. The parameter “param” is the JavaScript function parameter which will be passed from where the function is invoked.
Add the RSS Feed HTML to your Website
The below given example defines a DIV element which is a place holder for the processed RSS Feed HTML.
1 2 3 | <body onload ="loadRSSFeed('feeddisplay');">
<div ID="feeddisplay"></div>
</body> |
In the above code the “loadRSSFeed” is the JavaScript function name and we are passing the “id” of the “DIV” as a parameter. This is the DIV element where we display the RSS feed.
You can apply some CSS styles to the created RSS feed HTML. You can use the following sample CSS styles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <style>
#feeddisplay {
background: none repeat scroll 0 0 ##ffffff;
border-bottom: 0.2em solid #1177AA;
border-right: 0.2em solid #1177AA;
border-left: 0.2em solid #1177AA;
border-top: 0.2em solid #1177AA;
color: #222222;
direction: ltr;
font-family: HelveticaNeue,Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
letter-spacing: normal;
line-height: 30px;
margin-left: 0;
padding: 0 3px 0 8px;
text-align: start;
text-decoration: none;
text-transform: none;
vertical-align: baseline;
width: 500px;
word-spacing: 0;
}
#feeddisplay td
{
font-size: 11px;
border:0px;
border-bottom: 1px solid #1177AA;
}
#feeddisplay a
{
font-size: 12px;
font-weight:bold;
text-decoration: none;
}
</style> |
You can customize the above JavaScript and CSS Styles that suites your requirement.
Binu George , the author of Globinch.com, is a technology blogger and software architect. You can follow him on Twitter, Google+, Facebook.
If you enjoyed reading the above article please consider sharing it.
If you enjoyed this article, please consider sharing it!
Sign up or join Globinch on Social Media
Stay Connected
Pingback: WordPress Search Plugins « shankarsoma; Social Media & Digital Marketing Blog
Pingback: Google Closure Compiler to Minimize and Optimize JavaScript Online | Globinch
Pingback: Speed Tracer: Identify and Fix Web Application Performance Issues | Globinch