Adding WebSlice in WordPress Site
A WebSlice uses a combination of the hAtom Microformat and the WebSlice format. By adding those three annotations, IE recognizes that it is a WebSlice and treats it like a feed; handling the discovery, subscription, and processing of the WebSlice. Actually it is easy to enable WebSlice in a site, we just need to add HTML annotations to the target webpage, for example:
<div class="hslice" id="kaskusitem555">
<p class="entry-title">Kaskus Hottest Thread</p>
<div class="entry-content">Kaskus Thread
…
</div>
</div>
In this post, let see how to add A WebSlice in common PHP applications : Wordpress. You can also do the same experiment with other CMS like Joomla, Mambo, Drupal, PHPNuke, PHPBB etc. I used IIS 7.0, PHP FastCGI and MySQL in Windows Server 2008 to run WordPress. To Setup FastCGI for PHP on IIS and WordPress in IIS is out of scope of this post.
Practically to add WebSlice on WordPress site, what we will do is pretty simple:
- Modify the target page where we want to display the WebSlice icon, could be index.php or other landing pages.
- Prepare a page to be displayed in the WebSlice or RSS feed. We can use css to manage the layout of the page.
Ok, lets create two files wp_webslice.css for WebSlice layout and for wp_webslice.php data feed at the root directory of WordPress installation. Then add the following codes to index.php :
<div id="wpupdate" class="hslice" style="padding:8px 0px 0px;display:block">
<div style="display:none;">
<p class="entry-title">Risman Adnan WebSlice</p>
<p class="entry-content"> </p>
<a href="wp_webslice.php" class="feedurl" rel="feedurl"> </a>
</div>
</div>
In the wp_webslice.css, write style to manage the layout of the WebSlice.
body {
margin:0;
padding:0;
font-family: Georgia, Times, Times New Roman, sans-serif;
font-size: 0.9em;
text-align:left;
color:#29303B;
background: #FEFFA3;
}
ul {
padding-left: 9px;
margin-left: 0;
}
li {
padding-left: 0px;
margin-left: 0px;
margin-bottom: 10px;
}
And in the wp_webslice.php, write PHP codes to query data from tablepost then display it in the WebSlice page. For example:
<?php
/* Don't remove this line. */
require('./wp-blog-header.php');
?>
<head>
<title>Risman Adnan Webslice</title>
<link rel="stylesheet" type="text/css" href="wp_webslice.css" media="screen" />
<link rel="shortcut icon" href="icon.ico" />
</head>
<body>
<div id="wpupdate" class="hslice">
<h2 class="entry-title">Risman Adnan Blogs Update</h2>
<div class="entry-content">
<ul>
<?php
function get_recent_posts ($num_posts = 5)
{
global $wpdb, $tableposts, $post, $tablepost2cat;
if (!isset($tablepost2cat)) $tablepost2cat = $wpdb->post2cat;
if (!isset($tableposts)) $tableposts = $wpdb->posts;
$orderby = "$tableposts.post_$orderby";
$now = current_time('mysql');
$sql = "SELECT DISTINCT * FROM $tableposts ";
$sql .= "WHERE $tableposts.post_date <= '$now' AND ( $tableposts.post_status = 'publish') ";
$sql .= "GROUP BY $tableposts.ID ORDER BY $tableposts.post_date DESC";
$sql .= " LIMIT 0, $num_posts";
$posts = array();
$posts = $wpdb->get_results($sql);
if (empty($posts)) return;
echo '<ul>';
foreach ($posts as $post) {
$title = the_title('', '', false);
echo '<li>';
echo '<a href="'.get_permalink().'" title="View Post '.htmlspecialchars(strip_tags($title)).'">'.$title.'</a>';
echo '</li>';
}
echo '</ul>';
} //end function get_recent_posts()
get_recent_posts();
?>
</ul>
</li>
</div></div>
</body>
</html>
And you are done! If everything works well, you will see the WebSlice icon when you open index.php.
What about Joomla, PHPBB, Mambo, etc? I will post more about it.
Hope this helps - RAM