gFeed

gFeed is a fork of the jQuery zRSSFeed plugin with modifications by me. This plugin basically parses RSS Feeds using the Google AJAX Feed API. The main difference between this and the zrssfeed plugin is that you can actually style how your feed looks in the initialization of the plugin or you can actually write regular markup on your page using a basic templating engine.

You can read the original readme over at: http://www.zazar.net/developers/zrssfeed/.

Changes that I've made

I've added in a simple templating engine to use with this plugin, I'm not a huge fan of forced markup in plugins. Personally, I think it's too much opinion and it forces you to work with a co-existing markup structure which you probably might not like or which might not work in your current page.

Usage

$('#feed-container').rssfeed("http://someplace.com/feed",{Options});

Parameters

• url (required) : An url to the feed
• options : options to manipulate the feed (see below)

Options

• limit (10) : The number of feeds to return.
• header (true) : If true, includes the header section and subsequently the footer (defined with entriesHead and entriesFooter).
• entriesHead : if header is true, then you can add markup with the templating engine (described below) here
• entriesBody : this is the repeated body of each feed item that you output using the templating engine
• entriesFooter : this is the footer block that is displayed only if you enabled a header
• rowSnippet : an object that describes the snippet in the body where you want the feeds to output, (NOTE: this will disable entriesHead, entriesBody, and entriesFooter): - head : a markup string that describes the heading of the output of the feeds - body : an expresssion that describes the container of the feeds to output - foot : a markup string that describes the footer of the output of the feeds
• displayHeadingAt : the id which contains the html for the entry header content, this will only display and parse if you have rowSnippet enabled, NOTE: this will disable entriesHead, entriesBody, and entriesFooter
• showerror (true) : If true and an error is returned from the Google Feeds API, the error message is shown.
• errormsg : Replaces the default friendly message when an error occurs.
• key (null) : Optionally use a Google API key.

How to use the templating engine

The templating engine allows you to extract variables from google's ajax feed api, you can use these variables in the entriesHead, entriesBody, entriesFooter options. You can see what these variables represent at http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON, simply use them enclosed in brackets {}, here's the available variables and what they translate to:

Can be used in entriesHead, entriesFooter, and displayHeadingAt:

• feedUrl : feed.feedUrl
• feedTitle : feed.title
• feedLink : feed.link
• feedDescription : feed.description
• feedAuthor : feed.author
• feedCount : feed.entries.length

Can only be used in entriesBody and rowSnippet:

• mediaGroup : entries.mediaGroup
• title : entries.title
• link : entries.link
• content : entries.content
• contentSnippet : entries.contentSnippet
• publishedDate : entries.publishedDate
• categories[] : entries.categories[]

Example:

$(document).ready(function () {
	$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
		limit: 5,
		  header: true,
      entriesHead: '<h1 class="rssHeader">\
                        <a href="{feedLink}" title="{feedDescription}">{feedTitle}</a>\
                        <span style="font-size:10px;color:#ccc">\
                          ({feedCount} feeds)\
                        </span>\
                      </h1>\
                    <div class="rssBody">\
                    <ul>',
      entriesBody:  '<li class="rssRow">\
                      <h4>\
                        <a href="{link}" title="View this feed at {title}">\
                          {title}\
                         </a>\
                      </h4>\
                      <div style="font-size:10px;color:#ccc">{pubDate}</div>\
                      <p>{contentSnippet}</p>\
                      </li>',
      entriesFooter: '</ul></div>'
	});
}

Using it inline:

So maybe you're not big writing markup in javascript? Well no big deal, just simply pass an id to rowSnippet and write in your template (in your page!) for your feeds.

Example:

// Say you set this in your document.ready
$('#inline').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
  limit: 5,
  rowSnippet: {
    head: '<li class="row">',
    body: ".row",
    foot: '</li>'
    },
  displayHeadingAt: "#inline-heading"
})

<!-- Somewhere on your page -->

<h2 id="inline-heading">
  <a href="{feedLink}">{feedTitle}</a>
  <span style="font-size:10px; color: #ccc">
    ({feedCount} Feeds)
  </span>
</h2>

<ul id="inline">
  <li class="row">
    <h4>
      <a href="{link}" title="View this inline feed at {title}">
        {title}
       </a>
    </h4>
    <div style="font-size:10px;color:#ccc">{pubDate}</div>
    <p>{contentSnippet}</p>
  </li>
</ul>

Why?

Because javascript concatenation sucks.