HOWTO: Add Live Bookmarks Support to Your Site
I received an e-mail a few days ago from a reader in Europe (hi Sisi!) asking me if I could put together a short tutorial on how to add support for Firefox’s Live Bookmarks feature to a Web site. I’m always happy to help people get the most from Mozilla, so I thought, why not? (Especially since I am one of the “Mozilla Wordsmiths” referenced on the page linked above, it’s a little embarrassing to have people coming away from it more confused than they were when they found it!)
So, without further ado, I give you a HOWTO on making your site Live Bookmarks-enabled.
FIRST THINGS FIRST
First, though, I should probably describe what Live Bookmarks are for those of you who don’t already know. Live Bookmarks are a neat feature of Firefox 1.0 that uses the power of RSS (Really Simple Syndication) technology to let you see at a glance what’s new at all your favorite sites.
The way RSS works is that sites offer “feeds” that you can subscribe to, with appropriate software; these feeds are updated whenever there’s something new, and the software that monitors the feeds for you tells you about the update and usually lets you get directly to it with one click.
Here’s how Live Bookmarks fits in. If you’re browsing a site that has Live Bookmarks support, you’ll see this icon in the address bar of your Firefox window: 
Like this:
Click that icon and you’ll see a list of all the RSS feeds that the site offers; selecting a feed will add a Live Bookmark for that feed to your Bookmarks list.
Then, whenever you want to see what’s new at that site, you can just look in the Bookmarks menu — when you mouse over the Live Bookmark, it will show you the latest list of stories from the site the Live Bookmark points to.
So Live Bookmarks are an easy way for Firefox users to keep up with your site. But how do you make it so that little icon appears in the address bar? Let’s find out.
ADDING LIVE BOOKMARKS SUPPORT TO YOUR SITE
Thankfully, making your site Live Bookmarks-enabled is actually pretty easy — assuming that you are already publishing at least one RSS feed, that is. (If you’re not, talk to whoever provides your content management system, as RSS support is cheap, easy, and very high-value.)
Given an RSS feed, all you have to do to make that little icon appear in your user’s Firefox window is add a tag to the
block of your pages. This is the tag:<link rel="alternate" type="application/rss+xml" title="..." href="..." />
For “title”, put in whatever text you want the user to see for that feed when they click the icon. For “href”, put in the URL of the RSS feed you want them to subscribe to.
That’s all there is to it! Just add that tag to the
block of any page you wish to Live Bookmarks-enable, and you’re good to go.EXAMPLES
Let’s look at an example to illustrate how simple this is. Here at Just Well Mixed, we publish a feed in RSS 0.91 format at the URL http://www.jasonlefkowitz.net/index.xml. So I could make the icon show up, and provide the option to add a Live Bookmark for this feed, by adding this to my pages’ <HEAD> blocks:
<link rel="alternate" type="application/rss+xml" title="Subscribe to Just Well Mixed Updates" href="http://www.jasonlefkowitz.net/index.xml" />
Notice I added a title — “Subscribe to Just Well Mixed Updates” — and a URL — http://www.jasonlefkowitz.net/index.xml. This means that when the user clicks on the icon, a menu will pop up with one choice, which reads “Subscribe to Just Well Mixed Updates”. If they click that choice, a Live Bookmark will be created for this site that pulls from the RSS feed at http://www.jasonlefkowitz.net/index.xml. They’ll then see all updates published via that feed in that Live Bookmark.
“But,” you ask, “what if I publish more than one RSS feed?” Not a problem — you can have as many feeds in there as you like. For example, we also publish a feed in RSS 1.0 format for JWM. What if I wanted to give users the option to choose one or the other when creating a Live Bookmark? Here’s how that would go:
<link rel="alternate" type="application/rss+xml" title="Just Well Mixed Updates -- RSS 0.92" href="http://www.jasonlefkowitz.net/index.xml" /> <link rel="alternate" type="application/rss+xml" title="Just Well Mixed Updates -- RSS 1.0" href="http://www.jasonlefkowitz.net/index.rdf" />
Now our user will get two options when they click that icon — one that reads “Just Well Mixed Updates — RSS 0.92” and pulls from the RSS 0.92 feed, and another that reads “Just Well Mixed Updates — RSS 1.0” and pulls from the RSS 1.0 feed. Of course, since Live Bookmarks can read both of these formats, there’s not much point in providing multiple feeds in the menu if the only difference between them is the feed format. But if you provide, say, category-specific feeds, or feeds for comments, or any other feeds where the actual content is different, you can use this to let your users add Live Bookmarks for that content too.
(But what, you ask, if your feed is an Atom feed, rather than RSS? All the instructions above still apply for Atom; the only difference is that you need to make sure you put “application/atom+xml” as the value of the “type” attribute, instead of “application/rss+xml”.)
FINIS
And that brings us to the end of our tutorial on enabling your site for Live Bookmarks. I hope this has cleared up any confusion you may have had on the subject! If it only made things worse, feel free to drop me a line and excoriate me, though I would ask that you consider that I’m writing this at 1:20 on Monday morning before you turn the flames up too high 🙂
And don’t forget to leave your questions and suggestions in the comments, that’s what they’re there for!
UPDATE (3/25/2005): A reader wrote in and pointed out an error in my tags above — the type=”” attribute should be set as type="application/rss+xml", not type="application/xml". I’ve made the correction, sorry for the confusion!
UPDATE (8/24/2006): The advent of Atom means that we now have an alternative to RSS for Live Bookmark feeds. I’ve updated the text above with the (minor) things you need to do differently to set up an Atom feed as a Live Bookmark.
UPDATE (9/27/2006): A reader points out that this HOWTO was out of date — it was still describing the icon as displaying in the browser window’s bottom right corner, when in fact Mozilla has moved it up into the address bar. I’ve updated this document with that correction. Thanks!
A web feed for this site is available,
Comments
Kevan
October 6, 2006
4:56 am
Thank you for this. I was trying to work out how to add this to my WordPress theme and unless I’d found this, I may never have solved it.
Thanks!
Ronald Allan
September 12, 2007
12:54 pm
thanks… i will sute add this feature on my site… can you once try to visit my site and tell me where to put this?
Edijs
January 15, 2008
2:58 pm
Please tell me how to create index.xml file to build my own RSS feed in my own site, to display news headlines ?
Jason Lefkowitz
January 17, 2008
1:03 pm
“Please tell me how to create index.xml file to build my own RSS feed in my own site, to display news headlines ? ”
If you want to display headlines on your site you don’t want to create your own RSS feed, you want to “consume” other sites’ RSS feeds.
Unfortunately, I can’t really help you much more than that because the exact way you do that varies depending on the content management system you’re using. Sorry.