Tiny jQuery Based RSS Reader With Custom Template - RSS.js

Tiny jQuery Based RSS Reader With Custom Template - RSS.js
File Size: 52.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A lightweight, customizable jQuery RSS reader which has the ability to parse and display RSS/ATOM feeds with custom templates on the webpage.

How to use it:

1. Link to the required JavaScript files as follow:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/jquery.rss.js"></script>

2. Include the OPTIONAL moment.js library if you want to use a custom data format:

<script src="moment.min.js"></script>

3. Create an empty DIV container for the RSS reader.

<div id="rss-feeds"></div>

4. Initialize the RSS reader and pass the RSS url as the first parameter to the rss function.

$("#rss-feeds").rss("https://feeds.feedburner.com/jquery-script")

5. Customize the RSS reader with the following options:

$("#rss-feeds").rss("https://feeds.feedburner.com/jquery-script",{

  // will request the API via https
  ssl: false

  // which server should be requested for feed parsing
  host: 'my-own-feedr-instance.com',

  // max number of RSS feeds
  limit: 4,

  // custom templates
  layoutTemplate: '<ul>{entries}</ul>',
  entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>',

  // additional token definition for in-template-usage
  tokens: {},

  // output Mode
  outputMode: 'json',

  // custom date format
  dateFormat: 'dddd MMM Do',

  // localizes the date with moment.js
  dateLocale: 'en',

  // 'show', 'slide', 'slideFast', 'slideSynced', 'slideFastSynced'
  effect: 'show',

  // offset results being displayed
  offsetStart: false,
  offsetEnd: false,

  // callbacks
  error: function () {
    console.log('jQuery RSS: url doesn\'t link to RSS-Feed');
  },
  onData: function () {},
  success: function () {}

})

6. Predefined tokes for templating:

  • url: the url to the post
  • author: the author of the post
  • date: the publishing date
  • title: the title of the post
  • body: the complete content of the post
  • shortBody: the shortened content of the post
  • bodyPlain: the complete content of the post without html
  • shortBodyPlain: the shortened content of the post without html
  • teaserImage: the first image in the post's body
  • teaserImageUrl: the url of the first image in the post's body
  • index: the index of the current entry
  • totalEntries: the total count of the entries
  • feed: contains high level information of the feed (e.g. title of the website)

This awesome jQuery plugin is developed by sdepold. For more Advanced Usages, please check the demo page or visit the official website.