Home » Softwares » How to Write an IE Web Slice for WordPress Blogs

ie web slice for wordpressWeb 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 don’t lose heart – here’s a really simple example that will show you how to create a custom web slice for any WordPress blog (self hosted).

1: <html><head>
2: <title>Page Title</title>
3: </head><body>
4: <div class="hslice" id="techologynews">
5:  <h2 class="entry-title">IE 8 web slice</h2>
6:   <div class="entry-content">
7:    <p><a href='#'>Link 1</a></p>
8:    <p><a href='#'>Link 2</a></p>
9:    <p><a href='#'>Link 3</a></p>
10: </div></div>
11: </body></html>

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’s displayed on the browser’s favorite bar) and then change the content inside the “entry-content” class (line 7-9).

If you have a WordPress (self-hosted) blog, here’s 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.

<html><head>
 <title>Page Title</title>
</head><body>
<div id="1">
 <h2>Your Site Name</h2>
 <div><ol>
<?php
  require_once('wp-load.php');
  $results = $wpdb->get_results("SELECT post_title, guid
          FROM $wpdb->posts where post_status = 'publish'
     ORDER BY ID DESC LIMIT 5");
  foreach($results as $row) {
   echo "<li><a href='".$row->guid . "'>"
     . $row->post_title ."</a></li> \n";
  }
?>
</ol></div></div>
</body></html>

The code is simple. It makes a connection to your WordPress database and create a list of most recently published blog articles that will be displayed in the web slice if someone subscribes to your site inside IE 8.

How to Install Web Slices in IE 8

Now that your web slice is ready, it’s time to publicize the slice on your site so that visitors using Windows Internet Explorer 8 can add the slice to their favorites bar.

For that, we’ll create a simple HTML button which upon clicking will automatically add the web slice to the IE browser.

<input type="button" value="Add [site name] Web Slice"
     onclick='window.external.AddToFavoritesBar("http://web-slice-url",
	"Your Website Name", "slice");' />

Click this button inside IE 8 for a live preview.

Array ( [0] => Softwares, Web Design, Wordpress )