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.

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.

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.

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.

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.

For more related resources: