If you’re like me, you have bits and pieces of your online life scattered absolutely everywhere — photos, comments, tweets, blogs, favorite links — stashed away in all kinds of profiles. And, of course, many of those profiles offer RSS feeds, ripe for the mashing. Wouldn’t it be nice to aggregate all those on one page? I think so!
In this tutorial we’ll build a page that gathers up the RSS feeds of all those little bits of your life and presents them all together in one spot. To do that, we’ll use SimplePie, a feed parsing class written in PHP. It’s powerful, it’s open source, and it’s easy to use. We’ll then hack on the output a little, and make it all look gorgeous with HTML and CSS. The techniques we’ll cover are also useful if you find that you need to aggregate RSS from many sources, like a news page. Let’s begin!
What You’ll Need
- The SimplePie library.
- A web server that’s capable of running it — there’s a compatibility test in the SimplePie package that will tell you whether your server is good to go.
- If you tweet, grab this function by Alison Gianotto to help auto-link those tweets
- Of course, you’ll need your trusty text editor!
- For brevity, some of the code is excluded from this tutorial. If you want to see the full picture, view the completed example or download it.
Let’s Begin
First, of course, we’ll need to identify the feeds we want to include on the page. Like I said, I have profiles in lots of places, but for now I’ll keep it short and sweet — I’ll grab my blog, Twitter, Flickr photos, and favorited tracks from Last.fm.
You’ll need to gather up the URLs for the feeds you want, and stash them someplace safe. To do that, look for RSS icons on the page or in your browser’s address bar. Paste those URLs in a text file for later reference.
Next, we’ll need to check that SimplePie is compatible with our hosting environment. There’s plenty of stuff in this download — for now, we can just upload the compatibility_test directory in a web-accessible location on the server, and take a look at it in a web browser. Hopefully, there’ll be a series of messages informing you that a number of dependencies are enabled. If so, it’s time to upload the rest of the library. (If you have a folder in your download called test, it’s safe to exclude that one.)
While you’re poking around in your web server, now’s a good time to set up a directory for SimplePie to use as a cache. You should make this directory writable. I’ve chosen cache.
Make a note of where you uploaded SimplePie, and your cache directory. In my case, both are in the same directory as where I plan to put my lifestream page.
Prepare Your Feeds
Let’s grab those feeds! Open up a new text editor and begin a new PHP file, which we’ll call lifestream.php. This will be the page that eventually shows our lifestream.
First, let’s include a very important component — the SimplePie library itself:
<?php
require_once('./simplepie/simplepie.inc');Now, we need to define a couple of important variables: the first is to define the cache location, and the second is to specify the amount of time (in seconds) we want to cache the feeds. Hitting feeds repeatedly is rude, and some feed providers will bar you for excessive feed requests. Also, if you have a busy site, it’s sensible to keep your resource consumption low. I’ve chosen thirty minutes, or 1800 seconds, which is a nice tradeoff between freshness and politeness. Here are those variables:
$cache = "./cache";
$duration = 1800;Next, time to create some SimplePie objects. The easiest way to turn a feed into a SimplePie object is to call it in its short form: pass it a feed URL, the location of your cache directory, and the cache duration. All my objects look roughly like this:
$object = new SimplePie(
"http://example.com/feed.xml",
$cache, $duration);You’ll see I’m passing those $cache and $duration variables in to save repeating myself. Create objects for each of your feeds — mine are called $blog, $twitter, $flickr, and $lastfm.
At this stage, since I’m going to be including tweets, I’m going to paste in Alison Gianotto’s twitterify function. This function simply accepts some text and looks for items that would be clickable in Twitter — references to usernames with @, tags with #, and regular URLs — and wraps them in nice hyperlinks. The function inserts hyperlinks with a target attribute; I’ve removed those from my example.
Create a Shell
It’s markup time! Create a HTML shell immediately below the closing ?> of your PHP script. In this example, I’ve just shown the contents of the body element for brevity, though of course I’d include a !DOCTYPE, head, and other necessities:
<h1>My awesome lifestream</h1>
<div id="blog">
<h2>My blog</h2>
<ul>
</ul>
</div>
<div id="twitter">
<h2>My tweets</h2>
<ul>
</ul>
</div>
<div id="flickr">
<h2>My pictures</h2>
<ul>
</ul>
</div>
<div id="lastfm">
<h2>My tunes</h2>
<ul>
</ul>
</div>Reveal the Items
Now that we have a shell of a document, it’s time to start adding some more PHP to this page to loop through each of the items and echo the relevant parts of each item — titles, descriptions, enclosures, links, and more — and wrap the appropriate markup around them. To find out what’s available, examine the source of your feeds, and take a look at the SimplePie documentation, specifically the stuff that begins with get_. You’ll find a list here.
Thinking of my own four feeds, each set of items should be slightly different. With my blog posts, I’ll want to include a title, description, date, and hyperlink. In the Twitter RSS feed, the title and description are identical, so I’ll just use the title. For the Flickr items, I just want to show the picture. The tracks on Last.fm just need a title, link, and date. So, I’ll need to create four separate loops.
Here’s the loop to spit out my blog items, which I’ve placed inside the unordered list inside div#blog. This one’s fairly straightforward:
<?php foreach ($blog->get_items()
as $item) : ?>
<li>
<h3>
<a href="<?php
echo $item->get_link(); ?>">
<?php echo $item->get_title(); ?>
</a>
</h3>
<p>
<?php echo $item->get_description(); ?>
</p>
<p class="date">
<a href="<?php
echo $item->get_link(); ?>">
<?php echo $item->get_date(); ?>
</a>
</p>
</li>
<?php endforeach; ?>This loop should generate a series of list-items like this, for each blog entry in my feed:
<li>
<h3>
<a href="http://example.com/blogentry/">
Title
</a>
</h3>
<p>Blog entry description text</p>
<p class="date">
<a href="http://example.com/blogentry/">
01 January 2010, 12:00 am
</a>
</p>
</li>Too easy!
When examining my Twitter feed, I’ve noticed that each tweet is prefixed with my name, a colon, and a space. In this instance, I’ll want to remove that text. I’d also like to convert those hashtags, username references and URLs into clickable hyperlinks. In this loop, when I echo the title of the feed item, I’ll wrap $item->get_title() in a str_replace statement, and then wrap that in the twitterify function:
<?php foreach ($twitter->get_items()
as $item) : ?>
<li>
<p>
<?php echo twitterify(
str_replace(
"raena: ", "", $item->get_title()
)
); ?>
</p>
<p class="date">
<a href="<?php
echo $item->get_link(); ?>">
<?php echo $item->get_date(); ?>
</a>
</p>
</li>
<?php endforeach; ?>Flickr feeds’ descriptions are less than ideal for my purposes: they include the text “username posted a photo”, the medium sized image surrounded by a link to the photo page, and the Flickr photo’s description. However, I’d just like to present the littlest version of the image and hyperlink, and use the title of the image as the alt text. Fortunately, Flickr provides the URL to the image in the form of an enclosure, so I’ll use that instead.
Flickr’s enclosures are still medium-sized, but I want the cute, square thumbnail. That’s as simple as replacing any reference to _m.jpg with _s.jpg.
<?php foreach ($flickr->get_items()
as $item) : ?>
<li class="item">
<a href="<?php echo $item->get_link(); ?>">
<?php foreach ($item->get_enclosures()
as $enclosure) : ?>
<img src="<?php echo str_replace(
"_m.jpg","_s.jpg",
$enclosure->get_link()
); ?>"
alt="<?php
echo $item->get_title(); ?>" />
<?php endforeach; ?>
</a>
</li>
<?php endforeach; ?>Finally, I only need the titles and dates from my list of loved tracks from Last.fm:
<?php foreach ($lastfm->get_items()
as $item) : ?>
<li class="item">
<p>
<a href="<?php
echo $item->get_link(); ?>">
<?php echo $item->get_title(); ?>
</a>
</p>
<p class="date">
<?php echo $item->get_date(); ?>
</p>
</li>
<?php endforeach; ?>You’ll find my completed example as lifestream.phps in the code download, or again, view it in full here. If you plan to use it as a basis for your own work, remember to change the placeholder feed URLs to your own!
When you’re done fine-tuning your items, it’s time to upload it to the web server, and view it in your browser. If all went well, you should see a series of unordered lists, each containing different goodies from those RSS feeds.
All that’s left now is to style the page and add any other interesting goodies you feel are necessary. In the example, you’ll find an extremely simple set of styles: feel free to use them as a basis for your own.
There’s More…
Of course, there’s plenty more to SimplePie than the very easy example we’ve looked at today. Dive into the wiki and see what’s possible — there’s heaps of support for enclosure display, the ability to merge multiple feeds into one giant stream, and easy ways to add social media sharing buttons to items. You’ll find some great examples of SimplePie-powered sites on the wiki. Enjoy!
Raena Jackson ArmitageRaena Jackson Armitage is an Australian web developer with a background in content management, public speaking, and training. When she is not thinking about the Web, she loves knitting, gaming, all-day breakfasts, and cycling.
