Build an Automated RSS Feed List With jQuery

by on 13th August 2013 with No Comments

preview tutorial rss feed reader jquery google api

The typical process of creating a dynamic feed listing requires some type of backend language. Obviously this can work out fine if you are familiar with Rails or PHP, but I want to present a method for pulling RSS feeds via jQuery. The problem is accessing Ajax requests from an external server and then converting this XML information to something a bit easier to read.

We will be focusing on the Google Feed API which is a lot easier than it looks. There are a number of custom possibilities to play with the options and access other alternative themes. All we need to pull is the first page of the feed item results, along with each title and the URL link. Once you have this script working it is very easy to customize the layout and even include a bit of content from the feed! Check out my sample demo below to get an idea of what we will be creating.

Live DemoDownload Source Code

Getting Started

The first step is to make a basic document including the jQuery library as a resource. I will be using a couple functions published on Stack Overflow which help us achieve this RSS feed. Typically when writing a webapp like this you need to access cross-domain parsing via some backend language. PHP is often the easiest solution for web developers.

Since we are using the Google Feed API, it will take the place as our backend script. Thus everything may be read via jQuery Ajax and then converted into JSON so that we can parse better. Here is my document header which includes jQuery along with a custom script parser.js.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Automated jQuery RSS Feed Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/parser.js"></script>
</head>

The best part about my code is how we can fill in everything via JavaScript. All of the internal RSS elements on the page will be written into HTML, but it will not display in the document source. All of the content is published dynamically and you can quickly edit the feed sources to change on every page reload.

  <div id="w">
    <div id="content">
      <h1>Automated jQuery RSS Feed Listing</h1>
      
      <div id="nouperss" class="feedcontainer"></div>
      <hr>
      <div id="hongkiatrss" class="feedcontainer"></div>
      <hr>
      <div id="designmodorss" class="feedcontainer"></div>
      <hr>
      <div id="codropsrss" class="feedcontainer"></div>
    </div><!-- @end #content -->
  </div><!-- @end #w -->

This is the full entirety of the body contents. Each class of .feedcontainer is used to apply the same basic styles onto headings and links. The ID names are targeted via jQuery so that we can run our custom RSS function and then append new content using the .html() method.

RSS Parsing in jQuery

We can skip over most of the CSS styles because they are fairly basic. Take a peek at my stylesheet if you want to see how any of the alignment is done. But moving over into parser.js there are two functions where one specifically handles the RSS/JSON conversion. The other is a capitalization function which automatically forces the RSS feed “title” attribute to stay capitalized.

function parseRSS(url, container) {
  $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      //console.log(data.responseData.feed);
      $(container).html('<h2>'+capitaliseFirstLetter(data.responseData.feed.title)+'</h2>');

      $.each(data.responseData.feed.entries, function(key, value){
        var thehtml = '<h3><a href="'+value.link+'" target="_blank">'+value.title+'</a></h3>';
        $(container).append(thehtml);
      });
    }
  });
}

This parseRSS() function was published in a related Stack Overflow question and it outlines a perfect solution running only with jQuery. We do still need a server because the .ajax() method cannot be run without an HTTP stream. But you do not need support for any other backend languages which is a huge relief. Ideally we can trust Google to keep this running indefinitely as it is a tremendous resource for developers.

The function code itself is easy to understand if you are familiar with .ajax(). First we pass in the URL to query, which is the remote Google Feed API link. We need the dataType set as JSON and after the successful ajax call we should run a new function to display the HTML contents. Notice the parameter we pass is called data which holds the JSON response.

The Response Loop

Notice that I also left a comment with the code console.log(data.responseData.feed) if you want to display output of all the JSON contents. It is possible to display more than just the feed title and URL links. But I wanted to keep this example trimmed of unnecessary frills. You do have the ability to add more stuff at your own will right from within this function.

Inside the successful ajax call function I have embedded an .each() loop to iterate over the items within the feed. Notice this array can be accessed through data.responseData.feed.entries which we turn into a key and value pair. It is fairly simple because we only need one string variable to hold the HTML. Then using jQuery .append() all the content is added back into the page.

The title output is not within this .each() loop because it should only be added once for each feed. But also it is using another custom function written to capitalize each first letter within any JavaScript string. Some of the RSS feeds will have all the title letters in lowercase which can look strange. Here is the function code and it is very short.

function capitaliseFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Keep in mind that RSS feeds can have a lot more information to publish. Sometimes you will even find thumbnail images embedded within the feed XML. This makes it possible to include article images within your own RSS webapp! The possibilities are practically endless with easy access to Google’s Feed APIs.

Live DemoDownload Source Code

Final Thoughts

RSS Feeds are still very popular among web developers because it is a common method of transferring data between websites. This allows Internet marketers to easily publish updates on Twitter or Facebook directly from the website RSS feed. I would have to recommend downloading a copy of my source code and toying around in your own time. Additionally see if you can add any of your own functionality or build a useful webapp related to popular RSS feeds.

Comments & Discussion

Subscribe
Membership
About the Author