Adding a Web Slice to your Site

With the release of IE8, Microsoft introduced the concept of Web Slices (scroll down a bit).  Web slices allow you to designate a portion of your site that a viewer can “subscribe too”.  This is similar to the very common rss feed, however, the idea with a web slice is that you can access and view it directly from your browser’s favorite bar.   From there you can hover over the site and see the most current content in that web slice.  So if there is a particular site you read often, you can quickly hover over to see if there is something new to check out.  As far as I know, as of now, only IE8 supports web slices.  However, according to wikipedia, Microsoft has “donated the specification to the public domain.”  While this might work out well for one or two sites, I can’t image anyone that reads a lot of sites adding that many web slices to their browser.  (re:  It’s kind of cool, but I don’t see it getting a ton of use).  So if you have your own site and you’d like to add a web slice to it, how do you do it?

First you could just go here.  This seems to give a pretty good explanation on how to set up your web slice.  However, if that site is down (as it was for maintenance at the time of writing this), you can also do this.  Around the content you want to put in your slice (i.e. your most recent blog entry), you’ll put the following:

   1:  <div class='hslice entry-content' id='blogInfo' 

   2:      style='width: 100%; background-color: #ffffff;'>

   3:      <span class='entry-title' style='display: none;'>Title</span>

   4:      <!-- Content -->

   5:  </div>          

So what’s important here?  Well the first div specifies that this is your slice.  The style on that div is used for actually displaying your content when the user clicks on the slice in their favorites bar.  The span line is used to specify what the default title of the web slice.  So in the image above, my slice is “Chris Risner . Com” so that’s what I would have where “Title” is shown in the example.  Finally the content area is where you put whatever you want to show.  The page linked above shows how to link to a different page for your slice content which I won’t show but you can mess around with yourself.

One final comment on web slices has to do with the Favicon that shows up with your slice.  When I first added mine, it was showing up with the default IE icon.  After seeing this I realized that IE wasn’t actually showing up with my favicon at all.  However, my favicon, which I had just placed in the root directory of my site was showing up with both Chrome and Firefox.  After looking around for a while, I realized that while those two browsers were content with just looking for my favicon in the default location, IE needed more instruction.  If this happens to you, add an explicit shortcut icon link in your header html like so:

   1:  <link rel="SHORTCUT ICON" href="http://mysite/favicon.ico" />