in english (en)
 DEALs 
 RSS DREAMFEEDER   RSS REPLAY 
 SOCIALINK 
 ARTICLEs 
 RONs BLOG 
 SUPPORT 
 PR & MEDIA 
 CORPORATE 

 

Put RSS Content into Your Dreamweaver Web Pages with RSS Replay

By Ronald Northrip

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.

There are basically two different scenarios where you're likely to want to republish RSS content into a web page. First, if you have a feed -- what I'll call a local feed -- you may want to provide it in HTML as well for people in your audience who aren't subscribed. Second, you'll want to replay content from someone else's feed so that you can keep your audience up to date on hot topics across the internet (RSS publishers are OK with this -- just rememebr to attribute the content to them).

This tutorial will show you how to do both of these things with RSS Replay -- a Dreamweaver extension I created.

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
http://www.rnsoft.com/en/products/rssreplay/

You install RSS Replay 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.

Second, I've written a few example files that you'll want to use so download them from the RNSoft website as well
http://www.rnsoft.com/en/products/rssreplay/content/tutorial/RRPTutorialSpace.zip

Once you have downloaded the example files and unzipped them you will have a directory called "RRSTutorialSpace" 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 "RRSTutorialSpace" as the local root.

You will have to define this as a new website within Dreamweaver. I called the site "RSSReplayTutorial". You may need to provide both local and remote information, if you plan to replay remote content. Since that's what we're planning to do, and because remote feeds requires server-based proxy scripts, you'll need to configure Dreamweaver for your webserver. RSS Replay does not move anything to the server automatically for you, it works on local files only -- and then when you're ready you can move them to the remote server.

Replaying a Local Feed

Say you've got this website about Outer Space called "Space News" and you publish an RSS feed of the active issues in the Space community. You want to put your feed ("spacenews.rss") onto your web page ("spacenews.html").

So begin by opening the "spacenews.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).

or

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 Propery 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 "spacenews.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 "spacenews.rss". Then click the "OK" button to close the dialog.

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.

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.

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. 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 "nasaarticles.html". You're going to replay the feed from NASA news page 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://www.nasa.gov/rss/breaking_news.rss

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.

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. More about the Replay tags can be found in the help file at
http://www.rnsoft.com/en/products/rssreplay/help.php