May
8
IE8 Web Slices – Tutorial of How to Easily Add Them to Your Website
Do you want more people bookmarking and subscribing to your website content? Add some Web Slices to your site to capture your viewers that are using Internet Explorer 8. What is a Web Slice you might ask?
A Web Slice is one of the new features found in IE8 that will makes browsing your favorites sites faster and easier. It is a way to add just a portion of a website to your Favorites Bar for easy access and continuous updates. Unlike a traditional bookmark, a Web Slice will continuously check for updates of that particular piece of a website and notify you when new content is available. When you click on that slice, the content will preview in a small window, so you don’t actually have to navigate to the site to see the update.
Let’s say you want to stay up to date on the latest stories from the New York Times. Instead of checking their homepage a few times every day, you can just add the New York Times Web Slice to your Favorites bar. Every time a new story is published, your Web Slice bookmark will highlight, indicating that new information is available. When you click on the Web Slice bookmark, a small window pops up over the current page you are browsing. You can quickly check out the new headline, and then go on with what you were doing.
These Web Slices are a great way to get more people viewing the constantly updated content from your website, like your latest blog entries. You can create a Web Slice from pretty much any part of your website quickly and easily, just follow the simple steps below.
First of all, the content you are going to turn into a Web Slice has to be enclosed with a <div> tag. The <div> tag you use must have a unique id value assigned to it, or the slice will not work. You can create a slice of anything inside of a <div> tag by adding 3 simple class names. For this example, we will use the following html code that displays the latest posts from a blog:
In the outermost <div> tag, create a new class called “hslice”. This will let IE8 know there is a Web Slice on your page. In IE8, the “hslice” class will cause a green “Add Web Slices” icon to appear in the Command Bar, letting your readers know a Web Slice is available on your page. It will also create a green box and similar icon to appear on your website, with the box surrounding whatever is encased in the aforementioned <div> tag.
The next step is to add the class “entry-title” to any element inside the <div> tag. This class will be the title of your Web Slice, so it’s probably best to add it to an element like <h2> or something similar. Your resulting code will look like this:
Once you have defined the presence of a Web Slice on your page, along with the title of your slice, you now have to define the content you want to appear in the Web Slice preview window. All you have to do is add another class called “entry-content” to any element you want to show your subscribers. Your final code will look like this:
That is basically it; you are done! How easy was that? Now, all a user has to do is click on the Add Web Slice icon while they are browsing your site to subscribe to your slice! Here is what your content will look like when you are finished (if you are in IE8 right now, just hover over the Latest category to your right):
Of course there are ways to customize your slice using additional html commands. There are ways to create a Web Slice button that make discovery easier, you can style your Web Slice, you can select an alternative source for your Web Slice (like an RSS feed or customized website), and more. For the complete guide to Web Slices, see the MSDN Developer Center.
I also found a great video tutorial to Web Slices called IE8 WebSlices in 3 Minutes on the Delicate Genius blog. If you have an extra 3 minutes to spare, this tutorial will walk you through getting your slice set up in no time. Also, if you want to run with this whole IE8 slice thing and develop something really cool, check out the IE8 Web Slice, Accelerator, and Visual Search competition put on by Microsoft. You could win an XBox 360 Elite!
Tweet
