As we all might have already heard, Microsoft released their New Internet Explorer 8 just a week ago. They have introduced a very useful feature called Webslice which slices a piece of your website on the bookmark tab (as shown in the picture above). Webslice does not come automatically, you’ll need to do some easy coding to achieve that.

This How To guide will teach you how to slice your Wordpress blog/website in order to be detected by Internet Explorer 8’s Webslice feature. Non-wordpress websites follows the same method as well.

What is Webslice?

Webslice is a small (around 300 x 300 pixels) page that can be viewed from Internet Explorer’s bookmark tab. Webslice works like RSS, just that instead of opening tonnes of new links, it opens a little webpage that represents the link of the website you are going.

Is Mozila Firefox Webslice Compatible?

For the time being (24 March 2009), I afraid Mozila Firefox is not webslice compatible yet. But I am quite certain that in the near future they will implement it in their browser as well, same goes to Google Chrome.

How Do I Implement It?

I sincerely suggest that you do all this in Xampp because you don’t want to screw up your visitor’s impression as you change things.

Step 1: Define webslice

Webslice is detected by Internet Explorer 8 with a few HTML codes. My Headline section is websliced by defining it with this code.
(This is defined in Wordpress’s “The Loop”)

<div class="hslice post" id="1">
<h2 class="entry-title">Title</h2>
<div>Content</div>
<a rel="feedurl" href="http://www.ahwee.com/webslice.php/" style="display:none;"></a>
</div>

Note the bolded texts. These are essential to define a webslice.

Hslice class tells IE8 that this <div> tag is sliced. Id is just an identification (I have no idea what is it for), any value is alright. Anything inside the entry-title tag is served as the name for the bookmarked tab.

The rel=”feedurl” tells you where to get the updated feed. For my case it’s www.ahwee.com/webslice.php we will talk more about that later.

By now if you load your webpage with IE8, the section that is websliceable should be detected with the green icon and green borders shown in the first picture.

Step 2: Making your Webslice Page

Let’s do it my way, I’ve tried numerous methods and some does not work the way I wanted it to be. I won’t venture that far.

What I do is, I make a webslice.php file at the root of my wordpress folder, it’s at the same level with wp-content, wp-includes and wp-admin.

I want to enable Wordpress Template Tags to be usable in that page so I have to include wp-load and template-loader.php.

<?php require_once( dirname(__FILE__) . '/wp-load.php' );
wp();
require_once( ABSPATH . WPINC . '/template-loader.php' );
?>

After this it’s all wordpress programming. All you do is …

1. Query the updated post
2. Use the_title(), the_time(), the_content() and etc to show whatever you want to show in the webslice
3. Define them like what we did in Step 1 again (minus the rel=”feedurl” part)
4. Add one more entry-content div tag to determine what to publish on the sliced feed.
5. Style your webslice with the HTML style <div style=”text-align:justify”>. Style sheets does not work, tell me if you found a way around this.

If you have no idea what I’m talking about and would like to look at codes. Download it.

Step 3: Testing

Test your webslice. See if it’s working properly, refresh it from the bookmark tab.

Set the update frequency to 15 minutes and make a test post. After 15 minutes, observe your webslice update by changing the text and bolding it. If you have reached until that part, implement it to your website and let your visitors enjoy webslicing your webpage.

As an admin I proudly announce that AhWee.com is Webslice compatible.

That’s all for this guide. If I missed anything or something is not working. Get back to me I will answer as quickly as possible.