Subscribe via RSS Feed

Creating RSS Feed Reader and Decorating with Bootstrap.js and CSS

June 16, 2013 1 Comment

In this post we will describe our experience of creating a RSS feed reader and showing the RSS content from a local html file. To show the content standardised, we have integrated twitter bootstrap.js in our RSS fead reader content showing page.

We have integrated following technologies here -

1> Simple PHP XML file parsing

2> Bootstarp.js integration in UI for Tab Navigation

3> Allowing cross domain ajax policy

Our PHP file which is used as RSS feed reader can be downloaded here.

Our html package which is enabled for feed consuming capability, can be downloaded here.

In PHP file, we have done XML file parsing using DOMDocument. We have done the file parsing and made the html segment as per requirement.

Main code snippets are -

$xmlDoc = new DOMDocument();
.....
for ($i=0; $i<=7; $i++) { $item_title=$x->item($i)->getElementsByTagName('title')
.....
echo ("<p><a href='" . $item_link . "' target=\"_blank\" >" . $item_title . "</a>");
echo ("<br />");
echo ($item_desc . "</p>");
}

Next- to enable cross origin ajax request allowable we have added an important header in php file -

header('Access-Control-Allow-Origin: *');

We have hosted this php file on our hosted server.

We have done bootstrap.js and CSS integration in our UI part of the work to enable tab navigation and to show multiple RSS feed reading.

As we have no web designing background, we implemented the tab navigation from standard Bootstrap framework, which reader can study from twitter bootstrap site directly.

On next article, we will show the integration of this feed reader in a Google Chrome Extension.

So keep reading….

Enter your email address:

Delivered by FeedBurner

Sign Up to read the rest of the content

Email will be used only for updates of our site

No Thanks