Tutorial: How to Write an IE8 Web Slice for WordPress Blogs

Web Slices are perhaps one of the coolest features in Windows Internet Explorer 8. Some people might find them similar to the Live Bookmarks feature of Firefox but in reality, IE 8 Web Slices can do much more than track simple RSS feeds.

Let me explain. Say you are tracking an item on eBay and like to get notified as soon as someone places a new bid or if the seller helps modifies the product description or shipping cost. You can either do this by continuously refreshing that eBay auction page in your browser or simple add the eBay slice.

Now whenever anything changes in auction, it will reflect right in the favorites bar of your IE 8 browser. Click the bookmark (or web slice) to know what has changed.

Think of an IE 8 Web Slice as a mini web page that is displayed inside your browser no matter what site you are on. And unlike Live Bookmarks of Firefox, which are nothing but a plain drop down of website headlines, you have complete control over the layout and look-n-feel of web slices in IE.

How to Create IE 8 Web Slices

It is the responsibility of the website owner to develop web slices for his or her website. You have to decide what content should be made available in the web slice, how often should that be refreshed and what should be the layout (or design) of the web slice.

MSDN Library has some good documentation to help you get started with web slices including a style guide to ensure that your web slice looks good and readable inside the web browser.

You may find the documentation a bit technical in nature but dont lose heart – here a really simple example that will show you how to create a custom web slice for any WordPress blog (self hosted).

1:
2:
3:
4:

11:

An IE8 Web slice is a simple HTML web page that has the following structure. You just need to specify the title of a web slice (as that displayed on the browser favorite bar) and then change the content inside the “entry-content” class (line 7-9).

You can also define your own CSS styles as this real example – open the link in IE8 to see how the browser auto-discovers the web slice on the page by flashing the green slice icon.

If you dont have IE 8 or have trouble getting the web slice to work on your computer, here an HD screencast demo of the same.

If you have a WordPress (self-hosted) blog, here how you can create a web slice that IE 8 users can add to their menu bars.

Create a new file (say webslice.php) in your WordPress installation folder and copy-paste the follow code in the php file.