A couple of days ago, buzz started to build around Alltop which was built by Guy Kawasaki’s Nononina, also behind the site Truemors. Alltop is a very pretty site with a wide variety of content, but it too is based on the same content (and looking at the page sources, potentially the same code base).

If you want to build your own, I offer you my findings, code and lessons learned

Technorati Tags: php, popurls, alltop

The source code:

As this is a quick and dirty implementation, I apologize if the code base contains some minor bad practices. In most cases, I’ve adhered to standards that should allow you to unzip and deploy, but if something doesn’t quite work, take a look at the code. It was intended to be deployed on the URL news.delic.com so take a look for any part of that string if paths don’t work.

Please leave all of the GPL, BSD, CC and other licenses in the code intact, if you publish this. Any changes I have made to the code are extensions of these licenses. You are free to reuse any code I have written, but if there’s a license embedded in there, you should leave it there.

News aggregation source code (zip format, 490Kb)

System components (aka. “the credits”) and requirements

If you are interested in rolling your own version of the aggregator, I have listed the components below, along with links to some of the relevant installation instructions and documentation

PHP:

PHP core components – minimum
• PHP 4.3 or higher (including PHP 5)
• PHP‘s XML extension (enabled by default)
• PHP‘s PCRE extension (enabled by default)
• Either PHPmultibyte string extension OR iconv extension. There is a bug in the current version of SimplePie one or the other.

PHP core components – recommended
• Ability to change file/folder permissions (dependent on how much access your host provides)
• Both PHP‘s multibyte string extension AND iconv extension.
• PHP‘s cURL extension (disabled by default)
• PHP‘s Zlib extension (disabled by default)

If you are hosted on Dreamhost and running PHP 5+, you will have all of the minimum and recommended components listed above available to you via the php5 default install.

SimplePie
• The PHP installfor SimplePie. Installation instructions (if you are rolling your own from scratch) begin here
• The SimplePie Newsblocks Demo Source. The documentation for the demo is also available

Javascript

• The SimplePie Newsblocks Demo contains Prototype, Script.aculo.us, and Behaviour.js, along with SweetTitles. I have replaced SweetTitles with the jQuery based ClueTip (see below) due to some text flicker issues on Firefox.
• Cluetip, which is ajQuery based tooltip replacement. The Cluetip download has all of the jQuery libraries needed (jquery 1.2.2 minimized, dimensions, hoverIntent and cluetip). Since both prototype and jQuery are being used, you will need to run jQuery in noConflict mode.

CSS/Theme

• The theme used for the aggregator is based on the black style of the Simplr theme for WordPress, although the aggregator is not actually running WordPress. The CSS for the theme has been modified to work with the SimplePie scripts, and can be found here.

Tips and tricks

Some lessons learned in using the SimplePie library:
1. Setting up feeds in index.php is extremely easy. For most feeds, the following code will work flawlessly:
   

   <?php echo newsblocks::render (‘http://digg.com/rss/index.xml’); ?>

   The SimplePie Documentation has all of the options one might need to increase the number of articles pulled from the feed, the cache periods, etc.

2. If you need to modify the output of the SimplePie parser (for example, to just pull the image out a feed), you need to work in the /php/includes/newsblocks.inc file. Included in the newsblocks demo file is a function called render_wide which will return any images in the thumbnail enclosure. If that does not work, you may need to familiarize yourself with the PHP function preg_match_all and PCRE.

To get Cluetip to work, there are two necessary steps:

3. run jQuery in noConflict mode. In the code below, the class “ctip” has been assigned to all links that have associated tips we want to show in Cluetip:

   <script type=”text/javascript”>
   jQuery.noConflict();
   
   // Put all your code in your document ready area
   jQuery(document).ready(function($){
   // Do jQuery stuff using $
   
   $(“a.ctip”).cluetip({
   
   splitTitle: ‘|’, // use the invoking element’s title attribute to populate the clueTip…
   // …and split the contents into separate divs where there is a “|”
   showTitle: false // hide the clueTip’s heading
   });
   });
   </script>

4. Modify newsblocks.inc so that the html output for each link for each item in the rss feed contains the “ctip” class as well as the “|” delimiters for the title and body of the tooltip. Look for the code:

   $html .= ‘<li class=”‘ . $class . ‘”><a href=”‘ . $item->get_permalink() . ‘” title=”‘ . newsblocks::cleanup ($item->get_description(), $length) . ‘”>’ . $item->get_title() . ‘</a> </li>’ . “\n”;

   and change it to:

   $html .= ‘<li class=”‘ . $class . ‘”><a class=”ctip” href=”‘ . $item->get_permalink() . ‘” title=”|’ . newsblocks::cleanup ($item->get_description(), $length) . ‘”>’ . $item->get_title() . ‘</a> </li>’ . “\n”;

* = Alltop and PopURLs are registered trademarks and/or servicemarks of Nononina and Thomas Marban respectively. This site is not affiliated with them in any way.