Display RSS Feed Using JavaScript-RSS Feed JavaScript Reader

By On May 20, 2011 · 10 Comments · In Website Optimization

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

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 FEED TO HTML JAVASCRIPT

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.

, 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!
Reddit Facebook Twitter Delicious Mixx StumbleUpon Digg
  • mohit

    Have you ever tested this code snippet? Its not working..

    Wasted my precious time this…

    • Binu George

      It should not fail. Because we are using XMLDoc object. May the way you implemented the code is not proper

  • Dominic

    Hi Binu,

    Thanks for sharing the code. It is working perfectly and I applied my own CSS styles to that. Thanks again

    Dom

  • Krishna

    Kudos!

    Perfect. Ideal for websites. I have created my own widget using this code and with your permission :)

    Thanks again

    Krishna

  • http://abc.com Silvia

    I was looking for similar JavaScript code. Thanks ! It worked!

  • Binu George

    @Dom, Krishna and Silvia

    Thanks for visiting globinch and sharing your comments

  • Ron

    Thanks for the piece of code. As Binu replied to Mohit the code uses XMLHttpRequest and XMLDoc objects. May be Mohit can recheck his version of implementation of the above code.

    For me this code works like charm :)

  • http://www.threelas.com putri

    Hi Binu,

    I have tried another method code, basicly same with your code. But I don't know why it not work, because when I try the code from you its also not work. Can you give some idea?

    • Binu George

      Could you please share the error what you are getting?

  • Amitg27

    Hi
    Thanks so much for the code, It does not work on firefox also on the server it does not work

    Can you please help
    regards