Parsing RSS feeds with jQuery and PHP

RSS is short for Real Simple Syndication. It is the standard means of publishing and syndicating content over the Web. RSS feeds benefits publisher by letting them syndicate content automatically. Number of Websites offering RSS feeds is growing rapidly.

For more details on RSS checkout out blog post ‘How to use RSS Feed to your Website?

We shall demonstrate how to parse Really Simple Syndication (RSS) feed of blog using PHP then display it using jQuery. RSS is standard format for publishing feeds there are several formats of RSS feeds. We will use feed of version RSS 2.0.

Standard structure of RSS Feed:

Getting Ready:

1. Create a folder demo.
2. Keep ready url of RSS feed 2.0. I will use

How to do it?

Step 1:

Create a file index.html inside demo folder. Lets define CSS style for elements and create a a div with ID results, which will serve as placeholder for displaying posts from the feed.

Step 2:

Before the closing<body> tag, include Google CDN hosted copy of jQuery file Then send get AJAX request to a php file called feed.php. This file will return and XML response  and this response will be handled by ajax call back function showPosts. Define showPosts function that will parse the response XML and will create the HTML from it. The resulting HTML will be inserted inside the results DIV on the page.

Step 3:

Create new file feed.php file. This file will fetch the XML contemt for the RSS feed from a URL and will display it to the browser.

Step 4:

Execute index.html file in the browser. You will notice loading text. After the response is received, a list of posts will be displayed initially. Clicking on a post title will expand to show its summary, publication date, and comment count. The summary will have a Read Full Post link that will open that post in a new window:

How it works…

After the DOM is ready an AJAX request is sent to the PHP file feed.php. This file gets the contents of the RSS feed from a URL using the file_get_contents function. The rss element is the root of an XML file. channel is a child of the rss node that contains information about the blog and the ten latest entries. Each entry is represented by an item node in this file. We then echo the received XML to the browser.

In jQuery, showPosts is the callback function that receives the XML in the data variable. jQuery can parse XML just like HTML elements. So to get the posts, we use the find method that gets all the item elements.

var posts = $(data).find('channel>item');

Then, we iterate over the posts variable and on each iteration we get the values for the title of the post, link to the post, summary of contents, number of comments, and the publishing date. Using these variables, we create a list of items inside an unordered list. The post title is given inside an h3 element. Next is a DIV that contains the post summary, link to the post, date, and number of comments. This DIV has a class content assigned to it. The display property for content class is set to none. Therefore, only the post title will be visible when the posts are displayed.

After the list is complete we insert it inside a DIV with ID results.

We also have a click event handler function for h3 elements. Clicking on h3 elements gets the DIV next to it and toggles its display using slideToggle function. Thus, clicking the post title will show or hide its post summary. Clicking on the Read Full Post link will open the original post in a new window.

PHP Developers at Outsourcing Partners develop web applications using advanced PHP and jQuery techniques. Check out web projects from our portfolio or request a free quote.

This entry was posted in Web Application Development and tagged , , . Bookmark the permalink.

Comments are closed.