Advertisement

Building a Custom Lifestream Website with Sweetcron

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

Sweetcron is "The Automated Lifestream Blog Software". It is still in public beta, but is already a very nice blog software package. The beauty of Sweetcron is that new posts are created automatically from your activity elsewhere on the web. New photos on Flickr? Tweets on Twitter? Thumbs up on StumbleUpon? Blog posts on Tumblr? Add them all to your Sweetcron-powered site and they will appear on your site in minutes.

Step 1: Download Sweetcron & Preparation

Sweetcron is free and open source! There is a Google Group that hosts the downloads, wiki, discussion group and all that. You'll get links to all that by going to the main Sweetcron site and entering your email to download/join.

Before you begin, know that you'll need to be running this on a server which is running PHP (at least version 5, I had to upgrade versions for my demo site). You will also need a MySQL (4.1) database and all the connection info (database name, database username, database password, database hostname).

Download the latest-greatest copy of Sweetcron and then upload the entirety of it to the directory on your web server you wish the blog to reside. The root directory, if you wish it to be at the root of your site, or in a subdirectory like /blog or /lifestream.

Note: included in the download is an .htaccess file which is required for Sweetcron to run correctly. Some operating systems like to hide this file, so if you don't see in in the directory you uploaded to, you'll need to create a new one (see the code below).

Step 2: Install Sweetcron

The first thing to do is verify your .htaccess file is in place and has the following code in it:

	Options +FollowSymLinks
	RewriteEngine On

	RewriteBase /

	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule ^(.*)$ index.php?/$1 [L]

Next, open system/application/config and rename the file "config-sample.php" to "config.php". Replace the URL with your sites URL. Then rename "database-sample.php" to "database.php" and fill in those details.

Note:If you are installing in a subfolder, there two extra steps.

  1. In config.php make sure the base_url is the full url path to your Sweetcron install, i.e. including subfolder.
  2. Open the .htaccess file found at the base of Sweetcron and change RewriteBase / to RewriteBase /

Now navigate to your site in a web browser and you should be greeted with the final steps for installation (setting your admin account and such).

Step 3: Configuration

After you've installed and verified that everything went smoothly, probably the best place to start is to start adding some feeds. Click onto the feeds tab and then the "Add new Feed" button on the right.

