Enable Web Slices
Last Revised On: 27/04/2009The following section describes how to create and enable web slices in a couple different platforms. The examples here are only briefly explained, however, the solution package contains complete instructions on how to integrate the provided code into your site.
Wordpress
To enable web slices in Wordpress, you will use the same HTML markup as described in part one of this tutorial.
This example expands on the web slices created in part one to demonstrate how you can create a web slice to display the first ten items of an RSS feed. As mentioned previously, the built in RSS feed reader used by IE8 only reads the first item of a feed. Therefore, to get x amount of items from the feed, we can use PHP to parse the feedurl and create a content string. Then we can use the same code to create a web slice as discussed in part one.
The PHP function to parse the RSS feed is as follows:
function RenderRssToWebSlice($sliceName, $sliceTitle, $RssFeedUrl, $numItemsToDisplay)
{
$doc = new DOMDocument();
$doc->load($RssFeedUrl);
$content = '<ul>';
$i = 0;
foreach ($doc->getElementsByTagName('item') as $node) {
if($i < $numItemsToDisplay){
$content = $content . '<li><a href="' .
$node->getElementsByTagName('link')->item(0)->nodeValue . '">' .
$node->getElementsByTagName('title')->item(0)->nodeValue . ' - ' .
$node->getElementsByTagName('description')->item(0)->nodeValue . '</a></li>';
}
$i += 1;
}
$content = $content . '</ul>';
createWebSlice($sliceName, $sliceTitle, $content);
}
The code for the helper function to create the web slice is as follows:
function createWebSlice($sliceName, $sliceTitle, $content)
{
echo "<div class=\"hslice\" id=\"";
echo $sliceName;
echo "\">";
echo "<h3 class=\"entry-title\">";
echo $sliceTitle;
echo "</h3>";
echo "<div class=\"entry-content\">";
echo $content;
echo "</div></div>";
}
Add the following code to call the function and create the web slice:
RenderRssToWebSlice('blogFeeds', 'Top Blog Feeds', 'http://botd.wordpress.com/topsites.xml', 10);
To use this code in your Wordpress site, download the solution package and copy the files in the Wordpress directory to your site. Follow the instructions in the included Readme.txt file.
MediaWiki
Adding web slices to a MediaWiki page is fairly straightforward thanks to the framewrok which easily accepts extensions. There is a fair amount of documentation around creating a custom extension. The following code creates an extension which will allow you to create web slices on your MediaWiki pages:
function efWebSliceRender( $input, $args, $parser ) {
$content = $parser->recursiveTagParse( $input );
$error_message = "no error";
// Look for required parameters
if( !(isset($args["id"]) || isset($args["title"]))) {
$error_message = "Missing parameter (id or title).";
}
$id = htmlspecialchars($args["id"]);
$title = htmlspecialchars($args["title"]);
if($error_message != "no error"){
$output = "Error in WebSlice Extension: " . $error_message;
}
elseif(isset($args["feedurl"])){
// feedurl specified, create web slice with RSS source
$feedUrl = htmlspecialchars($args["feedurl"]);
$output = createWebSliceFromRss($id, $title, $content, $feedUrl);
}
else {
// create web slice with content
$output = createWebSlice($id, $title, $content);
}
return $output;
}
The following screenshot shows the extension and how it is used to create a web slice.
Web Slice Extension in Edit Mode
Preview of the Web Slice
Specify an RSS Feed URL as the content source
This code is included in the solution package for this tutorial in the MediaWiki directory. Follow the Readme.txt instructions to install the extension to your MediaWiki site.
Creating web slices in the Facebook platform requires a custom application which must be hosted on a publicly available web site. There are several steps required, including downloading the Facebook library, creating a custom application on the Facebook site and copying the code included in the solution package to your web site.
The application creates a web slice which publishes updates from your Facebook friends' status. The following screenshot shows the output.
Preview of the Facebook Web Slice
Have a Facebook account? View the Facebook web slice.
The solution package contains the necessary code to set up the custom application on your web server. It does not explicity cover how to create a custom Facebook application, but you can refer to the Facebook developer instructions and tutorials here.
Download Solution Package From CodePlex Now