« Demo now available for Webmail | Main | Speaking on Subversion at Boston CFUG, May 20th »

IE8's graphical live bookmark: the "WebSlice"

Internet Explorer 8 Beta introduces a new live bookmark feature they call "WebSlices". WebSlices actually subscribe you to portions of a Web page. It's a pretty cool idea-- with some easy mark-up in your page, you can allow users to subscribe to subscribe to your site's information without creating an extra RSS feed. And, users can view the feed not as a text list in a grey menu, but as a slightly larger window with its original HTML/CSS formatting. It's kind of like a graphical RSS feed, but without the work of maintaining the feed.

The way that IE8 reads the WebSlice feed is by having developers code portions of their site with the hAtom microformat using specific class names. Then when a user browses the site using IE8, the browser recognizes the hAtom section as a WebSlice and gives it extra formatting to alert the user that it's available. If a user subscribes, then IE8 places a link to the WebSlice in its Favorites toolbar and polls the web site on a regular basis to see if the information has been updated. Developers have control over the name, HTML formatting, expiration date, and polling interval (or time-to-live) of the WebSlice.

Here's a list of my recent posts coded to be a WebSlice. If you view it in IE8 and have WebSlices enabled, then you should see a "widget" appear when you mouse over it.

webslice.gif
This is the "widget" you see when you mouse over a WebSlice.

Give it a try by mousing over the list below (using IE8, of course):

Creating a WebSlice
Here's how you create a WebSlice: following the hAtom microformat, you must have a section with a class of "hslice", and within that section, one or more elements with a class of "entry-title". That's pretty much all that's required, but you can also have elements with a class of "entry-content". Here's the example from the docs:


<div class="hslice" id="1">
    <p class="entry-title">Item - $66.00</p>
    <div class="entry-content">high bidder: buyer1 … </div>
</div>

Now the funny thing is that despite the facts that the docs say you can have multiple entry titles and entry content areas, I can't get any WebSlice with more than one entry-title to work in IE8. Once you add more than one of them, the selection widget won't show up anymore. And despite the fact that the WebSlice docs show samples of WebSlices on the MSN homepage, you can't find a single selectable slice on the page right now (there is one "hslice" class in the code, but for the life of me I can't find it with a mouse in the rendered page). I supposed you just have to wrap multiple content items in one entry-content section for now.

So, I think WebSlices are a great idea-- it adds HTML formatting to your feeds in other people's browsers, and you don't have to do much at all to create them-- just add a few classes to existing sections of your site. But it seems as if IE8 has to fix a few bugs to get them to work correctly.

Comments (5)

First of all i would like say thanks to you.

your this post helps me lot. make my blog's post As "Webslice"

cheers.......!

thankyou so much im going to use webslices for my website.RSS is confeusing to me

A simple question.
How do you create a bookmark in ie8.0
Answer above 200 words and i still don't know!!!
Internet Explorer 8 Beta introduces a new live bookmark feature they call "WebSlices". WebSlices actually subscribe you to portions of a Web page. It's a pretty cool idea-- with some easy mark-up in your page, you can allow users to subscribe to subscribe to your site's information without creating an extra RSS feed. And, users can view the feed not as a text list in a grey menu, but as a slightly larger window with its original HTML/CSS formatting. It's kind of like a graphical RSS feed, but without the work of maintaining the feed.

Hello,
Thanks for the kind information , I love it! Keep Posting...

I'd like to thank you for the efforts you've put in writing this site.
I really hope to view the same high-grade blog posts by
you in the future as well. In fact, your creative writing abilities has inspired me to get my own website now ;)