SimplePie 1.5 is now available!

SimplePie Documentation.  Learn how to use this thing.  It's way better than going to school.

You are here: Documentation » Tips, Tricks, Tutorials, and Screencasts » NewsBlocks Demo 2.0

NewsBlocks Demo 2.0

Recently, websites like infonary, PopURLs, 1-TM, TheWebList, Miniboxs, and Original Signal 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.1.
  • Code in this tutorial should be compatible with PHP 5.0 or newer, and should not use PHP short tags, in order to support the largest number of PHP installations.

The Code

We're going to create a simplified clone of these kinds of sites that we're calling “NewsBlocks”. This demo leverages the entire front-end development stack (XHTML, CSS, JavaScript, PHP) and utilizes the MooTools JavaScript library. You'll need to make sure the enclosed cache directory is writable, and you should copy the latest version of 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 library.

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


This is not, and will not ever be a perfect replacement for the services that it imitates unless YOU do the work to get it there. This is a DEMO that gives you a head-start, but it's up to you to figure out and write the custom code for connecting to databases and enabling cron jobs and the like. Those things will likely never be included because they're complicated and we don't want to get stuck supporting them.

What are all these files?

In the end, the NewsBlocks Demo only loads newsblocks.css and newsblocks.js… that's it. These files have been compressed by YUI Compressor to make them as small and fast as possible. The other files that are in the /css/ and /scripts/ directories are generally editable versions of these files. There is also a file which is a shell script I use to copy the editable files, merge them, and compress them into a single, smaller file.

For best performance on the front-end, you should make sure that your edited files are compressed in the same way. If you're not comfortable with doing this, you can always edit the HTML to load the uncompressed versions of the files instead.

Troubleshooting, Bugs, and Feature Requests

  1. Missing styles, broken scripts, and 500 errors - If you're seeing these things, it's likely that your server doesn't like the gzip settings we're using. The simplest solution would be to remove the .htaccess files in the /css/ and /scripts/ directories. Also make sure that you're not using a web hosting provider that sucks. :)
  2. Bugs and Feature Requests - If there's something broken, or if you'd like to see a new feature, let us know about it by filing an issue over at our bug tracker.

Render Options

classname string The classname that the <div> surrounding the feed should have. Defaults to nb-list for newsblocks::listing() and nb-wide for newsblocks::wide().
copyright string The copyright string to use for a feed. Not part of the standard output, but it's available if you want to use it. Defaults to NULL with multifeeds; Use $item→get_feed()→get_copyright() instead.
date_format string The format to use when displaying dates on items. Uses values from strftime(), NOT date().
description string The description for the feed (not the item). Not part of the standard output, but it's available if you want to use it. Defaults to NULL with multifeeds; Use $item→get_feed()→get_description() instead.
direction string The direction of the text. Valid values are “ltr” and “rtl”. Defaults to “ltr”.
favicon string The favicon URL to use for the feed. Since favicon URLs aren't actually located in feeds, SimplePie guesses. Sometimes that guess is wrong. Give it the correct favicon with this option. Defaults to NULL with multifeeds; Use $item→get_feed()→get_favicon() instead.
id string The ID attribute that the <div> surrounding the feed should have. This value should be unique per feed. Defaults to a SHA1 hash value based on the URL(s).
item_classname string The classname for the items. Useful for styling with CSS. Also useful for JavaScript in creating custom tooltips for a feed. Defaults to “tips”.
items integer The number of items to show (the rest are hidden until “More” is clicked). Defaults to 10.
language string The language of the feed. Not part of the standard output, but it's available if you want to use it. Defaults to NULL with multifeeds; Use $item→get_feed()→get_language() instead.
length integer The maximum character length of the item description in the tooltip. Defaults to 200.
more string The text to use for the “More” link. Defaults to “More &raquo;”
more_move boolean Whether the “More” link should move when it's clicked. Defaults to FALSE (i.e. stays in the same place).
more_fx boolean Whether the secondary list should slide or simply appear/disappear when the “More” link is clicked. Defaults to TRUE (i.e. slides).
permalink string The permalink for the feed (not the item). Defaults to NULL with multifeeds; Use $item→get_feed()→get_permalink() instead.
show_title boolean Whether to show the title of the feed. Defaults to TRUE.
since integer A Unix timestamp. Anything posted more recently than this timestamp will get the “New” image applied to it. Defaults to 24 hours ago.
title string The title for the feed (not the item). Defaults to multiple titles with multifeeds, so you should manually set it in that case.

tutorial/how_to_replicate_popurls.txt · Last modified: 2011/03/06 03:56 (external edit)