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

Free Download Tiny jQuery Based RSS Reader With Custom Template – RSS.js

By Posted on

This time I will share jQuery Plugin and tutorial about Tiny jQuery Based RSS Reader With Custom Template – RSS.js, hope it will help you in programming stack.

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

Demo Download

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

Currently it works a jQuery wrapper for the vanilla-rss library. It also supports aggregating items from multiple RSS feeds since v4.2.0.

How to use it:

1. Link to the required JavaScript files as follow:

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="dist/jquery.rss.min.js"></script>

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

view source
1 <script src="moment.min.js"></script>

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

view source
1 <div id="rss-feeds"></div>

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

view source
1 $("#rss-feeds").rss("https://feeds.feedburner.com/jquery-script")
2 <!-- OR -->
3 $("#rss-feeds").rss([
4   "rss url 1",
5   "rss url 2",
6   "rss url 3"
7 ])

5. 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)
view source
1 $("#rss-feeds").rss("https://feeds.feedburner.com/jquery-script",{
2   layoutTemplate: "<ul>{entries}</ul>",
3   entryTemplate: "<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>"
4 })

6. Limit the number of entries to fetch.

view source
1 $("#rss-feeds").rss("https://feeds.feedburner.com/jquery-script",{
2   limit: 10
3 })

7. Override the default RSS parser service. Default: http://www.feedrapp.info/.

view source
1 $("#rss-feeds").rss("https://feeds.feedburner.com/jquery-script",{
2   host: "www.feedrapp.info"
3 })

8. Render the RSS feeds on the page and execute a function after rendering.

view source
1 rss.render()
2 .then(() => console.log('cool'));

9. Full configuration options and callback functions.

view source
01 {
02   ssl: true,
03   host: "www.feedrapp.info",
04   support: true // enables ads
05   limit: 4,
06   layoutTemplate: "<ul>{entries}</ul>",
07   entryTemplate:
08     '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>',
09   tokens: { additional token definition for in-template-usage
10     foo: 'bar',
11     bar: function(entry, tokens) { return entry.title }
12   },
13   outputMode: "json",
14   dateFormat: "dddd MMM Do",
15   dateFormatFunction: function(date){},
16   dateLocale: "en",
17   order: '-publishedDate', // All entry properties; title, link, content, contentSnippet, publishedDate, categories, author, thumbnail
18   fetchFeed: (apiUrl) => {
19     return new Promise((resolve) => {
20       $.getJSON(apiUrl, resolve);
21     });
22   },
23   offsetStart: false, // offset start point
24   offsetEnd: false, // offset end point
25   filterLimit: 10, // filter results
26   filter: function(entry, tokens) {
27     return tokens.title.indexOf('my filter') > -1
28   }
29 }

10. Available event listeners.

view source
1 rss
2   .on('data', (data) => {
3     console.log(data.rss); // Returns the rss instance
4     console.log(data.feed); // Returns the feed meta information
5     console.log(data.entries); // Returns the feed entries
6 })

Changelog:

v4.3.0 (2019-11-17)

  • Add support for sorting entries

v4.2.0 (2019-11-17)

  • Add support for multiple feed URLs

v4.1.0 (2019-11-07)

  • Add support for custom feed encoding

v4.0.0 (2019-10-25)

  • Replace business logic with Vanilla RSS
  • Removed effects.

v3.3.1 (2019-09-29)

  • Fixed demo page
  • Added more options

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

source : jquery.net

Related posts: