RSS - Really Simple Syndication - is about sharing content with new audiences. Lots of websites create RSS feeds so that their audiences can get updates using their favorite Aggregators (like NetNewsWire). Other websites collect that content and republish it in new venues, to new audiences, or just in a different medium. That's what syndication is all about -- sharing. And since my mamma always taught me sharing is good, I'm gonna share the secret to putting RSS content onto your web page.

Now, you might have an RSS feed already. However you choose to build that RSS feed -- from RSS DreamFeeder to FeedForAll to a custom script -- the content in the feed is intended to let you reach out to a new audience. That audience has to subscribe to the content, so it might be useful to help them see the sorts of headlines they'll be getting. Consider publishing those headlines on a webpage -- it's easy and helps them make the decision to subscribe to your feed.

You might also want to republish content from other websites. There are lots of sources of RSS content out there. Republishing those feeds on web pages that your audience reads regularly can help to keep them better informed. If the goal of an RSS feed is to find new audiences, putting their content in front of your audience helps achieve the aim of the original publisher (though don't forget to let people know where the headlines came from).

This tutorial will show you how to do both of these things with a simple Dreamweaver extension called RSS Replay.

What You'll Need
First you'll need to download and install the RSS Replay extension. You can get the extension from the RNSoft website at www.rnsoft.com/en/products/rssreplay/ Second, I've written a few example files that you'll want to use so download them from the RNSoft website as well www.rnsoft.com/en/products/rssreplay/content/tutorial/RRPTutorialWDDJ.zip Once you have downloaded the example files and unzipped them you will have a directory called "RRSTutorialWDDJ" that contains a few files. You'll use that directory as the root directory for a website in Dreamweaver. So the next step is to launch Dreamweaver and setup a website with "RRSTutorialWDDJ" as the local root. I am assuming that you know and use Dreamweaver -- which might not be a fair assumption. If these instructions are not specific enough, take a look at the tutorial on RNSoft's website for more details at www.rnsoft.com/en/products/rssreplay/tutorial/

Replaying a Local Feed
Say you've got this website about Dreamweaver called "Dreamweaver News" and you publish an RSS feed of the active issues in the Dreamweaver community. You want to put your feed ("dwnews.rss") onto your web page ("dwnews.html").

So begin by opening the "dwnews.html" file in Dreamweaver.

Select the text that says "Put Replay Here" and delete it. In its place we will put an RSS Replay. Depending on your version of Dreamweaver the icon for RSS Replay is the Insert panel's Media tab or the Media popup in the Common tab (wherever you would normally find the icon for Flash or ActiveX) (see Figure 1).

Click the icon to insert an RSS Replay. An icon is inserted into your layout indicating that you now have a Replay. With that icon selected you should now see the RSS Replay Property Inspector. We'll use the property inspector to configure the RSS Replay.

The property inspector allows you to specify the sources (the URLs of the feed), the CSS style for displaying the content (headlines and stories), the format for display, and the method of transferring the feed.

The next thing you need to do is specify the source of the content you want to display. The feed is an RSS file called "dwnews.rss". Put that into the list of sources by clicking the "Sources" button to display a dialog containing the list of sources. At first, the list will be empty. Click the plus (+) button to add a new source to the list, then select it and enter "dwnews.rss". Then click the "OK" button to close the dialog (see Figure 2).

The next step is to specify the format for displaying the content. RSS Replay comes with 10 formats for displaying content (and you can create your own too). You'll just select one from existing formats in the "Format" menu. Right now the menu indicates that there are "No Settings". Select "Headlines w Stories", which will display the headline and the story associated with that headline (see Figure 3).

Now that you've specified that you'll want to see what the page will look like. RSS Replay provides an in-Dreamweaver preview of the content so that you can better assess how the content fits into your page and make adjustments as needed. To play the Replay press the "Play" button in the inspector.

Now your page will change to display the RSS content in the layout and the "Play" button will change to say "Stop" - press this when you are done previewing (see Figure 4).

You can try other formats too - for example: "Headlines w Stories (Definition List)". Change the format to that and now your layout will have hanging indents (standard definition list formatting).

OK, that looks pretty good, but say you wanted to make those headlines a little bigger than the other content. You can do that with CSS (see Figure 5). Create a CSS class and call it "replayheads" and set the font size to be "larger" and set the weight to be "bold".

Now apply that style to the headlines by selecting it from the "Headln Class" popup.

Preview the Replay again (press the "Play" button) and you should now see that the headlines are larger.

Now if you're really paying attention to details in the layout, you'll see there's a blank line above our feed content that appears to be part of the preview selection. What's happening here is that RSS Replay is inserting content where it is placed in the layout. By default, Dreamweaver puts any content into paragraphs (P tags). So what we have is an extra P tag wrapping our Replayed content. It's easy to fix this -- switch off the preview, so you are looking at the little icon in the layout. The icon should still be selected, and the Tag Insepector (the status area at the bottom of the Dreamweaver window) shows which tags are wrapping the current content. Right now it says "<body><p>". Right click (or control click for you Mac folks) on the P tag there and select "Remove Tag" from the contextual menu.

If you preview again (press the "Play" button) you'll now see that the extra space is gone.

Perfecto! So now you'll want to take a look at the page in the web browser. Save the page and open it in your favorite web browser.

Doh! Until you register RSS Replay the content in the browser will only show "RSS Replay is Unregistered". Once registered, the JavaScript file will be unlocked and you'll see the same thing in the browser that you do in Dreamweaver.

Replaying a Remote Feed
There are really only two important differences between a local feed and a remote feed. First, you have to change the source so the URL is a full URL that includes the protocol (e.g. http://www.whatever.com/path/file.rss). Second, you have to change the method being used to include a proxy that will make the request for RSS content for you (RSS Replay offers two methods -- ASP & PHP).

Start by opening "wddjarticles.html". You're going to replay the feed from Web Designers and Developers Journal so that your readers can see the headlines, and maybe a little bit of the stories.

Select the text that says "Put Replay Here", delete it and insert a Replay. Now to configure the replay, begin with the source. Click the "Sources" button in the inspector. Press the plus button and then enter the URL for the feed: http://webddj.sys-con.com/index.rss (see Figure 6).

Then select the format to display this feed with. Choose "Headlines w Stories (25 Word Stories w UL)". This will display the headlines and stories as a bulleted list, and trim the stories to only the first 25 words.

Finally, we're going to specify the method for transferring the feed using the "Method" popup. The default method is "AJAX/JavaScript (local feeds only)". This method is restricted to displaying feeds that are from the same domain as the page -- a restriction based on the way the web browsers handle data requests. To get around that limitation RSS Replay uses a proxy to request the RSS feed from a remote server but to provide the data as if it were from the local domain. The proxy is a server script and has been included in both ASP and PHP -- so all you have to do is pick the server language that you are using. Of course, you will not be able to test this method without having a server to put in on. Select the proxy that is appropriate for your server.

Now if you press the "Play" button you will see the layout including content from a remote source. Don't worry if you see an HTTP error -- sometimes Dreamweaver times-out before the data is completely transferred -- pressing "Stop" and then "Play" again usually solves this problem.

So save this and test it on your server.

Of course, if you haven't registered yet you'll still see "RSS Replay is Unregistered". But once you do register the JavaScript and ASP/PHP pages will be replaced with unlocked versions and your page will work perfectly (see Figure 7).

Lastly, I want to leave you with one more idea. You can customize your display not only with CSS but also by changing the HTML that is being generated by RSS Replay. In the "Format" menu of the property inspector you will also find the "Advanced" option. Selecting that option will present you with a dialog where you can enter the HTML codes that will be used along with special Replay tags that are used to identify where content is placed and what to do with it -- like<<headline>> and <<story>>. I'll leave that for you to play with.

I hope you enjoy the software and build great websites.