RSS Feeds

Close this notice

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Intermediate

You can include an RSS Feed widget anywhere in the main content area of your page by including an empty div element with the id wdn_rss_widget and including the plugin initialization (which will include the "UNL In The News" RSS news feed):

WDN.initializePlugin('rss_widget');

To get the default stylization of the plugin, you also need to give it the style class wdn-rss-widget.

Alternatively, you can load the RSS widget with your own RSS feed by providing a URL as the second parameter:

WDN.initializePlugin('rss_widget', 'https://newsroom.unl.edu/announce/cse?format=xml');

You can also customize a few things by providing a JavaScript object like this:

WDN.initializePlugin('rss_widget', { url:'https://newsroom.unl.edu/announce/cse?format=xml', elementId: 'wdn_rss_widget', pause: 8000, limit: 10, num_show: 3});

Where each attribute is as follows:

  • url - the URL of the RSS feed (defaults to "UNL In The News")
  • elementId - the id of the DOM element div that the widget should be loaded in (defaults to wdn_rss_widget)
  • pause - the amount of time between news item cycles (in milliseconds, defaults to 5000 = 5 seconds)
  • limit - the maximum number of items to pull from the RSS feed (defaults to 10)
  • The number of items to display at one time (defaults to 3)

The widget has been updated to allow multiple RSS widget feeds in the same page. You can achieve this by providing an array of JavaScript configuration objects: WDN.initializePlugin('rss_widget', [ { url: 'https://ucommxsrv1.unl.edu/rssfeeds/unlinthenewsrss.xml', elementId : 'wdn_rss_widget', pause: 5000, limit: 8, num_show: 4 }, { url: 'https://newsroom.unl.edu/announce/cse/?format=rss', elementId : 'wdn_rss_widget_cse', pause: 10000, limit: 10, num_show: 2 }]);

Note that if you use multiple RSS feed widgets, you should provide distinct elementIds for each one. Moreover, each div should have the style class, wdn-rss-widget added to it to receive the same styling.

You can stylize your rss widget(s) further by adding zenbox style classes:

<div id="wdn_rss_widget" class="wdn-rss-widget"></div>

Possible options for the subclasses: bright, cool, energetic, neutral, primary, soothing (see the zenbox documentation for the colors these themes correspond to).

Example

Usability Considerations: 

  • The RSS feed URL must either be on the same domain as you page or the remote domain must include CORS headers to allow you to load content from another domain.
Contributed By: 
IIM

Comments

aholz4's photo

Submitted by Anne Holz on Fri, 2017-07-14 13:40

Can padding/margin be added on the feed so that the text isn't flush with the edges of the background color in the box and there's more space between the headlines and the text above the headlines? And, maybe a little less space between the date and the text below it? 

See example

apages2's photo

Submitted by Alejandro Pages on Fri, 2021-04-23 12:36

Usability Considerations: 

  • The RSS feed URL must either be on the same domain as you page or the remote domain must include CORS headers to allow you to load content from another domain.

How can we add the CORs headers?