How To WebSlice Your Website

March 24th, 2009 by | This article was viewed 27,045 times.

How To WebSlice Your WordPress Website

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?

How To WebSlice Your WordPress Website

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.

Enjoy Reading? Subscribe to our RSS Feed for future updates.

3 Responses to “How To WebSlice Your Website”

  1. Gregory Despain Says:

    I’ve been reading a few posts and really and enjoy your writing. I’m just starting up my own blog and only hope that I can write as well and give the reader so much insight.

  2. :D Wimax Says:

    well know body no what happen next.

  3. John Ddenz Says:

    You can create web slice from any part of web page just in one click using “PageSlices addon for Firefox”.

Leave a Reply

You must be logged in to post a comment.

More Posts
29 Oct - Google Voice Search vs. Apple Siri | 6,618 views
23 Oct - Starcraft 2 Heart of the Swarm BlizzCon Units Update (Detailed) | 4,848 views
17 Oct - How To Disassemble Laptop (Sony Vaio VGN-C25G) | 7,991 views
16 Sep - University or College Education Not Worth the Dollars | 21,450 views
13 Sep - Millionaire Mind Intensive (Things You Don't Know) | 16,645 views
11 Aug - Baking is no Engineering Business | 13,439 views
04 Jul - We are Living in The Matrix | 25,787 views
17 Jun - Monetary Inflation Made Simple | 21,561 views
06 Mar - How To Disassemble Laptop (Dell Latitude E4300) | 41,238 views
28 Jan - Apple iPad &quot;The Future&quot; If Revised | 19,387 views
31 Dec - How To Import Blog Post Into Facebook Automatically | 28,425 views
30 Dec - Sherlock Holmes 2009 Movie Review | 19,051 views
28 Dec - Dota Hero Guide – Pugna The Oblivion | 51,504 views
24 Dec - Avatar 2009 Movie Review | 24,340 views
21 Dec - A Prologue Of A DotA Gamer | 17,447 views

Share