Creating Own RSS Reader Using Google Feed API
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.
Here are samples and downloadable package:
Live Demo
download in package
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML. This is source code of our sample:
index.html
<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
body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:825px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.post_results {
margin: 5px;
width: 400px;
border:1px solid #444;
float:left;
}
.post_results ul {
list-style:none;
text-align:left;
padding:0;
margin: 0;
}
.post_results ul li {
background: #555555;
background: -moz-linear-gradient(top, #555555 0%, #444444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#444444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #555555 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #555555 0%,#444444 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #555555 0%,#444444 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #555555 0%,#444444 100%); /* W3C */
height: 60px;
padding: 10px;
}
.post_results ul li:hover{
background: #666;
}
.post_results ul li a{
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
margin-bottom:5px;
}
.post_results ul li a:hover{
color: #eee;
}
.post_results ul li p {
color: #ddd;
font-size: 13px;
margin: 0;
}
Step 3. JS
Here are our main Javascript:
js/main.js
function myGetElementsByClassName(selector) {
if ( document.getElementsByClassName ) {
return document.getElementsByClassName(selector);
}
var returnList = new Array();
var nodes = document.getElementsByTagName('div');
var max = nodes.length;
for ( var i = 0; i < max; i++ ) {
if ( nodes[i].className == selector ) {
returnList[returnList.length] = nodes[i];
}
}
return returnList;
}
var rssReader = {
containers : null,
// initialization function
init : function(selector) {
containers = myGetElementsByClassName(selector);
for(i=0;i<containers.length;i++){
// getting necessary variables
var rssUrl = containers[i].getAttribute('rss_url');
var num = containers[i].getAttribute('rss_num');
var id = containers[i].getAttribute('id');
// creating temp scripts which will help us to transform XML (RSS) to JSON
var url = encodeURIComponent(rssUrl);
var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+num+'&q='+url+'&callback=rssReader.parse&context='+id;
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('charset','utf-8');
script.setAttribute('src',googUrl);
containers[i].appendChild(script);
}
},
// parsing of results by google
parse : function(context, data) {
var container = document.getElementById(context);
container.innerHTML = '';
// creating list of elements
var mainList = document.createElement('ul');
// also creating its childs (subitems)
var entries = data.feed.entries;
for (var i=0; i<entries.length; i++) {
var listItem = document.createElement('li');
var title = entries[i].title;
var contentSnippet = entries[i].contentSnippet;
var contentSnippetText = document.createTextNode(contentSnippet);
var link = document.createElement('a');
link.setAttribute('href', entries[i].link);
link.setAttribute('target','_blank');
var text = document.createTextNode(title);
link.appendChild(text);
// add link to list item
listItem.appendChild(link);
var desc = document.createElement('p');
desc.appendChild(contentSnippetText);
// add description to list item
listItem.appendChild(desc);
// adding list item to main list
mainList.appendChild(listItem);
}
container.appendChild(mainList);
}
};
window.onload = function() {
rssReader.init('post_results');
}
It is rather simple. When the page loads – I appending prepared javascript objects into our containers (div class="post_results"). That javascript asking google to convers RSS(XML) feed to JSON format using Google Feed API. After, script pass executing to ‘parse’ function of our object, that function convert JSON date into HTML presentation. So, in result – it loading our XML feed in HTML format. All pretty nice 
Step 4. Images
For our demo I used only one image (this is loading icon):
Live Demo
download in package
Conclusion
Today’s lesson has demonstrated and Google Feed API, and how we can easily handle the received data and draw up (at client-side) result, using pure javascript. I hope you enjoyed our lesson. Good luck!
Related Articles
How to get your Google+ profile info and friend’s activity using the Google JS API
How to Easily Make Your own RSS Feed
Creating an ID3 Tags Reader with PHP
i think less it on css coded…
.loading_rss {
text-align: center;
background: #eee;
padding: 10px;
}
hihihi…
thanks, it’s great tut’s
Thanks for suggestion, commonly I do not much care about the loading element
This is a great tutorial and very simple, thanks. But how can i increase the number of words displayed or allow the reader to display all the words. The feed im getting normally contains about 60 words in their excerpts…
Also i can i display the images in the feed?
Many thanks in advance…
Hi Robin,
As I read at http://code.google.com/apis/feed/v1/jsondevguide.html
contentSnippet param giving us <120 chars snippet.
Pay attention that we using:
var contentSnippet = entries[i].contentSnippet;
in code.
So as I see – you can use 'content' instead 'contentSnippet'. It should contain more information.
Ho can I add images to the feed?
Hi
You can add
entries[i].mediaGroups[0].contents[0].url
to the parser in order to pickup image of entry.
A very informative and easy to use RSS feed reader. But how to paginate the feeds?
Hello Jospaul,
If you need a pagination here, I think that you should implement some JS-based pagination.
where in the parser do i ad the entries[i].mediaGroups[0].contents[0].url at so i can get images in the rss feed viewer ??
Hi Taker,
You can start using it right After line 51 (after ‘for’)
Amazing RSS tutorial! Best iv’e read so far.
But I have a quick question about adding images, how do I do it?
for (var i=0; i<entries.length; i++) {
entries[i].mediaGroups[0].contents[0].url; < I did this and its not working so I am obviously wrong.
var listItem = document.createElement('li');
Can you help?
Hi Jo,
It can be something like that:
var img = new Image();
img.src = entries[i].mediaGroups[0].contents[0].url;
listItem.appendChild(img);
Great tutorial! Just wondering w/ this image, how can we control its positioning and what nots in css?
Hi Sam,
Which position exactly? Parent elements are usual boxes (div), you can place them everywhere you want.
Thank you for this simple example. Do you happen to know what java script I would need to add to get this Div RSS box to auto scroll after the page loads?
Hello Justin,
Can you please explain – scroll to which position? As I see, there are not so many elements to scroll.
It should generate elements from the beginning to end (from top to bottom). What position do you want to scroll to?
can we add post thumbnail?
(wordpress)
Yes, please see comments above (I already answered the same question to Xaxa)
Is it possible to get the rss feed name, and possibly the copyright info of the rss feed?
Figured it out,
You have to access the data object in the parse function. Its just a json object. There’s documentation too. Thanks for sharing the tutorial!
Great tut my dear…i just wanted to know…we have 2 files…the main.js where you put the images code :
var img = new Image();
img.src = entries[i].mediaGroups[0].contents[0].url;
listItem.appendChild(img);
and the main.css
the images appears but very big…my question is:
- how can i align it to the right and shrink the image scale to be something like 100px for width and height?
- can i use this to create thumb images beside the news feed in every block?
looking forward to hear from you..
Hello wahid,
The first thing that came to my mind – you should use CSS rules to decrease this image (use ‘width’ and ‘height’ properties). If you need to align, you can use ‘float’ property.
Yes, you can use this code to display images for every block, don’t worry