I think every one faced with the task of connecting RSS feeds to your website, you can search and find some ready solutions (such as jQuery plugins), but also you can write your own script (which will smaller) and that will do it too. In this tutorial I’ll tell you how you can do it in pure javascript. Surfing web, I stumbled upon the Google Feed API, and thought that perhaps he would help me in this matter. Because using this service, I can easily (on-fly) to convert XML (of RSS) to JSON format. And as far as we know, javascript can easily work with JSON response. That’s what we will use, and now, lets check online demo.
Step 1. HTML
As usual, we start with the HTML. This is source code of our sample:
<html>
<head>
<title>New own RSS reader demonstration</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="example">
<div class="post_results" id="post_results1" rss_num="8" rss_url="http://rss.news.yahoo.com/rss/topstories">
<div class="loading_rss">
<img alt="Loading..." src="images/loading.gif" />
</div>
</div>
<div class="post_results" id="post_results2" rss_num="8" rss_url="http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml">
<div class="loading_rss">
<img alt="Loading..." src="images/loading.gif" />
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
As you can see – I prepared 2 DIV elements where going to load RSS feeds, in attributes (rss_url and rss_num) I pointing url of rss feed and amount of elements which going to display
Step 2. CSS
Here are single CSS file with all necessary styles:
css/main.css
Read more: Script Tutorials