RSS XML Tutorial: Basics

About This Tutorial

Note: This tutorial is based on a Web 2006 workshop.

This tutorial shows you how to create an RSS feed from scratch. This is useful if you are posting content onto a Web 1.0 service which does not generate a feed of its own. If you are using a Web 2.0 which generates its own feed (e.g. a blog or wiki), then this step is unnecessary.

If you need information on subscribing to news feeds, please read http://blogger.psu.edu/help/basics/rss

For the purposes of this tutorial I will be creating a hypothetical Penn States sports channel announcing the overtime Orange Bowl victory of 2006.

About the RSS Spec

RSS is an XML format designed to deliver basic news story content. RSS feeds are organized into items with headlines, links and content. The specifications for RSS 2.0 are at http://blogs.law.harvard.edu/tech/rss

  • An XML format (information enclosed in tags much like HTML)
  • Originally designed at Netscape.com.
  • Several versions. Latest is RSS 2.0. Older versions include RSS 0.9x, RSS 1.0
  • RSS 2.0 designed at Harvard University and is easy to hand-code.

Create the RSS File

Create .xml File

  1. Open text editor such as Notepad (Windows), StarOffice (Win/Linux), TexEdit (Mac), BBEdit (Mac) or any text editor which can save plain text files in the Unicode UTF-8 format
  2. Save your file and give it the extention .xml.
  3. Save the file in the UTF-8 format.
    Note: Since Unicode includes characters like em dashes (—), Smart Quotes (“ ”) and the € sign...Unicode is recommended for most content.

Declare XML and RSS encodings

All RSS files begin and end with these lines

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">


</rss>

Add Channel Tags

1. Add the channel beginning and end tags.

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>

</channel>

</rss>

2. Include information about the channel in the appropriate channel level tags.
Note: The lastBuildDate is in RFC 822 Date format (see details in the next section).

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>

<title>Fake Penn State Sports Channel</title>
<description>Get the latest Penn States sports headlines</description>
<link>http://www.psu.edu/fakesportschannel</link>
<webMaster>xyz123@psu.edu</webmaster>
<copyright>© 2005-2006 Penn State. All rights reserved.</copyright>
<lastBuildDate>Wed, 4 Jan 2006 01:40:00 EST</lastBuildDate>

</channel>
</rss>

3. To insert the copyright symbol, type ALT+0169 on Windows (use numeric keypad) or Option+G on the Mac.
Note: The majority HTML of entity codes like &copy; are NOT recognized in XML. You should type them in directly as in the example below. Only the following entity codes are recognized in XML - &amp; for &, &lt; for <, &gt; for > , &quot; for " (double quote) and &#39; for ' (single quote)

<copyright>© 2006 Penn State.</copyright>


RFC 822 Date Format

All dates in RSS Tags must be formatted according to RFC 822 standards; otherwise some RSS readers will declare the feed invalid and not display any data.

Although you can estimate dates and times, the format must be accurate. The format is:

Day, Date Mon Year Hour:Min:Sec EST (time zone)
An example: Sun, 01 Jan 2006 11:00:00 EST

  • Day: Use Mon, Tue, Wed, Thu, Fri, Sat, Sun, - NO PERIODS
    There must be a comma after the day name. This is the only comma used
  • Date: Use zeroes for 1-9 (i.e. 01-09)
  • Month: Use Jan, Feb, Mar, Apr, may, Jun, Jul, Aug. Sep, Oct, Nov, Dec - NO PERIOD
  • Time: Military time in hours : minutes : seconds (estimates OK)
    e.g. 13:01:01 = 1:01 PM and 01:01:01 = 1 AM
  • Time Zone: MUST be included. For Pennsylvania, use EST for Eastern Standard and EDT for Daylight Savings. Other U.S. time zones include CST (Central Standard) , MST (Mountan Standard), PST (Pacific Standard). Greenwich Mean Time (London) is GMT or UT.

An example: Sun, 01 Jan 2006 11:00:00 EST

Add News Item Information

1. Once you complete the channel tags, insert an opening <item> an closing </item> tag above the closing </channel> tag.

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">

<channel>

<title>Fake Penn State Sports Channel</title>
<description>Get the latest Penn States sports headlines</description>
<link>http://www.psu.edu/fakesportschannel</link>
<webMaster>xyz123@psu.edu</webmaster>
<copyright>© 2005-2006 Penn State. All rights reserved.</copyright>
<lastBuildDate>Wed, 4 Jan 2006 01:40:00 EST</lastBuildDate>

</channel>

