How to Add a Web Slice your Blog

One of the cool new features in IE8 is called Web Slices. It allows users to subscribe to a part (slice) of a web page, and get notified when it changes.

Think about the following scenario: suppose your only reason browse to CNN's homepage to get the Dow index. Rather than point you browser at the address, load te entire page every time (including countless images, flash files etc.) and hit F5 every couple of seconds, you mark the area of the page that interests you, the browser adds a live link to it in the links bar, it prompts you when the contents of the slice change and actually shows you the content.

So, on the last day of PDC I took a hands-on lab on Web Slices and found out they're extremely easy to implement - just 3 HTML tags needed. I planned to add one experimental slice to the Twitter area of my blog (lower left side on the home page).

The way a Web Slice manifests itself in IE8 is by showing a green frame and icon when you hover over the area where the slice is:


Clicking the green icon, adds a live bookmark to your toolbar, that shows the slice's content when pressed:
Another nice feature is a drop-down menu that shows you all subscribable content on a page, including slices and RSS feeds - so you don't have to hunt them down by hovering over the page:
So, here's what I thought I needed to do: go to the Twitter Page element, add 3 HTML tags and publish. Here's the HTML code of the Twitter element:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;"
href="http://twitter.com/TravelTechGuy">follow me on Twitter</a>
<script src="http://twitter.com/javascripts/blogger.js"
type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline
/TravelTechGuy.json?callback=twitterCallback2&count=5"
type="text/javascript"></script>
</div>

To make this into a Web Slice, you need to do the following:

1. Surround this section with a <div> with a class="hslice"
2. Add another element (a span or an h1 or h2) with class="entry-title" - to give the slice its name
3. Surround the rest of the content with a <div> (or a <span>) with class="entry-content"
   

And that's all. Wrong!

Problem 1
As you can clearly see, this HTML invokes a JSON call, using JScript to the Twitter site to get content for the list. That means that if you subscribe to the slice as is, you'll get an empty page. For security reasons, a slice will not execute the code for you, to prevent a security attack known as XSS (Cross Site Scripting).

It took me awhile to realize that I have to serve the slice with the content already in it - so I actually had to serve the user another HTML page. Luckily, Microsoft prepared for such an eventuality, and you can define your content provider to be another HTML page, by including an invisible a element, with a rel="entry-content":

<a style="display:none;" href="http://www.travelingtechguy.com/forblog/twitter.html"
rel="entry-content"></a>

The user will never see the tag - it's there for IE's sake.

Problem 2
Since the page was disconnected, none of my pages design carried over, and the element looked like a simple bullet list. I had to dig through my Blogger template and copy some CSS over to that page (Blogger doesn't make it easy to copy its CSS, since it's full of macros and variables, that serve the GUI template editor). I finally was able to de-reference all variables and get a similar design.

Problem 3
The Web Slice is displayed in a square by IE8 - and you cannot control its dimensions. Think of trying to show your page in an iframe of a certain size that you don't control. This resulted in a cut list - you could only see 2 items instead of 5, and they were cut at the edges.

I solved that by adding a scrollable div around the list (as you can see in the image above).

You can see the source of the page on my site.

So, it took longer than the 3 minutes I thought it would take - but now I know how to turn the rest of my elements to Web Slices. I know Microsoft has a list of sites that have already started implementing Web Slices and I hope more will take it up.

For the FireFox purists, rumors are that FF 3.1 will start support for Web Slices as well. In the meantime, enjoy my Twitter Slice and expect more in the future.

PS: showing HTML code in a post is such a hassle. You have to code the whole thing by hand (i.e. change every < to &lt;). Next time I'll just copy-paste an image of the code from my editor .