How to create Web Slices for Internet Explorer 8
Earlier we spoke about the new “toolbar” strategy of Internet Explorer 8. One of those elements is something called Web Slices (icon to the left). A Web Slice allows users to subscribe to a portion of your web page, through their favourites toolbar. As Microsoft describes it: “The Web Slice format consists of the minimum HTML annotations necessary to enable the publication and consumption of a mutable item on a Web page. Web publishers can use this format in conjunction with properties from hAtom Microformat World Wide Web link to make portions of a Web page subscribe-able.” Today we will cover the basics of Web Slices and then provide you with the documentation to move forward and start designing some Web Slices yourself
Basic Properties
The basic properties of a Web Slice are the Web Slice container, Entry Title, and Entry Content. Breaking it down as follows:
Class and ID (required element)
* Must use the class name “hslice”
* Must include an “id”
* Represent the entire region of the Web Slice that contains the title, description, and other Web Slice properties
Entry Title (required element)
* Uses the class name entry-title as defined in the hAtom Microformat
Entry Content (Optional)
* Uses the class name entry-content as defined in the hAtom Microformat
Some other considerations are setting bandwidth properties and alternative update source. You can control how Internet Explorer updates a Web Slice using the class name ttl. Please note the value must be expressed as minutes. The alternative update source uses the rel name feedurl and the href attribute indicates the Web Slice or feed from which to get updates.
So putting this together gives us a basic Web Slice for Internet Explorer 8:
Click here for the code
You can view our basic Mark8t Web Slice in action here. The code can easily be implemented into any page as well. We chose to implement off page, but it could easily have been embedded in the sidebar.
Discovery
Just like an RSS Feed, when a user is using Internet Explorer 8, they will notified there is Web Slice content on a page in two ways. One will be in the toolbar, the second will be by the green box around the content. Below is an example (click to enlarge):
If you wish to offer the content via a button, this is an example of to implement within a Web page.
<button onclick="javascript:window.external.addToFavoritesBar('http://www.mark8t.com/feed/', 'Mark8t Web Slice Feed', 'slice')">Add WebSlice</button>The above will create this:
We know our example Web Slice is extremely basic, but you can see how easily you can create content of value for your customers. You can send deals directly your customers, time limited coupons, or even new product notifications/releases. There is a whole new world of e-marketing opportunities waiting to be discovered.
To get you started here some other great resources to start your learning about Web Slices and Internet Explorer 8:
Video how to create Web Slices
Please Note: This article is based on the preliminary information and may be subject to change when Internet Explorer 8 leaves Beta.
Print This Post