</rss>

2. Include information about the news item in the appropriate item level tags. Note that the pubDate tag must be in RFC 822 format.

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">

<channel>
[YOUR CHANNEL TAGS HERE]

<item>

<title>Penn State Wins Orange Bowl in Triple Overtime</title>
<description>The entire town of State College and surrounding buroughs sighed with relief and exhaustion as the Nittany Lions....</description>
<link>http://www.psu.edu/fakesportschannel/2006</link>
<pubDate>Wed, 4 Jan 2006 01:40:00 EST</pubDate>
<category>Football</category>

</item>

</channel>

</rss>

3. Repeat Steps #1-2 for each news item you intend to announce.

Complete RSS File with Two News Items

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">

<channel>

<title>Fake Penn State Sports Channel</title>
<description>Get the latest Penn States sports headlines</description>
<link>http://www.psu.edu/fakesportschannel</link>
<webMaster>xyz123@psu.edu</webmaster>
<copyright>© 2005-2006 Penn State. All rights reserved.</copyright>
<lastBuildDate>Sun, 30 Dec 2007 20:30:00 EST</lastBuildDate>

</channel>

<item>

<title>Penn State Wins 2007 Alamo Bowl</title>
<description>The football season ended happily with ...</description>
<link>http://www.psu.edu/fakesportschannel/2007</link>
<pubDate>Sun, 30 Dec 2007 20:30:00 EST</pubDate>
<category>Football</category>

</item>

<item>

<title>Penn State Wins Orange Bowl in Triple Overtime</title>
<description>The entire town of State College and surrounding buroughs sighed with relief and exhaustion as the Nittany Lions....</description>
<link>http://www.psu.edu/fakesportschannel/2006</link>
<pubDate>Wed, 4 Jan 2006 01:40:00 EST</pubDate>
<category>Football</category>

</item>

</channel>

</rss>

 


Post and Test Newsfeed

Post in Web Space

RSS files can be posted onto Web sites in the same process that HTML files are posted. Penn State users can read instructions at the Guide for Penn State Web Developers.

Test in Internet Explorer 7 or Safari

  1. Go to the URL corresponding to your RSS file (e.g. http://www.psu.edu/fakesportschannel/newsfeed.xml).
  2. You will see a file listing headlines. Make sure no error messages are displayed.

Test in News Reader

Add a subscription to a news reader such as Thunderbird, NetNewsWire Lite, Feedreader, Bloglines, Google Reader Sage Firefox plugin or other tool.

Add and Delete Items in the News feed

  1. To add items to a news feed, add another set of <item> tags at the top of the file below the <channel> tags and repost the RSS file to your Web space.
    Note: The safest way to test to see if a new version of your RSS file has been posted is to delete your subscription, then re-add it.
  2. Items in your RSS file remain in a subscription until you remove the <item> tags for those items. To remove an item, delete a group of<item> tags corresponding to that news story.
    Notes: You may want to leave items in for a time in order for new subscribers to see information. When you need to update your file, old items can be placed in a separate archive news feed file or Web page.

Adding RSS to a Web Page

Basic Link

You can create a link to an RSS file using the A tag. See example below.

<a href="newsfeed.xml">Read Our Newsfeed</a>

Header Meta Tag for Firefox and Safari Icons

If you want Firefox or Safari to display their news feed icons in the browser bar, then add the following meta tag to the header section of your HTML document.

<head>
<link rel="alternate" type="application/rss+xml" title="RSS" href="newsfeed.xml">

</head>

Fake RSS Icons with CSS

Specify CSS

You can use CSS style sheets to mimic the appearance of the orange and white RSS button without using an image.

1. Copy and paste the following code into the header area of your HTML document. This defines the formatting for the “rss” class of link including visited and hover variants.

<head>
<style type="text/css" media="screen">
<!--
a.rss {background-color: #F60;
   padding: 0 3px;
   color: #FFF; text-decoration: none;
   font-size:x-small; font-weight:bold;
   font-family: Verdana, sans-serif;
   border: 1px solid black}

a:visited.rss {background-color: #F60;}
a:hover.rss {background-color: #F30;}
a:focus.rss {background-color: #F60;}
-->
</style>

Invoking CSS Style

To specify that a link should look like an RSS icon, add “class=rss” within the <a href..> tag. For examaple.

<p>See my news feed <a href="newsfeed.xml" class="rss">RSS</a></p>

Links

RSS Tutorials

ATOM Feed Tutorials

More complex, but safer alternative if you want to include HTML tags and images. There are several versions out there.