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.

Compatibility

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 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 library.

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

Expectations

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 build_prep.sh 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

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. :)
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

OPTION	DATATYPE	DESCRIPTION
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 »”
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)