davidrothman.net

Fair warning: It’s a long post with lots of detail for those still new to HTML.

For our example, we’re going to make a feed from http://www.explodingdog.com/, a great site with brilliantly demented drawings by Sam Brown.  Since the site doesn’t provide a feed and we want to know right away when new drawings are posted, we’ll create an RSS feed.

(Note for nit-pickers: I know there are existing feeds for Exploding Dog that others have created, it's just an example.  Be at peace.) 

If we take a look at the page with any web browser, we can see the list of drawings begins after the heading “new pictures:”

We’ll just make a mental note of that as we open up the page source (In Firefox, click: View>Page Source.  In Internet Explorer, click: View>Source.)

Now we’re going to look through the page source and make a few notes. 

Where on the page does the desired information START?

We are going to need to tell Feed43 on what part of the page to look for new RSS items.  Since we know the list of drawings starts after “new pictures”, we’ll use Ctrl+F to find this in the HTML source:

Perfect!  This string of characters appears immediately before the list of drawings starts.  We can even use Ctrl+F to make sure this string of characters really is unique on the page and doesn’t occur again.  Since it doesn’t, we can use this to tell Feed43 where on the page to start looking for items: Right after “new pictures:”

Where on the page does the desired information END?

Next, we need to figure out what comes right AFTER the information we want so we can tell Feed43 where to stop looking for information.

If we scroll down to the bottom of the page in the browser, we see that “do you know why” (from 1/9/2006) is the last drawing on the list, and that it is followed by “older pictures”.

Let’s find this phrase in the source (again using Ctrl+F):

We’ll of course search the rest of the source to see if this string is unique- and it is!

So we now know the following:

Right before the chunk of the page we’ll want to make into a feed is this string: new pictures:

Right after the chunk of the page we’ll want to make into a feed is this string: older pictures

That’s enough to start entering this into Feed43.

How do we enter what we know into Feed43?

Go to http://feed43.com/ and click on » Create your own feed.  You don’t have to register!

In step 1, you start by plugging the site’s URL into the Address field, and click the “Reload” button.  Feed43 will load the page’s HTML for you to review.

Step 2 is where you tell Feed43 the things we know so far. 

First, we tell it the Global Search Pattern (a needlessly complex term for “where on the page to look for items”) by giving typing in the string BEFORE the desired information (new pictures), the string AFTER the desired information (older pictures), and a short string in between them that represents the items: {%}

What we type is this: new pictures{%}older pictures

Next, we need to tell Feed43 how to form each post- that’s what the Item (repeatable) Search Pattern field is for.  If we look at the source of the page, we can see how each date’s section of cartoons is set up.  The date is between markup tags “<p><b>” and “</b>” (underlined below in red), and the links are between “<br>” and ”</p>” (underlined below in green).

So we again express this to Feed43 by placing {%} between each set to represent the information we want.  The first line tells Feed43 where to find the date, the second line tells it where to find the links.

If we now lick the Extract button, the Clipped Data window below will show how Feed43 is interpreting these instructions we’ve given it:

We can see (above) that Feed43 is correctly separating and numbering items, and has labeled the date {%1}, and has labeled the links {%2}.

In Step 3, we define the output format, starting with the RSS feed properties, which is pretty straightforward:

Lastly, we need to tell Feed43 what each item’s title should be, and what the content should be.  Remember in the previous step when Feed43 assigned labels, {%1} for the date, and {%2} for the links.  Just plug {%1} into the Item Title Template field, and plug {%2} into the Item Content Template.

If we now click the Preview button, the Feed Preview field will show us what the feed we’ve created will look like:

Step 4 is the best part: Get your RSS feed.

Want to subscribe to the feed?  Go for it.

 Here's what it looks like in BlogLines:

Like this post? Subscribe to the RSS feed!

July 13th, 2006 | Category: How to, RSS/Feeds, Technology | Subscribe to comments | Both comments and pings are currently closed