How to replicate PopURLs, TheWebList, Miniboxs, and other similar sites

Recently, websites like PopURLs, TheWebList, and Miniboxs have become all the rage. Generally, these sites consist of multiple feeds – each it it's own block on the page. These sites typically consist of a relatively wide range of topics from news to media to technology to whatever else.

This tutorial assumes that you're already familiar with using SimplePie, including looping through items.

• Supported in SimplePie 1.0.
• Code in this tutorial should be compatible with PHP 4.3 or newer, and should not use PHP short tags, in order to support the largest number of PHP installations.

We're going to create a simplified clone of these kinds of sites that we're calling “NewsBlocks”. We're going to utilize a combination of PHP, XHTML, and CSS. Ideally, we would separate the PHP newsblocks class and the CSS into separate documents.

<?php
require_once('simplepie.inc');
 
class newsblocks
{
	function render($url = false, $items = 10, $direction = 'ltr')
	{
		// If there's nothing, do nothing.
		if (!$url) return false;
 
		// Create a new SimplePie instance with this feed
		$feed = new SimplePie($url);
 
		// Open a <div> with a class of "block" (which we'll use for styling) and an id of some random value (for targetting via JavaScript)
		$html = '<div class="block" id="' . sha1($url) . '">' . "\n";
 
		// Here's the name of the feed, formatted the way we want.
		$html .= '<h2><a href="' . $feed->get_permalink() . '">' . newsblocks::name($feed->get_permalink()) . '</a></h2>';
 
		// Let's begin the primary list (the part we want to show when the page loads).
		$html .= '<ul style="direction:' . $direction . ';">' . "\n";
 
		// Loop through the first 10 items.
		foreach ($feed->get_items(0, $items) as $item)
		{
			// Add each item: item title, linked back to the original posting, with a tooltip containing the description.
			$html .= '<li><a href="' . $item->get_permalink() . '" title="' . newsblocks::cleanup($item->get_description()) . '">' . $item->get_title() . '</a></li>' . "\n";
		}
 
		// Close out of the primary list
		$html .= '</ul>' . "\n";
 
		// Close out of this <div> block.
		$html .= '</div>' . "\n";
 
		// Return all of the HTML, so that we can display it as we choose or manipulate it further.
		return $html;
	}
 
	function render_wide($url = false, $items = 10)
	{
		// If there's nothing, do nothing.
		if (!$url) return false;
 
		// Create a new SimplePie instance with this feed
		$feed = new SimplePie();
		$feed->set_feed_url($url);
		$feed->set_favicon_handler('./php/handler_image.php');
		$feed->init();
 
		// Open a <div> with a class of "block" (which we'll use for styling) and an id of some random value (for targetting via JavaScript)
		$html = '<div class="wideblock" id="' . sha1($url) . '">' . "\n";
 
		// Let's begin the primary list (the part we want to show when the page loads).
		$html .= '<ul>' . "\n";
 
		// Loop through the first 10 items.
		foreach ($feed->get_items(0, $items) as $item)
		{
			// Check to see if we have an enclosure so we can add a special icon
			if ($enclosure = $item->get_enclosure())
			{
				// Check to see if we have a thumbnail.  We need it because this is going to display an image.
				if ($thumb = $enclosure->get_thumbnail())
				{
					// Add each item: item title, linked back to the original posting, with a tooltip containing the description.
					$html .= '<li><a href="' . $item->get_permalink() . '" title="' . $item->get_title() . '"><img src="' . $thumb . '" alt="' . $item->get_title() . '" border="0" /></a></li>' . "\n";
				}
			}
		}
 
		// Close out of the primary list
		$html .= '</ul>' . "\n";
 
		// Close out of this <div> block.
		$html .= '</div>' . "\n";
 
		// Return all of the HTML, so that we can display it as we choose or manipulate it further.
		return $html;
	}
 
	function cleanup($s = false)
	{
		// If there's nothing, do nothing.
		if (!$s) return false;
 
		// Strip out HTML tags.
		$s = strip_tags($s);
 
		// Get rid of double quotes so they don't interfere with the title tag.
		$s = str_replace('"', '', $s);
 
		// Strip out superfluous whitespace and line breaks.
		$s = preg_replace('/(\s+)/', ' ', $s);
 
		// Return the value.
		return $s;
	}
 
	function name($s = false)
	{
		// If there's nothing, do nothing.
		if (!$s) return false;
 
		// Look at the feed homepage URLs and get rid of http://www. and anything after a slash.
		preg_match('/http(s)?:\/\/(www.)?([^\/]*)/i', $s, $d);
 
		// Return the value we want (i.e. just the domain name).
		return $d[3];
	}
}
 
