JavaScript: RSS Feeds

RSS Feeds are a handy way to reuse content published on other web pages or sites, such as news and press releases. JavaScript pulls in the XML (or JSON) and converts it to HTML, making it suitable for display on your web page. Follow the Web Standards for boxes and JavaScript (see related links below).

Some caveats:

  • The same-domain policy often restricts you from using RSS feeds that are *not* on the same domain (e.g., www2). JSON feeds are not subject to this policy.
  • You'll find it difficult to test, as your content must first be published in order to see the feed pulled in

How-to: HTML

In Panelizer, add content, then select "RSS Feed Box" from the Box Style dropdown menu.

  • It's important that you add some content to the box first, as it provides a fallback if JavaScript is disabled.
  • For example, provide a link back to the complete RSS feed, newsroom or press release homepage.

How-to: JavaScript Code

This script pulls in the JSON feed for Region 1 Press Releases. Paste the following example into the Page JavaScript tab, then:

  • Replace the URL with your specific JSON feed (contact Web CMS Support for help finding your feed)
    jQuery.getJSON("[url]", function(data) {
  • Set how many news items are pulled into the page. The variable end controls the number of items.
    • JavaScript starts at 0; if you want five news items on your page, var end = 4;
  • The last line will append the newly-created HTML to the RSS box, just before the .footer element of the box
<script>  // NEWS RELEASES
jQuery(document).ready(function() {
  var end = 4;
  jQuery.getJSON("http://yosemite.epa.gov/opa/admpress.nsf/returnJSONPLocation?openagent&location=region01&callback=?", function(data) {
    var content = jQuery('<ul class="feed-list"></ul>');
    jQuery.each(data.items, function(i,item) {
      var date = item.pubDate;
      date = date.substring(5,17);
      var ds = date.lastIndexOf(' ');
      date = date.substring(0, ds);
      var title = item.title;
      title = title.substring(0, 100);
      var s = title.lastIndexOf(' ');
      title = title.substring(0, s);
      if (item.title == 'No Records Found') {
        content.append('<li>No Records Found</li>');
      }
      else {
        content.append('<li>(' + date + ') <a href="/%27%20%2B%20item.link%20%2B%20%27">' + title + '</a></li>');
      }
      if (i == end) return false;
    });
    jQuery('.rss > .pane-content > .footer').before(content);
  });
});
</script>