Creating Basic WebSlices for IE8

March 13th, 2008

WebSlices are a completely new feature for IE that allow users to subscribe to certain content contained within a web page. The WebSlices behave like RSS feeds, allowing the user to subscribe to the content for updates.

Enabling WebSlices on a web page is quite simple, requiring only some simple additional coding. A basic example would look like this:

<div class="hslice" id="1">
   <p class="entry-title">Title for WebSlice</p>
   <div class="entry-content">Information to be displayed in WebSlice
   </div>
</div>

<div class="hslice" id="2">
   <p class="entry-title">Title for WebSlice2</p>
   <div class="entry-content">Information to be displayed in WebSlice2
   </div>
</div>

There are a few key elements to take note of, without these elements, your WebSlice will not function properly:

  1. The WebSlice must use the class name hslice in the container.
  2. Each WebSlice must contain an ID in the container. This is how the WebSlice will be differentiated from others on the page.
  3. The WebSlice must have at least one entry-title element defined. This will be displayed both in the page and in the feed button that appear in the Favorites Bar when a user subscribes to the WebSlice.
  4. While not required, each WebSlice should contain at least one entry-content element. This is the information that will appear when the user selects the WebSlice from their Favorites Bar.

Once you have your basic WebSlice in place, you can now work on how it looks. By adding a style to the tags you can format the WebSlice information so that it better matches the layout of the rest of the page. Styles applied to the entry-content element will also be used in displaying the WebSlice when a user accesses them from the Favorites Bar. You can also use existing styles and html coding by placing them within the entry-content container.

Here’s a WebSlice I whipped up for my workplace to show how many licenses for their ERP system were in use:

webslice_demo1.png

I created an ASP page and used CSS styling to create the chart. The data is taken from the ERP system’s login table. I placed the chart code inside the entry-content container and had an instant WebSlice.

You can read more about creating WebSlices in the WebSlices Whitepaper at Microsoft.

Posted by shamanstears Filed in IE8

5 Responses to “Creating Basic WebSlices for IE8”

  1. davak Says:
    March 16th, 2008 at 10:58 am

    Way ahead of the curve but this is a great recipe. You certainly don’t see IE8 tutorials showing up elsewhere on the web. ;)

  2. shamanstears Says:
    March 16th, 2008 at 11:34 am

    @davak I know it’s is quite early for this stuff, but you’d beat me to the punch if I didn’t get right on it. :)

  3. qmchenry Says:
    March 16th, 2008 at 2:07 pm

    ie? What’s that?

    ;-)

  4. davak Says:
    March 17th, 2008 at 5:00 am

    @qmchenry It’s not surprising that a firefox user is running out of memory. ;)

    @shamanstears I’ll get you. I am already working on ie8 sp2. :)

  5. Peter Says:
    May 5th, 2008 at 8:28 am

    ShamansTears — Excellent tutorial, I agree with davak, you really don’t see many of these, it’s great to have them out there. Webslices are pretty damn cool. I’d also recommend you check out Activities (although I’m guessing you already have!) I’m with Me.dium, and Microsoft actually presented our Webslice Discovery and Activity pieces at the IE8 launch. Me.dium’s Webslice Discovery tool allows you to identify which sites around you have Webslices, and Me.dium’s Activity enables you to see a real-time view of what’s hot around the site you’re on and the content you select. We’d love for you to check them out and give us your thoughts.

    http://me.dium.com/ie8

    me.dium username: pjn

Leave a Reply