jQuery Feed Menus

Feed Menus

Download Example
Preview/Code
Tested in:
Safari 2/3 Mac/PC
Firefox 2/3 Mac/PC
Opera 9 Mac
Internet Explorer 7
Google Chrome
No Support For:
Internet Explorer 6

If you are feelin’ the love, spot me a coffee!

When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound. I have a feed for my blog, the nerdlab, my bookmarks, my friend feed as well as my twitter updates. That’s a butt-ton of feeds.

Browsers have come up with a smart way of offering this content to users and it is usually place somewhere by the location bar as shown below:

Firefox 3 Feed Menu

Safari 3 Feed Menu

With the click of a button, you can view all of the feeds available in the of the document.

But still, it’s nice to offer users an alternate way to get at your feeds, so typically you will see a feed icon lurking around a site somewhere. At times, you will see a list of two, three or more links to different feeds offered on a site. Why not have an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site? Why I ask? Why?

It’d be awesome to allow users to click your feed icon and be presented with a list of feeds to choose from. Hmmm, I want your twitter feed in Atom format or I’d like to subscribe to your blog feed in RSS format. Done.

The jQuery Feed Menu

Here’s how easy it is. I am going to plop one right here: . Go ahead click it. You know you want to. This feed menu was created easily by the following snippet of code:

var fm = new FeedMenu(); fm.write('#jquery_feed_menu_example_1');

Cool huh? That piece of code finds all of your feeds in the of your HTML document and makes them into a handy menu you can plop anywhere. Here are some more examples:

Atom Feeds

Atom Feeds:

Code:

var fm = new FeedMenu('link[type*=atom]‘); fm.write(’#jquery_feed_menu_example_2′);

RSS Feeds

RSS Feeds:

Code:

var fm = new FeedMenu('link[type*=rss]‘); fm.write(’#jquery_feed_menu_example_3′);

Different Theme Classes:

Classic Orange
Komodo Media v.4 Woodgrain
Komodo Media Azure

Transparent on Dark (for dark backgrounds)

Transparent on Light (for light backgrounds)

Code:

/* * @param 1: CSS link selector or array of JSON objects * @param 2: Class Name: null, wood, azure, trans_on_dark, trans_on_light /* var fm = new FeedMenu(null,'wood'); //2nd param is class fm.write('#jquery_feed_menu_example');

Last, something custom

Let’s say you don’t want the feed menu to find links for you. You want to provide them in code. Check this out:

And, here’s the custom code:

var oCustomLinks = [ { title:'RSS Feed', href:"http://feeds.feedburner.com/komodomedia" }, { title:'Subscribe with Bloglines', href:"http://www.bloglines.com/sub/http://feeds.feedburner.com/komodomedia" }, { title:'Subscribe with Google Reader', href:"http://www.google.com/reader/view/feed/http://feeds.feedburner.com/komodomedia" } ]; var fm = new FeedMenu(oCustomLinks); fm.write(’#jquery_feed_menu_example_6′);

You can download all of the files used here to use on your site. Feel free to modify and use this code how you see fit and if you use it, please drop a comment here to show me how you’ve used it.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.