- Download Example
- Preview/Code
- Tested in:
- Safari 2/3 Mac/PC
- Firefox 2/3 Mac/PC
- Opera 9 Mac
- Internet Explorer 7/8
- 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 <head> 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 <head> 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.
Ooh, that is too clever! I do see sites that have numerous feeds, and have wondered how that might be presented nicely. I think this would be the solution.
Awesome :D
Priceless… I’ve already linked it on my tumblelog!
Nice idea, getting ahead of myself thinking of ways to style it.
Very nice idea. Especially love the graphics. Would be cool to have it fade in to. Great work!
awsome, worth to try it out :)
Excellent idea. Beautiful implementation!
Nice little solution, Rogie. Thanks.
Really cool, thanks for sharing!
@everyone – Thanks all for the great and kind comments. Please let me know if you see any enhancements that can be done.
Also, let me know if you have ported the code to other languages so that I can link you here.
Fantastic idea. Rather than a select box as your menu, it would be great if it were just a nested list – that way it could be styled however I see fit.
Great work though – me steal!
Great Idea, keep up the good work….. rock the web world.
Great idea, Rogie! Nice CSS and JavaScript ninjary.
@Wayde – Yes, of course great idea. However, select lists work out of the box on the edges of your browser, meaning that I don’t need to code any JS to detect position in relation to the window to make the menu pop vertically upward. Another added benefit of select lists is that if they are near the right edge of the browser, the options will be visible over the browser.
@Larry – thanks man. I dig ninjas…and JavaScript.
this is some awesome insight …. so helpful! thanks man!
@Rogie – Another great tip! I hadn’t thought of that.
Although I’m inclined to say “so what if the select box goes off the screen?” :)
From my experience, the trade-off between struggling to style select boxes and just going with a list has always seen me going with a list.
Anyway, when I get around to using your plugin, I’ll have a fiddle and see if I can add anything to it – will let you know if I do :)
Thanks again!
@Wayde – Styling the options will always be almost nonexistent, however, styling the actual select, icon and arrow is where you have some freedom. This plugin could easily be changed to create an unordered list with list items of feeds. Go for it!
@Brian Feister – Thanks man.
Awesome, incredible. I like that icons, congrats.
Good luck, keep doing this kind of stuff.
Wow, I love the buttons and it’s a very good ide.
Thanks and keep it up! =)
Awesome!
Nice. But it has one small bug.
@Zodios – What is that? It’d be nice to know about bugs so I can fix them…
cool, this is brilliant! im thinking i have to use this in my site.
I can’t figure out how to use this. If I am using the trans on dark then what code goes where?
@Kimberly James – First, include the CSS and the JS found in the example in the head of your HTML document as a link and a script respectively.
Next, you’ll need to put the following code in your document with an onload or an $(document).ready (in jQuery):
var fm = new FeedMenu(null,'trans_on_dark');fm.write('css_selector');
Where “css_selector” is a string containing the selector of the item you want the feed menu to be added to, i.e. #feed_menu_container.
Thanks for writing back so fast. I feel like an idiot, because I don’t understand that either. lol. I understand to put the js and css where they need to be, but the rest I am clueless about.
Really nice Feed menus. Very creative specially the komodo media wood feed.
great Feed menus. its Very creative
thanks
The dropdown is too narrow for the text in IE 7, but it’s OK in others.
See http://k7waterfront.org/
Any insight?
Wow…very very creative nice work and I love how you added the “komodo” theme in there. I am going to try this out on my new site. Great write up!
Thank for the feed jquery code. Good job!
Excellent work! Stumbled!
I’ll be using this for another project of mine
A perfectly crafted solution. Thanks! I’ve been looking for something like this for quite some time.
cbvbcv
Very nice, like the look of it..
thanks alot! helped me on my last project.
Awesome, thanks :)
Thanks for the code. I realy like this simple adding.
Well done! This is a very cool system!
JimS.
Jacksonville, FL
Go Gators!
This definitely doesn’t suck.
I like it so much. It’s easy to use. THX!
Great article.
Might be using this on my website.