|
 Creating
RSS feeds with Dreamweaver
by Ronald Northrip
CAUTION: This is a long tutorial. I hope you find it useful.
Please feel download this tutorial for educational purposes.
If you would like to republish this content please contact us at media at rnsoft.com.
Download this tutorial.
Publishing content online is evolving with a new technology called RSS.
From Andy Carvin at Digital Divide:
(http://www.digitaldivide.net/articles/view.php?ArticleID=68)
You may have noticed recently that lots of websites now contain little graphical
buttons with the word XML on them. For example: 
or  or  .
When you click on the button, all you see is a bunch of jumbled text and computer
code [ed: unless you have a newer web browser or an aggregator]. What's this
all about? It's an RSS feed, and they're changing the way people access the
Internet.
RSS, or Really Simple Syndication, is a technical format that allows online
publishers to share and distribute their content to other websites or individual
Internet users. It's commonly used for distributing headlines on news websites.
Bloggers use it to distribute summaries of their blog entries as well. RSS
is written in the Internet coding language known as XML, which is why you
see RSS buttons labeled that way.
If a website publishes an RSS page, commonly known as an RSS "feed,"
this feed will contain summaries of all the recent articles posted on that
site. For example, Yahoo News publishes news related to world headlines, national
news, sports, etc. These you can all read by going to the Yahoo website. But
they also publish RSS feeds for each of these subjects. Each RSS feed contains
a summary of the most recent news stories posted. Similarly, the Digital Divide
Network publishes RSS feeds for our news headlines, events listings and other
content on our website. I even have my own RSS feed for articles that I publish
on my personal blog, Andy Carvin's Waste of Bandwidth.
So basically, as a consumer of content, RSS allows you to see updated content
in news aggregators or web browsers (new ones have integrated this feature).
It solves the what's new problem for websites by allowing content consumers
to subscribe to content that they find relevant. That means its a great way
to communicate with a market that has already defined itself as interested in
your content by having taken the first step of subscribing to the feed. It also
solves the SPAM problem, because your market has already agreed to be targeted.
Its permission marketing done right, and with no SPAM filter headaches.
RSS also solves another problem by allowing content to be syndicated (or republished)
on other websites. This is how tools like Yahoo or Google News work. They collect
RSS feeds from across the internet and then publish the relevant ones on their
site. Imagine the traffic you would generate by getting a story published on
one of those news portals. This opens up an entire new way to drive traffic
to your site.
RSS is probably the most powerful marketing tool emerging in internet publishing
today.
Publishing RSS Feeds
There are several tools for publishing RSS feeds widely available on the internet,
with a range of prices from free on up. The problem with most of the tools is
that they require a good bit of work to get your content into the feed you are
creating. With some, you have to copy and paste your content into their tool,
which is simple for small amounts of content but not for larger websites. With
other, you have to have PHP, ASP, or Perl on your webserver and use those tools
to rework your content into a feed. In all cases, none of them are designed
to integrate directly with the primary tool you use to create the content of
your website — Dreamweaver.
The right solution would take advantage of the content you've already created
and the way that you manage that content using Dreamweaver. It would give you
a way to leverage what you know to accomplish the task of creating a feed, without
having to learn new tags for RSS and without having to become a CGI expert to
program PHP/ASP/Perl.
That's what RSS DreamFeeder does. RSS DreamFeeder allows you to specify elements
of the content you're already creating for your website to be reformatted as
an RSS feed. It integrates specialized search-engine technology into Dreamweaver
with a simple floating panel where you can create, edit, and process your content
into RSS feeds. DreamFeeder's panel lists new content that has been added to
your site since the feed was last updated and will add that new content to your
feeds when you tell it to. You don't have to edit every entry in the feed, all
you do is tell it to do the job. And it only does it when you're ready and your
new content is ready — avoiding problems with feeds pointing to articles
still being created.
So Tell Me How!
OK. Let me tell you how. In this tutorial I'm going to outline two different
styles of content, which broadly encompasses the two primary sets of web content
that get converted to feeds — Single Pages and Directories. Single pages
are single html files that contain multiple stories, each of which is treated
as a unique entry to be linked to by the RSS feed. Directories contain multiple
html files, each of which contains a single story and links to each must be
entered in the RSS feed. RSS DreamFeeder, once configured, will do all of this
automatically for you when you process the feed. You can define multiple feeds
for your website and each feed can have its own configuration.
Download the Pieces
You will, of course, need a copy of RSS DreamFeeder, available from RNSoftware
at
http://www.rnsoft.com/products/rssdreamfeeder
You install RSS DreamFeeder using the Extension Manager application
that came with your copy of Dreamweaver. All you should have to do is double-click
the MXP file that you downloaded and Extension Manager should launch and ask
you if its OK to install. You may need to restart Dreamweaver after installing
the extension but you don't need to restart your computer.
To launch RSS DreamFeeder select RSS DreamFeeder from the Window menu
in Dreamweaver. This will open the DreamFeeder panel and display a list of rss
files within the current website — you shouldn't have anything in the
list because you haven't created them yet. If you click on the RSS DreamFeeder
button in the bottom left corner you should see this panel. Click the Done button
to go back to your feeds list.
:
You'll probably want a news aggregator to test the feed with. You can use any
one that you like, but here are a couple (the first ones that come up when I
google "news aggregators download"):
Ampheta Desk
NetNewsWire
(more at http://blogs.law.harvard.edu/tech/directory/5/aggregators)
You might also try Firefox's active bookmarks or Safari's RSS reader.
I've also created a simple website with some basic content so you can see the
process in action.You can download this demo site at
http://www.rnsoft.com/products/rssdreamfeeder/content/tutorial/RDFDemoServer.zip
You will have to define this as a new website within Dreamweaver.
I called the site RDFTutorial. You don't need a remote site defined,
just a local one, because RSS DreamFeeder works right from your local files,
and includes only the new files you create. When you're ready to publish the
feed you create on your website you simply upload the RSS or XML file you created,
just like you would for any HTML file. That means you get to manage your content
the way that works best for you and your workflow.
The Files in the Site
To keep things simple, the demo website only contains a limited number of files.
But to be authentic we created this site using CSS styles, templates, and library
items, just like you would for your website. The files we are most interested
in are the Home page — index.html in the root of the website — and
the JobBank page — jobbank.html in the 03_HumanResource directory (the
individual jobs listed are stored in a the JobBank directory in there).
Feeding the Home Page
Open the home page and take a look at it. The home page is an example
of a single html files that contain multiple stories. I used a repeating block
with a template, but you don't have to, RSS DreamFeeder looks at the HTML code
for the page, not the Dreamweaver markup. Each of these stories will need to
be treated as a unique entry to be linked to by the RSS feed.
Imagine that we've just edited the content to add our update —
Aug 27 Employee Special. This content represents the story that we'll want to
collect for use in our RSS feed. The way we'll collect this content is based
on the HTML code used to layout the content. Take a close look at the content
and notice a few things:
- The headline is in a TD tag with a CSS style applied — HPStoryRevHead
- The anchor defines the location to link to within the page for each story
— it will get picked up by the RSS feed
- The story content is a P tag with a CSS style applied — HPStoryContent
Now based on what we just looked at you'll be able to define a feed for this
page and use those attributes to identify the content to extract from the page
and put into the RSS feed.
If RSS DreamFeeder isn't already open, you can open it by selecting RSS DreamFeeder
from the Window menu.
To create a new feed you click the New Feed button in the toolbar
at the top of the panel. The panel will change and you will create the settings
for the new feed. You'll go through 5 panels with various settings that effect
how your feed will work. Don't worry, you only have to do this once, when you
create the feed. These settings stick with the feed and are used when you process
the feed to control its content. We'll talk more about processing the feed later
on. (Note: If your window doesn't show the Next and Cancel buttons you may need
to make it taller — I would have done it automatically for you but Dreamweaver
doesn't allow it).
The first panel collects descriptive information about the RSS feed. You will
need to enter the Title of the feed. You will also need to enter
a Description for the feed. You may optionally include a graphic or icon
to be used to represent the feed, but only in aggregators that support RSS v
1 formatted feeds. If you specify a graphic you probably also need to stick
to RSS v1 for the format of your file (specified in a different step). Once
you're happy with your content you may click the Next button to proceed
to the next panel in the series.
The second panel defines what files to summarize when creating the feed. You
can set this up any number of different ways depending on what you would like
to accomplish with your feed. The settings I'm going to outline here are best
for summarizing a single page, like our home page or a blog-style page. Set
the first popup to make a summary of a Page. Then you need to tell
it which page will be summarized - you could type in the file:// url for the
page, but really what you'll do is click the little folder icon to
the right of the text field. You'll be presented with a dialog box to select
an html file — pick the index.html file in the root directory
of the site (the home page) and click choose. Subdirectories only applies to
directory summaries, not to files, so it should be turned off. You'll want to
add entries to the RSS feed for all changes to this file so set Capture
changes to File Modifications. Enter the base url for the website
you will be publishing to, it will be used to create the links in the RSS feeds
(RSS feed links are full URLs because you never know where the feed will be
republished). Set Max stories to 30 because we don't want the feed
to contain more than 30 news entries — this is arbitrary, and just what
I happened to want when I created it. You can set it any way you like, or leave
it blank and there will be no limit. Be warned, though, unlimited RSS feeds
just keep accumulating content, which probably isn't what you really want.
The third panel determines how the headline will be extracted from the html
page. The headline was within a TD tag with a CSS style (called a CLASS) of
HPStoryRevHead applied. The content of that table cell should be used as the
headline of the story in the RSS feed. So set the Match Tag to be TD
(its not case sensitive). Set the CLASS attribute to be HPStoryRevHead
to further uniquely identify the item we want. Extract the Tag Content
to be used as the headline.
The fourth panel determines how the story will be extracted from the html page,
in a similar manner to the way that headlines are extracted from the page. The
story was within a P tag with a CSS style of HPStoryContent applied. The content
of that paragraph should be used as the story in the RSS feed. So set the
Match Tag to be P. The paragraph to include follows the headline, so set
the Location to After the Headline. Set the CLASS attribute to be HPStoryContent
to further uniquely identify the item we want. Extract the Tag Content
to be used as the story. You may alternatively specify a maximum length for
the content in characters or words, but as the stories a pretty short blurbs
already there really isn't a reason to here. You also might want to strip any
HTML tags from the story (like the P tag or BR tag). Some aggregators have problems
rendering HTML content. Good ones will just ignore the tags, but bad ones will
actually display the HTML tags.To be more compatible you would want to check
Strip HTML.
The fifth and final panel determines where the file is saved and in what RSS
format. Tell it where to save the RSS file you are creating — you could
type in the file:// url for the page, but really what you'll do is click
the little folder icon to the right of the text field. You'll be presented
with a dialog box to save a file — go to the root directory and type
in "indexfeed.rss" and click save (you can call it whatever
you want, that's just what I used, but you should end the file with RSS or XML).
Then pick which version of the RSS format to use — Version 1.0
is the most popular, DreamFeeder supports 0.9.X, 1.0 and 2.0. Older formats
are more broadly compatible, but newer formats support dates and times for each
story, and graphics for the feed. Finally, click the Save button and
the RSS file will be created and added to your list of feeds.
After completing these steps the file for your feed has been created. It is
now listed in the list of RSS feeds. The list entry indicates that it has never
been updated — that means that the feed doesn't have any stories in it
yet. Also, the entry lists that there is 1 new story to be processed (actually,
1 modified file to be processed, but who's counting?).
To process/update the feed you can simply click the Update button and the settings
you defined before will be used to identify and extract new content which will
then be added to the feed. So try it out, select your feed from the list
and click the process/update button. The RSS feed will now have content
that you can examine in your favorite news reader.
Feeding the JobBank
Open the JobBank and take a look at it — it's the jobbank.html
file in the 03_HumanResource directory. This page is just a listing of the pages
that are in the JobBank directory, each page is a different entry offering a
different job. We can list these same pages in an RSS feed automatically. This
is an example where each file is a single story, and we'll be summarizing all
the files within a directory.
Open the any Job Description file and examine it. This content represents
the story that we'll want to collect for use in our RSS feed. The way we'll
collect this content is based on the HTML code used to layout the content. Take
a close look at the content and notice a few things:
- The headline is a H1 but it's the same for all the pages, so it's not a
good headline — Job Announcement
- The subhead is a H3 but it actually contains the relevant headline content
- The story content is in P tags, but there are multiple paragraphs that we'll
want to collect
Now based on what we just looked at you'll be able to define a feed for this
page and use those attributes to identify the content to extract from the page
and put into the RSS feed. You're going to go through the same feed creation
process as before, but with slightly different settings appropriate to this
content.
Enter descriptive information about the RSS feed in the first panel. You will
need to enter the Title of the feed. You will also need to enter
a Description for the feed. You may optionally include a graphic or icon
to be used to represent the feed.
Define the files to summarize in the second panel. Set the first popup to make
a summary of a Directory. Then you need to tell it which directory will
be summarized - you could type in the file:// url for the page, but really what
you'll do is click the little folder icon to the right of the text
field. You'll be presented with a dialog box to select a directory — pick
the JobBank directory. If we wanted to include subdirectories in our summary
you would want to check it, but that doesn't matter for this example because
there are no subdirectories. You'll want to add entries to the RSS feed for
all new files so set Capture changes to File Creation. Enter the
base url for the website you will be publishing to, it will be used to
create the links in the RSS feeds (RSS feed links are full URLs because you
never know where the feed will be republished). Set Max stories to 30
because we don't want the feed to contain more than 30 job entries — this
is arbitrary, and just what I happened to want when I created it. You can set
it any way you like, or leave it blank and there will be no limit. Be warned,
though, unlimited RSS feeds just keep accumulating content, which probably isn't
what you really want.
Setup headline extraction in the third panel. Set the Match Tag to be H3
(its not case sensitive). Extract the Tag Content to be used as the
headline.
Setup story extraction in the fourth panel. Set the Match Tag to be P
(its not case sensitive). The paragraphs to include follow the headline, so
set the Location to After the Headline. Set Extract the All Matching
Tags to be used as the story content. That means multiple paragraphs will
be collected. Finally limit the length of the story because multiple paragraphs
might be a lot of text. Set Max Length to 200 words.
In the fifth and final panel save your new feed.I saved it as "jobbank.rss"
right next to the jobbank.html file.
After completing these steps the file for your feed has been created. It is
now listed in the list of RSS feeds. The list entry indicates that it has never
been updated — that means that the feed doesn't have any stories in it
yet. So process it and then test the results.
Linking to the Feeds
The last step in setting up your feeds is to link to them. You can do it the
same way that you link to any file with Dreamweaver, but that only creates relative
links, not Feed:// protocol links, and does not provide alternative content
header links — which is how Safari knows to display the little RSS icon
in the location bar, or how NetNewsWire knows where to find a feed when given
a regular URL. So there are some deficiencies in the way that Dreamweaver treats
linking to an RSS feed. RSS DreamFeeder provides an interface in the Link panel
to address these issues (you may need to make the panel wider to see the Apply
buttons — I'd have done it for you but Dreamweaver doesn't allow it).
The panel is broken into two groupings: Alternative Content Link and Hypertext
Link.
Alternative Content Link settings provide the way to setup the header links
to the feed as an alternative to displaying HTML. If an aggregator see the page
it will load the Feed instead of the page. The Link To popup menu allows you
to select from the RSS feeds you have already created without having to select
the file itself. Click the Apply button to apply your setting to the current
page being edited. You can only have one RSS feed alternative per page, so any
changes you make will modify that setting for the page.
Hypertext Link settings insert a hypertext link at the selection in the current
document. The Link To popup menu allows you to select from the RSS feeds you
have already created without having to select the file itself. To change the
graphic click on it. You will be presented with a new popup menu where you can
select a different graphic. Upon selection that graphic will be displayed. To
use the Feed:// protocol check the box. This alternative protocol is associated
with RSS feeds so that news aggregators can be triggered as helper applications
from within a web browser. Click the Insert button to insert your link.
So to link to our feed for the JobBank open the JobBank file, then click on
the Link button in the RSS DreamFeeder panel. Set the alternative content to
point to your JobBank feed. Then click on the page in front of open jobs and
insert a Feed protocol link to the same feed. Click after the newly inserted
link and press return to put the headline on a new line.
To link to our feed for the home page we have to edit content that isn't available
within the file, but rather is only editable in the template. No problem, open
the HomePageTemplate file (in the Templates directory), and setup your link
and alternative content header.
When you save, Dreamweaver will prompt you to update the pages that the template
is based on. Click OK and it will update the home page to include the new links.
Nothing is Perfect
There are a few final details with what you did.
First, the content that you created probably has the words "UNREGISTERED"
in it somewhere. Until you register your version of RSS DreamFeeder it will
continue to include that content in both the headline and the story. You can
purchase a serial number for RSS DreamFeeder at http://www.rnsoft.com. Click
on the "REGISTER" button at the bottom of the RSS DreamFeeder panel
and enter the serial number there.
Second, the feed protocol hypertext links you inserted point to some website
that doesn't exist, so don't expect them to work. If you did publish the feeds
on your website and configured the Base URL part of the feed correctly it would
work. But its good enough for this tutorial.
Third, for single page summary feeds like the home page feed we created you'll
notice that the dates all say the same thing. They are listing the modified
date of the file for each new entry. Since all 3 entries are new, all 3 are
listed with the same modified date. If you put a new entry on the home page,
and run it now, it's date would be different from the others. Nothing a quick
text-editing couldn't fix, but to be fair, it isn't quite right.
Fourth, for directory summary feeds like the job bank feed we created, remember
that we configured it to capture files are based on their creation dates. I
duplicated a file and tried to edit it only to discover that by doing so I didn't
change its creation date. The solution is to open the file and do a Save As,
which creates a whole new file.
A few more notes (about Contribute and Atom)
After a discussion with someone who read this tutorial, I thought I'd share
his thoughts and my responses. I hope you'll find this helpfull as well.
Ray Mathews writes:
(1) Most of our web page content creators use Contribute and wouldn't have
direct access to the RSS Dreamfeeder extension; if the webmaster sets up feed
with the appropriate ID, NAME, and CLASS attributes, will the feeds be updated
automatically when they publish?
It will work with contribute-generated content. However, the webmaster will
have to process the feed manually. Its a chore (sort of anyway, it's only a
single click), but there isn't a good way around it for the moment. We have
several tests in progress for how to make it work without having to have the
webmaster do anything more than just setup, but we're not there yet.
(2) Will the extension eventually support Atom? I think Atom is fast becoming
an important syndication standard.
Yes, we are working on that for the next version of DreamFeeder. There are
a few issues with it being a more precise XML variant, but nothing we can't
solve in the near future.
That's All Folks
I hope you found this tutorial useful, and I hope that you'll get a lot of
use out of RSS DreamFeeder.
Thanks for you support.
|