header('Content-type:text/html; charset=utf-8');
 
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">	
<head>
	<title>"NewsBlocks" Demo</title>
 
	<style type="text/css">
	body {
		font:14px/1.5em "Lucida Grande", Tahoma, sans-serif;
		color:#333;
		margin:0;
		padding:0;
	}
 
	div#site {
		width:1080px;
		margin:50px auto 0 auto;
	}
 
	a {
		color:#369;
		text-decoration:underline;
		padding:0 1px;
	}
 
	a:hover {
		color:#fff !important;
		background-color:#333;
		text-decoration:none;
		padding:0 1px;
	}
 
	h1 {
		margin:20px 0;
		padding:0;
		font-size:2.5em;
		letter-spacing:-1px;
		text-align:center;
	}
 
	h2 {
		margin:20px 0 0 0;
		padding:0;
		font-size:1.5em;
		letter-spacing:-1px;
	}
 
	h2 a {
		color:#000;
	}
 
	div.chunk {
		margin:0;
		padding:10px 0 0 0;
		border-bottom:1px solid #ccc;
	}
 
	.clearLeft {clear:left;}
 
	div.block {
		width:330px;
		float:left;
		margin:0 15px 50px 15px;
	}
 
	ul, ol {
		margin:0;
		padding:0;
		list-style:none;
	}
 
	ul li, ol li {
		margin:0;
		padding:7px 0;
		border-bottom:1px solid #eee;
		font-size:0.9em;
		line-height:1.2em;
	}
 
	div.wideblock {
		clear:left;
	}
 
	div.wideblock li {
		float:left;
		border:none;
	}
 
	div.wideblock li a {
		display:block;
		padding:3px;
		margin:10px 0 0 15px;
		background-color:#369;
	}
 
	div.wideblock li a:hover {
		background-color:#69c;
	}
	</style>
</head>
<body>
	<div id="site">
		<div class="topchunk">
			<h1>NewsBlocks Demo</h1>
		</div>
 
		<div class="chunk">
			<?php echo newsblocks::render('http://digg.com/rss/index.xml'); ?>
			<?php echo newsblocks::render('http://feeds.uneasysilence.com/uneasysilence/blog'); ?>
			<?php echo newsblocks::render('http://wdirect.apple.com/home/2007/ticker.rss'); ?>
		</div>
 
		<div class="chunk clearLeft">
			<?php echo newsblocks::render_wide('http://api.flickr.com/services/feeds/photos_public.gne?id=33495701@N00&lang=en-us&format=rss_200', 11); ?>
		</div>
 
		<div class="chunk clearLeft">
			<?php echo newsblocks::render('http://youtube.com/rss/global/top_rated.rss'); ?>
			<?php echo newsblocks::render('http://feeds.feedburner.com/libsyn/ZDrV'); ?>
			<?php echo newsblocks::render('http://api.flickr.com/services/feeds/photos_public.gne?id=33495701@N00&lang=en-us&format=rss_200'); ?>
		</div>
 
		<div class="chunk clearLeft">
			<?php echo newsblocks::render_wide('http://youtube.com/rss/global/top_rated.rss', 7); ?>
		</div>
 
		<div class="chunk clearLeft">
			<?php echo newsblocks::render('http://blog.japan.cnet.com/lessig/index.rdf'); ?>
			<?php echo newsblocks::render('http://newsrss.bbc.co.uk/rss/russian/news/rss.xml'); ?>
			<?php echo newsblocks::render('http://hagada.org.il/hagada/html/backend.php', 10, 'rtl'); ?>
		</div>
 
		<div class="clearLeft"></div>
	</div>
</body>
</html>

For those who are more skilled at the front-end development stack (XHTML, CSS, JavaScript, PHP), we've put together a more advanced version of “NewsBlocks” that utilizes the Prototype, Scriptaculous and Behaviour JavaScript libraries. You'll need to make sure the enclosed cache directory is writable, and you should copy the latest version of simplepie.inc into the enclosed php directory.

We've created this demo properly by separating types of code from each other, and we've included an .htaccess file along with a small PHP document that will gzip-compress the JavaScript libraries before serving them to the browser. This demo includes the latest versions of the aforementioned libraries, including a version of Behaviour which was modified to utilize the built-in Prototype functionality instead if duplicating it.

Besides being relatively simple, the organization, code, and methods used in the demo below should be production-ready.

• newsblocks_demo.zip