I guess the real reason for this blog post is, OzBargain has actually implemented some extra functionality just for the up-coming web browser from Redmond. Shocking! Is OzBargain selling out?! No, I am not paid by MSFT nor have they offered me a big ass table as Christmas present (except for a free lunch, thanks Deeps!). OzBargain has been invited to participate in the up-coming IE8 launch, and the challenge is — how to incorporate new IE8 features into existing website. And in my case, adding a Web Slice.

Adding OzBargain Web Slice to Internet Explorer 8

So now when you visit OzBargain front page with Internet Explorer 8, Feed/Web Slice discovery button will be highlighted to show that Web Slice exists on this web page. Click on it reveals that a Web Slice called “OzBargain Deals” is available.

Click on the “OzBargain Deals” web slice will pop-up a dialog prompting when you want to add this Web Slice to the IE Favorite Bar.

You’ll see a new button being added to your Favorite Bar, titled “OzBargain Deals”. It will be highlighted when the content of the Web Slice has changed, and when you click on it, it brings out a small chrome-less window showing (1) most voted deals from the last 72 hours, and (2) most recently submitted deals.

Cool huh?! That means if you are an Internet Explorer 8 user, you can check out probably the most relevant deals on OzBargain with one click! How awesome!

How Web Slice is Implemented

Alright. Marketing cap off, engineering cap on. It took me around 2-3 hours to add the “OzBargain Deals” web slice onto OzBargain. I did this as a proof of concept, although there are many features that I did not use. It turns out that it’s actually pretty easy to add a web slice onto IE8. There’s no ActiveX. No special browser extension. Nope. Just plain CSS and HTML.

The first thing that should be done is to RTFM, and MSDN has everything you need to implement Web Slice on your own site.

Now, there is no actual visual element on OzBargain front page that I wish to make into a web slice. So I basically create a hidden element so Web Slice discovery will detect the existence of a Web Slice on OzBargain (yet invisible to most visitors). I am using Drupal for OzBargain, and it’s relatively trivial to add this onto a front-page template:

<div id="slicedeals" class="hslice" style="display:none">
  <span class="entry-title" style="visibility:hidden">OzBargain Deals</span>
  <a rel="entry-content" href="/slice/hot-deals" title="OzBargain Deals"></a>
</div>

The key is:

• An outer <div/> that must have an id and class="hslice".
• An inner element with class="entry-title" defines what this web slice will be called on the Favorite Bar.
• An anchor with rel="entry-content" points to where the actual web slice content is.

Now the next step is to actually implement the content for your web slice. YMMV depending on your chosen CMS/framework. Again it’s easy to add an URL handler in Drupal, where I implemented the actual web slice content. Nothing fancy on this page — standard HTML, CSS and a bit of Javascript with jQuery. Moreover, I just need to make sure it looks okay on IE8 — no browser compatibility test required!

Let’s it! Now go and make your website a slice!