Webslices in WordPress

Posted by beakersoft | Posted in Programming | Posted on 24-03-2008

18


Wordpress and Webslices header

One of the new features in the beta of Internet Explorer 8 is something called Webslices. These work in a similar way to RSS feeds, but allow you to subscribe to a section of a web page, as opposed to just a feed. The section of the page you subscribe to is a div with a class name of hsclice.

If a page contains webslice’s that can be subscribed to, a little purple icon shows in the IE tool bar, along with any rss feed options for the page. If you click on the webslice option a new link appears in the favorites bar, when you click on this you get the contents of the div. If the content of the div is updated, the item in the favorites bar shimmers and goes bold to inform you of the update.

Webslice

So, I have written a small php script that can be used on a WordPress blog to subscribe to the 7 last posts as a webslice. At the moment all I have is a script, but if people are interested I can turn it into a WordPress plugin. You can download all the parts as a .zip file at the end of the post, but here is what it contains

  • readme.txt – This file contains the bit of HTML code you need to insert in your index.php file (or where ever you want the webslice subscription option to show) and more detailed install information.
  • webslice.php – The actual file that contains a div with the last 7 posts
  • webslice.css – Style sheet for the php file

When you have downloaded the files, change the css to suite you, insert the div code into your page, upload to the server and away you go.

More Info on the script

When I first looked at adding a webslice to my WordPress blog, I thought i would just place the hslice div around the existing previous posts section in my side bar. I went away from that idea though as I wanted the ability to format it differently, maybe add a graphic to the bottom etc so i went with an external file.

To make the page flag as having a webslice, but re-direct it to another page for the actual div, I used the class=”feedurl” option in the div. This just tells IE to look in a different place for the actual content. You can tell it to look at a page or an rss feed. The div containing all this info is hidden so it doesn’t interfere with any of the existing front page content.

The script it’s self is very straight forward. It just looks in your WordPress DB for the last 7 (you can easily change this) posts , and puts them into n unordered list on the page, the formating is controlled by an external style sheet.

Please note this might not be 100% reliable. IE 8 is still in beta so its possible (but unlikely) the way it handles Webslices could change. I have also only tested this on one machine running the new IE, so it might not always work right. If you have problems get in contact and ill try and iron them out.

As I mentioned before if there is enough interest I might turn it into a plug-in

Edit: Since upgrading to the release version of Internet Explorer 8, any web slices I had suddenly stopped working. All I kept getting was ‘page cannot be displayed’ error in the space where the slice was. After much searching and head scratching I finally found the solution at http://support.microsoft.com/kb/969213

It turns out that Google Gears was stopping them from working, just disable the add on in IE and they start to work fine again

Download The Zip Archive

Download the script: wordpress_webslice.zip

Comments (18)

Nice work on the WordPress Webslice, looks cool. I’m with a company called Me.dium, we make a social-browsing add-on, and MSFT actually presented our WebSlice Discovery and Activity pieces at the IE8 launch. We’d love for you to check it out and give us your thoughts.

http://www.me.dium.com/ie8

Me.dium username: pjn

A plug-in would be GREAT!!!!!

So I tried the script and maybe I am doing something wrong but I cannot get it to work.

I am using a custom theme for my wordpress blog.

Here is the url: http://epo.sonoma.edu/EposChronicles/

I have changed the require(‘./wordpress/wp-blog-header.php’); in webslice.php to require(‘./EposChronicles/wp-blog-header.php’);

I added the code from the readme file to my theme index. It looks like the following:

Epo’s Chronicles

…..

 

Any suggestions?

Oops, the divs got deleted from my previous post.

Here in the index code:

Epo’s Chronicles

…..

 

Thank you for this tip. But, i don’t manage to display the webslice with one picture and a description.. I only have the seven first titles :( . Do you know how to resolve this problem ?

Geoffroy.

Geoffroy, i’m not really sure what you mean, can you provide me with a bit more detail please.

i’ve had a quick look on your site and the webslice.php file seems to have been removed.

Wow ! I’ve just corrected the problem. Now the webslice icon appears on the first page (on the few titles of the articles). But, now it does what it did before, i just have the title :(.
I have taken the files you provide, i have changed the name et the directory of the files but that’s all :(. Maybe, i made a mistake, or something miss to be perfect.

thank you.

CCF is given to you in the curve coding ..

I did something similar, which also works as a plugin. Check it out: http://dotnetblog.saschabaumann.com/2008/09/neues-wordpress-plugin-sb-webslides/

Hello,

nice script, it works fine!
Just a question: when i add my webslice to my IE and click on the button, the last 7 post of my wordpress blog are shown. But when i click an the “arrow”, in the footer of the box, IE goes to /webslices.php, not to the root of my blog – how can i change it?

Ps: sorry for my bad english :-(

Hi Fi,

I’ve just noticed what you mean, i’ve looked at the spec on the Microsoft site and i cant see anything about it. Ill do some more investigation and then alter the script.

For info, I have finally created a plugin for this, head over to http://www.beakersoft.co.uk/wordslice/ for more info.

Its my first wordpress plugin so please be gentle!

[…] while ago I wrote an artical (here)about the new Web slice feature in IE8. A few people have asked about a plugin for WordPress, and […]

Internet Explorer 8 is very good because it is as stable as Opera. I hate the previous versions of IE like IE6 because it hangs frequently. ‘

Hi-ya im new to this, I came upon this board I find It exceedingly accessible and its helped me a great deal. I hope to give something back & support others like it has helped me.

Cheers, Catch You Later,

IE8 seems to be very stable compared to earlier versions of internet explorer.~*

Internet Explorer 8 is the best stable browser that i always use ~

Thanks for the great read and post, I am just lovng your blog, Just added your post on delicious and facebook for future comeback.

Cheers

Write a comment

Comments links could be nofollow free.