Displaying and Managing an RSS Feed

After digging around for a good solution for embedding an RSS feed, I found one that works exactly the way I want. I had just two requirements that actually eliminated most of the pretenders:

  1. I shouldn't have to sign up an account on some random site.
  2. The results should be able to be styled using CSS to match my site.

The last bit that I want to do is be able to change the RSS feed and number of results displayed using MagicEdit. I'm happy to throw some kudos over to Zazar.net for the RSS feed part of this solution.

Here's what we'll be building. We have the RSS feed results, as well as the basic controls for managing the feed. When the site content manager is logged out, the controls disappear:

Placing the RSS Feed

Add the following code to your HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.zrssfeed.js"></script>

<div cl_class="hidden=!CLManager.activeSession.account:isAdmin instructions">
  <p><b>Feed URL:</b>
    <span id="rssFeedUrl"><magicedit me_name="rssFeedUrl" me_plain></magicedit></span>
  <p><b>Number of Results:</b>
    <span id="rssFeedLimit"><magicedit me_name="rssFeedResults" me_plain>5</magicedit></span>

<div id="rssFeed"></div>

You'll notice that we're using something called cl_class here. All that line does it write class="hidden instructions" if a content manager is not logged in, and just writes class="instructions" if the content manager is logged in. This allows us to show and display the instructions and configuration based on a login condition.

The details for how to implement the RSS feed itself can be found here. To get right to it, just download the plugin, then extract the package and upload the jquery.zrssfeed.js file to your site. Now, we add the following lines to the HTML. You can leave off the first line if you are already loading jQuery, but make sure the path is correct to the plugin script.

A bit of CSS

Add the following lines to your CSS file, along with any additional styles you like for the RSS feed itself:

  .hidden {

  .instructions {
    /* Put any special styles for your instruction block here */

All this does is hide (using display:none) the instructions panel when a user is not logged in, but it is still in the DOM for the JavaScript to use for getting the feed information.

Initializing the Feed Plugin

Now, the very last thing we need to do is initialize the feed with the appropriate information. Add the following script code to your page:

<script type="text/javascript">
  $(document).ready(function() {
    $('#rssFeed').rssfeed($("#rssFeedUrl").text().split("<")[0], {
      limit: parseInt($("#rssFeedLimit").text().split("<")[0])

This pulls the information about the feed from the document; if the content manager has entered a new feed URL or limit, the feed will update accordingly.

That's all it takes!