jQuery RSS reader plug-in with HTML presentation in your web pages

The jQuery RSS reader with templates

If you require using the RSS of your website or a third party and present on your website with a better presentation then you should try jquery-rss plug-in.

The jquery-rss plug-in can read the specified RSS feed. You just need to specify the URL where you need to fetch the RSS feed. The plug-in also enables presenting the RSS feed with different HTML templates and using the power of jQuery, you may use different effects and available options.

See the following section with demo and find out how you may set up jQuery RSS reader and how to present information based on RSS by using this plug-in.

A demo of jquery-rss plug-in

At its simplest, you just need to specify the URL, the number of feeds and optionally some effect for presenting the RSS feed.

In this demo, the limit is set to 5 with an effect by using the effect option in jQuery code with the value of “slide”.  Have a look by clicking the link or image below:

-jQuery rss feed

See online demo and code

Note that, the moment.js is optional to use which purpose is only formatting the date. You may omit it.

The solution requires using only the jQuery library and the plug-in JS file.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js”></script>

<script src=”js/jquery-rss/jquery.rss.js”></script>

The jQuery code used:

 

Simply replace the feed with your required URL.

The markup used in above example:

 The available effect options

You may use the following values in the effect option for displaying the RSS feed:

  1. ‘slideFast’
  2. ‘slideSynced’
  3. ‘slideFastSynced’
  4. ‘show’
  5. ‘slide’

A demo of accordion style feed presentation

In this demo, the feed is presented in an accordion style. For that, the jquery-ui.css file is used for creating the accordion. Besides the jQuery simple library, the UI library is also included in the <head> section of demo page.

In addition to above demo’s two options (effect and limit), this demo uses some other available options:

jQuery rss feed accordion

See online demo and code

Get the complete code from the demo page.

How to set up this plug-in?

The setup is simple. First of all, download the plug-in from the Github website by following the link below:

Credit: sdepold

  • Depending on the format, include the jQuery and optionally jQuery-UI JS and CSS files.
  • As mentioned earlier, the moment.js is an optional file to be included for date formatting.
  • Include the the plug-in JS file i.e. jquery.rss.js
  • Use the jQuery code with URL and options for RSS feed.
  • Write the simple markup and CSS style for displaying the RSS.

As you download this RSS jQuery reader and unzip the package, you can see four examples in the unzipped folder. You may try different templates as per the need of your web project.