First add a place holder div where you want the feed to be rendered.
<!-- the placeholder for the single feed --> <div id="multiple-destination"></div>
Then add a handlebars template to the page.
<!-- the handlebars template for multiple feeds --> <script id="multiple-feed-template" type="text/x-handlebars-template"> {{#each entries}} <div class="entry"> <h4><a href="{{link}}" class="entry-title">{{title}}</a></h4> <p> From <span class="feed-title">{{feed.title}}</span> by <span class="author">{{feed.author}}</span> <br/> {{publishedDate}} </p> </div> {{/each}} </script>
And finally a little JavaScript to kick things off.
rss = new HandlebaRss([ "http://www.octolabs.com/blogs/octoblog/feed.xml", "http://datachomp.com/atom.xml", "http://geekindulgence.com/rss/", "http://www.okcruby.org/atom.xml", "http://okcjs.com/atom.xml", "http://joekarl.github.io/feed.xml", "http://vancelucas.com/feed.xml", "http://campbeja.github.io/feed.xml" ],"#multiple-feed-template","#multiple-destination",5); rss.init();
For multiple feeds the context of the handlebars template is a JSON object that contains an entries array of the combined and sorted entries from all of the feeds. Each entry has a feed property that contains the data from the top level feed that the entry belongs to (author,description,feedUrl, etc...). In the template you can access these with something like {{feed.author}}.
{ "entries" : [{...},{...},...] }