# Extending SimplePie to Parse Unique RSS Feeds

A few days ago, as I prepared our Create a Slick Flickr Gallery with SimplePie tutorial, it occurred to me that we haven't posted many articles that covered SimplePie. Considering how fantastic a library it is, I think it's time to take a closer look.

We'll be looking at a more advanced feature that allows you to extend the built-in item class to allow for the parsing of complicated RSS feeds.

### Our Mission

If your only desire is to import the feeds of a few blogs to display on your website, you shouldn't have any trouble at all. In fact, the SimplePie.org website has a great intro screencast that will teach you exactly how to do as much. If you're unfamiliar, I highly recommend that you view it. However, from time to time, you'll come across some unique tag names. For example, while working on my personal site reboot, I determined that I'd like to display my nettuts+ videos from Blip.tv's RSS feed. Upon reviewing the feed itself, I came across tags, like: <blip:smallThumbnail>.

Now SimplePie does a tremendous job of simplifying the most common procedures. But obviously, they can't be expected to provide convenient short-cut methods for every namespace, now can they!? Of course not. I decided that this would make for an excellent screencast. So, I've created a simple example that will pull in all of the nettuts+ screencasts, and allow the for a "pop-up" video when the user chooses one.

It's a simple enough layout; but should be just perfect for demonstration purposes. Without further ado, let's begin.

### Step 1: Index.php

The first step is to download SimplePie and place the "simplepie.inc" file in your "includes" folder. Next, create index.php'. Within it, paste the following basic code.

The only things worth noting are that we've created a wrapping "container" div, and are using Google's CDN to import jQuery. Don't worry if you're not familiar with this library; it's just a way to add a bit of frosting at the end. It's hardly essential.

### Step 2: New SimplePie();

I'll be assuming that you have a basic understanding of SimplePie. If you don't, watch their introductory video first, and then return. Fortunately, there's nothing too difficult here.

The first step when working with SimplePie is to create a new instance of the SimplePie class. Next, we naturally need to tell it the url of our feed (set_feed_url).

As I mentioned earlier, we'll be working with Blip.tv today. If you have your own account, click on one of your videos to visit the show page. Next, scroll down to the bottom. You'll see an RSS link within the footer. Copy that url and paste it in as a parameter.

Next, we need to set an item_class. We'll modify this section a bit later. The next three methods set up caching, the duration (in seconds), and the location of our "cache" folder. We better create that right now. Make sure that your folder structure looks similar to this.

#### $feed->init(); Finally, we need to initialize everything. If you don't understand this, don't worry about it too much. Just accept that it's what "gets the feed rolling". "Init() is what makes everything happen. Period. This is where all of the configuration options get processed, feeds are fetched, cached, and parsed, and all of that other good stuff. This is called automatically if you pass a URL to the SimplePie constructor." - SimplePie Documentation ### Step 3: Grabbing the Title and Description Let's write a bit of code that will extract the title and description from our feed. Within the container div, append the following two lines. Notice those easy to understand methods?! SimplePie makes these procedures a cinch. We created the$feed object at the top of our page. Remember, it's essentially a copy of the item class. To access the methods, we need to use an OOP approach. For a full list, be sure to visit SimplePie's API reference.

For the title, we're using "$feed->get_title()", and for the description, we'll conveniently use "$feed->get_description".

### Step 4: The Loop

The next step is to loop through all of the items in the RSS feed.

#### What to Return?

It's a bit difficult to describe the array that we'll be returned. I recommend that you review the screencast to gain a better understanding. For the sake of simplicity, just accept that, in order to access the exact value, we must find [0]['data'] within our \$data array.

That's actually all that is required. We can now begin using "get_thumbnail_src()" in the same way that we would "get_title()". Let's return to index.php and add this new method.

Find the image tag within the .entry div.

#### get_thumbnail_src()

When we call our "get_thumbnail_src()" method, it will return the filename, i.e. "NETTUTS-WordPressForDesigners8774-306.jpg". This is just the name of the image; we still need the full path. Luckily, this is easy. All Blip images will be stored here: "http://a.images.blip.tv/{filename}".

Within the source attribute of our image, add:

See how easy it was to use our custom method? Now, let's return to our extended class file and create the other two methods. I won't go over these, because they follow the exact same path.

It's important to remember that the "puredescription", and "embedLookup" tags are case sensitive. It's easiest if you just copy the text directly from the source of the RSS feed.

See if you can place these methods in their proper places on your own. As a refresher, the returned values of our methods should look like:

• get_thumbnail_src() : NETTUTS-WordPressForDesigners8774-306.jpg
• get_pure_description() : "This is a video that will teach bla bla..."
• get_embed_id : grg378cLj7EM

After inserting these methods, you should end up with something that looks like the following:

Hopefully, all of this makes sense. If not, review the screencast. At this point, your page should resemble this:

### Step 5: CSS

Not too pretty, eh? Let's add an ounce of CSS. These styles don't relate to the tutorial in any way. Considering this, I won't detail each property. You're free to review the CSS file here. It's very minimalistic.

### Step 6: jQuery

Just to have a bit of fun, I decided that, when the user clicks on one of the images, a pop-up video player should appear. Let's use jQuery to allow for this functionality.

#### Analysis

When the anchor tag within our .entry div is clicked, run a function.

Create a variable called "url" and make it equal to the href of the anchor tag that was clicked. Remember, this href links contains the embed link. Next, create the embed tag. Truthfully, we could do something a bit more efficient here. This is the code that blip.tv provides, so it will suffice for now. You might want to look into something that's a bit more "validator" friendly in the future.

• Create a new div element.
• Insert the embed tag that we just created (represented by the "embedString" variable.).
• Add a paragraph tag containing the letter X. This will allow the user to exit out of the video.
• Set the positioning of our video. This code just makes sure that it's centered within the container div.
• Append our new div element to the body tag. It won't show up at the bottom of the page because we've used CSS to position it absolutely. Review the CSS file for more info.
• Find that P tag - which contains the letter "X". When that element is clicked, find the #video element and remove it from the page. This is the code that gets rid of the video.

### Complete

Run the page in your browser, click on an image, and you'll find that the video pops up perfectly. If the user has Javascript disabled, he or she will simply be directed to a new page that contains the embedded video.

I hope this helped you to gain a better understanding of SimplePie's capabilities. Have a great weekend...but not before Digging this tutorial. :)

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.