Simply drop in a feed address in this box and click the "Add This Feed" button. If you have the "real" feed address (e.g. http://feeds.feedburner.com/nettuts) that is your best bet. However, you can just drop in a regular website URL and it will attempt to auto-detect the feed on that site (e.g. http://net.tutsplus.com/)

Now head over to the Options tab. Here you'll see the Title and Admin Email you've already set up, but there are some other important options here. Items per page is self-explanitory, Cron Type isn't so obvious. You have two options here: Psuedo-Cron and True Cron. What these options designate is how/when the software does a check of each of your feeds and looks for new items. Pseduo Cron is the default as it requires no server configuration. With Pseduo Cron, if it has been longer than 30 minutes, the next visitor to your site will trigger the job to go look for new feeds. Not a big deal, but that user will experience a longer than normal page load time. True Cron eliminates that problem by having the Server itself trigger that event. If you know what you are doing and can configure your own servers Cron Jobs, click that option and it will give you the URL to hit.

Right after you add your feeds and set your options, you may go back to your site only to find that there are no items! Don't worry, it's (probably) not broken. It's just that 30 minutes have not passed and the Cron job hasn't been triggered. If you want to "force it", go back to your options panel, click True Cron, copy the URL and visit it in a browser. This should pull in all your recent feed entries. Or (even easier), click over to the "Items" tab and press the "Fetch New Items Now" button.

Step 4: Administration

The real beauty of Sweetcron is the automation and lifestreaming capabilities, but it is also a regular blogging engine as well. Click the "Write" tab to write your own posts, including tagging!.

Another important note about Sweetcron is that it really is a blogging engine, not just a feed parser. What this means is that when it pulls in a new entry (say, a new Twitter Tweet) it makes an entry for that in the Database and that content now officially lives on your site. If you delete that Tweet on Twitter later on, or in any way change the content of the feed, that won't automatically change it on your site like it might if you were using a feed parser.

This leads to the last tab in the admin panel: "Items". This shows you each of the entries that you have either written and posted manually or that it has automatically grabbed from one of your feeds. This is very nice I think. You can easily edit, delete, or simple "unpublish" and particular entry on your site. This is the kind of simple control you want on a website

Step 5: Customization

At this point, your Sweetcron website looks something like this:

That is the default "Sandbox" theme. Not much to look at, but is very well built and a great place to start for designing your own theme! The theming structure for Sweetcron is fantastic and should be very familiar for anyone who has used WordPress.

Sweetcron comes with another theme, "Boxy", which Sweetcron's lead developer uses on his own personal site. Here is Yong Fook's site:

The "Boxy" theme shows off one of the really cool features of Sweetcron, and that is the ability to have each blog post be formatted differently according to its source. Notice how each of the different boxes (posts) on Jon's site looks different? The top left box is a photo from Flickr (with the title and info overlayed). The next box is a Twitter tweet (speech bubble with user icon). The top right is a "digg". You are not limited to any particular sources, you can create your own custom designs and apply them to your own custom sources!

Step 6: Designing a Custom Theme

As I mentioned, Sweetcron supports custom themes and works in a way very similar to WordPress. Themes exist as directories of the "themes" folder which lives at system/application/views/themes.

The easiest (and safest) way to get started is to simply duplicate one of the existing themes and modify from there. For my custom theme, I started with the Boxy theme, because it already had the custom-design per-source thing I wanted to use built in.

After you have duplicated and renamed one of the themes, that new theme will show up in the "Options" panel in the admin backend. Simply choose it and click the "Save Options" button.

Most of the files you'll see in your theme folder are fairly self-explanatory. The "_header.php" file is your DOCTYPE, head section, and beginning of your body. "._footer.php" closes things off (good place for your analytics and such) and "._sidebar.php" is (wait for it) your sidebar.

Perhaps the most important file of the theme is the "_activity_feed.php" file. This is the main content area of your theme and controls the boxes of each blog entry. Similar to the "WordPress loop" this file also contains a loop displaying as many posts as appropriate for that page

Here is the loop, simplified:

<ul id="activity_list">
    <?php if ($items): $i = 1; foreach ($items as $item): ?>

        <!-- begin conditional content -->
        <li class="item <?php echo $item->get_feed_class()?> <?php if ($i % 3 == 0): ?> last<?php endif; ?>">

        	<!-- domain-specific boxes -->

			<!-- SOURCE WAS: Twitter -->	
        	<?php if ($item->get_feed_domain() == 'twitter.com'): ?>
        	<p class="site_info" style="background: url(<?php echo $item->get_feed_icon()?>) 3px center no-repeat">&nbsp;</p>

        	<div class="item_inner">
        	<p class="twitter_user"><a href="<?php echo $this->config->item('base_url')?>items/site/<?php echo $item->get_feed_domain()?>"></a></p>
        	<p class="twitter_tweet"><?php echo $item->get_title()?></p>
        	</div>

			<!-- SOURCE WAS: StumbleUpon -->
        	<?php elseif ($item->get_feed_domain() == 'chriscoyier.stumbleupon.com'): ?>
        	<p class="site_info" style="background: url(http://www.stumbleupon.com/favicon.ico) 3px center no-repeat">&nbsp;</p>
        	<div class="item_inner">
        	<div class="inner_container">
        	<p class="digg_title"><a href="<?php echo $item->get_permalink()?>/<?php echo $item->get_name()?>"><?php echo $item->get_title()?></a></p>
        	<p><?php echo word_limiter(strip_tags($item->get_content()), 38)?></p>
        	</div>

			<!-- SOURCE WAS: Sweetcron (manual blog entry) -->
        	<?php elseif (!$item->feed_id): ?>
        	<div class="inner_container">
        	<p class="blog_title"><a href="<?php echo $item->get_permalink()?>/<?php echo $item->get_name()?>"><?php echo $item->get_title()?></a></p>
        	<p class="blog_cite">A blog post</p>
        	</div>

			<!-- SOURCE WAS: Generic Catch-All -->
        	<?php else: ?>
        	<div class="inner_container instructions">
        		<p>You don't have anything set up for this!</p>
        	</div>

        	<?php endif; ?>

        	<p class="date"><?php echo $item->get_human_date()?> | <a href="<?php echo $item->get_permalink()?>/<?php echo $item->get_name()?>">Comments &raquo;</a></p>

        </li>

    <?php $i  ; endforeach; endif; ?>
</ul>

To create new custom treatments for posts from different sources, just copy and paste one of the PHP elseif statements from above and customize it. On my site, I am including my Twitter feed, StumbleUpon feed, Flickr feed, and the feeds for CSS-Tricks and my personal blog. I created special elseif statements for each of these sources, in case I want to do special styling for any of them.

This came in quite handy. Sweetcron provides a built in function for snagging favicons of the source, which worked for everything except StumbleUpon who's subdomains (chriscoyier.stumbleupon.com) prevent that from working. So because I had complete control over how that type of post is displayed, I simply told it to look in the right place manually (see StumbleUpon code above).

Here is what my custom theme looks like:

It is extremely simple. It simply lists the first line of the content of any given post. In the case of Twitter, it's the tweet itself. In the case of StumbleUpon, it's the link. In the case of CSS-Tricks, it's the title of the post. Each post shows its source by the favicon in the margin of the page.

Step 7: Single Page & Static Pages

Each blog post of yours will have a permalink as well, A.K.A, a "single" page. If you want to add comments to your site, this is the place to do it (single.php). Commenting isn't a built-in feature of Sweetcron, but it is simple enough to add with powerful easy-to-use systems like Disqus. In my theme, I used the dead-simple JS-Kit to add comments to my single pages (literally two lines of code).

If you want non-templated "static" pages for your site (like a Contact page), that is easy to do as well. Simply create a page called something like "contact_chris.php" in your theme directory, and that page will be available at http://your-site.com/sweetcron/contact_chris and the page title will automatically be "Contact Chris". Keep in mind the header and footer files will be automatically applied here, so you are just creating the main content area.

Wrapping Up

Our lives on the web are more scattered about now than they ever have been, but thanks to generous API's, open formats like RSS, and awesome software like Sweetcron, the personal website is not dead!

Sweetcron is a relatively new software, but its ease of use, great user interface and extensibility are surely going to be help it take off. I could see it amassing a huge user base and even stealing a little market share away from blogging giants like WordPress.

Advertisement