Introduction to RSS (Really Simple Syndication)
Ever wanted to add RSS to your website but never really understood how RSS feeds worked or how to implement them? In this article we’ll give you a simple RSS generator that is made from HTML and JavaScript. We’ll show you how to use it to generate a feed, save that feed as an RSS XML file, and link your new feed to any website page.
The RSS Feed Generator
The code that you see below will let you manually generate the XML for a RSS feed. It generates only the most basic elements of a RSS feed, so keep in mind that there are other options that you could add to the generator. We will delve into the items that are generated in some detail in the next section. If you want to review the complete set of RSS 2.0 standards they are available on the w3c.org website.
<html>
<head>
<title>RSS Feed Generator</title>
<script language=”javascript” type=”text/javascript”>
// <!CDATA[
function ButtonGenerateXml_onclick() {
// variable used to build output
var xmlOutput = ”;
// variable used to get object values
var myDocumentObject = document.getElementById(‘RadioFullFeed’);
// add rss and channel only for full feed
if (myDocumentObject.checked)
{
xmlOutput = xmlOutput + ‘<rss version=”2.0″>rn’;
xmlOutput = xmlOutput + ‘<channel>rn’;
myDocumentObject = document.getElementById(‘TextChannelTitle’);
xmlOutput = xmlOutput + ‘<title>’ + myDocumentObject.value + ‘</title>rn’;
myDocumentObject = document.getElementById(‘TextChannelLink’);
xmlOutput = xmlOutput + ‘<link>’ + myDocumentObject.value + ‘</link>rn’;
myDocumentObject = document.getElementById(‘TextChannelDescription’);
xmlOutput = xmlOutput + ‘<description>’ + myDocumentObject.value + ‘</description>rn’;
myDocumentObject = document.getElementById(‘TextChannelGenerator’);
xmlOutput = xmlOutput + ‘<copyright>’ + myDocumentObject.value + ‘</copyright>rn’;
myDocumentObject = document.getElementById(‘TextChannelCopyright’);
xmlOutput = xmlOutput + ‘<generator>’ + myDocumentObject.value + ‘</generator>rn’;
}
// build item
xmlOutput = xmlOutput + ‘<item>rn’;
myDocumentObject = document.getElementById(‘TextItemTitle’);
xmlOutput = xmlOutput + ‘<title>’ + myDocumentObject.value + ‘</title>rn’;
myDocumentObject = document.getElementById(‘TextItemPubDate’);
xmlOutput = xmlOutput + ‘<pubDate>’ + myDocumentObject.value + ‘</pubDate>rn’;
myDocumentObject = document.getElementById(‘TextItemLink’);
xmlOutput = xmlOutput + ‘<link>’ + myDocumentObject.value + ‘</link>rn’;
myDocumentObject = document.getElementById(‘TextAreaItemContent’);
xmlOutput = xmlOutput + ‘<description>’ + myDocumentObject.value + ‘</description>rn’;
xmlOutput = xmlOutput + ‘</item>rn’;
// add channel and rss close tags for full feed
myDocumentObject = document.getElementById(‘RadioFullFeed’);
if (myDocumentObject.checked)
{
xmlOutput = xmlOutput + ‘</channel>rn’;
xmlOutput = xmlOutput + ‘</rss>’;
}
// show xml in text area
document.getElementById(‘TextAreaGeneratedXml’).value = xmlOutput;
}
// ]]>
</script>
</head>
<body>
<form id=”rssGenerator” action=””>
<span style=”font-size: 16pt”><strong>Rss Feed Generator<br />
</strong></span>
<br />
Generate:
<input id=”RadioItemOnly” type=”radio” checked=”CHECKED” name=”GenerationMethod” />
Item Only
<input id=”RadioFullFeed” type=”radio” name=”GenerationMethod” />
Full Feed<br />
<br />
<strong>Channel Settings:</strong><br />
<br />
Channel Title:
<input id=”TextChannelTitle” type=”text” /><br />
Channel Link:
<input id=”TextChannelLink” type=”text” /><br />
Channel Description:
<input id=”TextChannelDescription” type=”text” /><br />
Channel Generator:
<input id=”TextChannelGenerator” type=”text” /><br />
Channel Copyright:
<input id=”TextChannelCopyright” type=”text” /><br />
<br />
<strong>Item Content:</strong><br />
<br />
Title:
<input id=”TextItemTitle” type=”text” /><br />
Publication Date:
<input id=”TextItemPubDate” type=”text” /><br />
Website Link:
<input id=”TextItemLink” type=”text” /><br />
Content:<br />
<textarea id=”TextAreaItemContent” cols=”100″ rows=”4″></textarea><br />
<br />
<strong>Generated RSS XML:</strong><br />
<br />
<textarea id=”TextAreaGeneratedXml” cols=”100″ rows=”10″></textarea><br />
<br />
<input id=”ButtonGenerateXml” type=”button” value=”Generate Feed” onclick=”return ButtonGenerateXml_onclick()” />
</form>
</body>
</html>
<html>
<head>
<title>RSS Feed Generator</title>
<script language=”javascript” type=”text/javascript”>
// <!CDATA[
function ButtonGenerateXml_onclick() {
// variable used to build output
var xmlOutput = ”;
// variable used to get object values
var myDocumentObject = document.getElementById(‘RadioFullFeed’);
// add rss and channel only for full feed
if (myDocumentObject.checked)
{
xmlOutput = xmlOutput + ‘<rss version=”2.0″>rn’;
xmlOutput = xmlOutput + ‘<channel>rn’;
myDocumentObject = document.getElementById(‘TextChannelTitle’);
xmlOutput = xmlOutput + ‘<title>’ + myDocumentObject.value + ‘</title>rn’;
myDocumentObject = document.getElementById(‘TextChannelLink’);
xmlOutput = xmlOutput + ‘<link>’ + myDocumentObject.value + ‘</link>rn’;
myDocumentObject = document.getElementById(‘TextChannelDescription’);
xmlOutput = xmlOutput + ‘<description>’ + myDocumentObject.value + ‘</description>rn’;
myDocumentObject = document.getElementById(‘TextChannelGenerator’);
xmlOutput = xmlOutput + ‘<copyright>’ + myDocumentObject.value + ‘</copyright>rn’;
myDocumentObject = document.getElementById(‘TextChannelCopyright’);
xmlOutput = xmlOutput + ‘<generator>’ + myDocumentObject.value + ‘</generator>rn’;
}
// build item
xmlOutput = xmlOutput + ‘<item>rn’;
myDocumentObject = document.getElementById(‘TextItemTitle’);
xmlOutput = xmlOutput + ‘<title>’ + myDocumentObject.value + ‘</title>rn’;
myDocumentObject = document.getElementById(‘TextItemPubDate’);
xmlOutput = xmlOutput + ‘<pubDate>’ + myDocumentObject.value + ‘</pubDate>rn’;
myDocumentObject = document.getElementById(‘TextItemLink’);
xmlOutput = xmlOutput + ‘<link>’ + myDocumentObject.value + ‘</link>rn’;
myDocumentObject = document.getElementById(‘TextAreaItemContent’);
xmlOutput = xmlOutput + ‘<description>’ + myDocumentObject.value + ‘</description>rn’;
xmlOutput = xmlOutput + ‘</item>rn’;
// add channel and rss close tags for full feed
myDocumentObject = document.getElementById(‘RadioFullFeed’);
if (myDocumentObject.checked)
{
xmlOutput = xmlOutput + ‘</channel>rn’;
xmlOutput = xmlOutput + ‘</rss>’;
}
// show xml in text area
document.getElementById(‘TextAreaGeneratedXml’).value = xmlOutput;
}
// ]]>
</script>
</head>
<body>
<form id=”rssGenerator” action=””>
<span style=”font-size: 16pt”><strong>Rss Feed Generator<br />
</strong></span>
<br />
Generate:
<input id=”RadioItemOnly” type=”radio” checked=”CHECKED” name=”GenerationMethod” />
Item Only
<input id=”RadioFullFeed” type=”radio” name=”GenerationMethod” />
Full Feed<br />
<br />
<strong>Channel Settings:</strong><br />
<br />
Channel Title:
<input id=”TextChannelTitle” type=”text” /><br />
Channel Link:
<input id=”TextChannelLink” type=”text” /><br />
Channel Description:
<input id=”TextChannelDescription” type=”text” /><br />
Channel Generator:
<input id=”TextChannelGenerator” type=”text” /><br />
Channel Copyright:
<input id=”TextChannelCopyright” type=”text” /><br />
<br />
<strong>Item Content:</strong><br />
<br />
Title:
<input id=”TextItemTitle” type=”text” /><br />
Publication Date:
<input id=”TextItemPubDate” type=”text” /><br />
Website Link:
<input id=”TextItemLink” type=”text” /><br />
Content:<br />
<textarea id=”TextAreaItemContent” cols=”100″ rows=”4″></textarea><br />
<br />
<strong>Generated RSS XML:</strong><br />
<br />
<textarea id=”TextAreaGeneratedXml” cols=”100″ rows=”10″></textarea><br />
<br />
<input id=”ButtonGenerateXml” type=”button” value=”Generate Feed” onclick=”return ButtonGenerateXml_onclick()” />
</form>
</body>
</html>
How the Generator Works
In order to understand what the generator above does, you will first need to understand the basic structure of an RSS feed. The RSS feed is exactly as advertised, really simple. It consists of two basic sections, the channel and the item. Think of the channel as the newspaper and the item as each section of the newspaper. With any given feed you can have multiple channels (newspapers) each having multiple items (newspaper sections).
In order to define our channel we need to provide some basic information. The basic channel information that we have chosen to include is Title, Link, Description, Generator and Copyright. Of the five that we have selected, only the Title, Link and Description are actually required. There are also several other channel elements that we have chosen not to include which could easily be added to the code above. Here is an explanation for each of the channel elements that we have included:
Channel Title (title) [required]: This is the title of your feed, e.g. “My Cool Articles”.
Channel Link (link) [required]: This is the full url link to the website where your feed content resides, e.g. “http://www.MyWebsiteDomian.com”.
Channel Description (description) [required]: This is a short simple text description of what your feed contains, e.g. “Read technical articles on everything web. We specialize in tutorials on HTML, JavaScript and CSS.”.
Channel Generator (generator): This should be the name of the application or process you used to generate your feed. In our case we would say something like “MyWebsiteDomain.com Manual RSS Feed Generator”.
Channel Copyright (copyright): This is where you copyright your feed. It’s always a good idea to copyright your work to retain proper ownership. The format should look something like “Copyright (C)2009 – MyWebsiteDomain.com”.
Within your newly created channel you can have as many items as you like, however, limiting yourself to somewhere between 10 and 20 items is a good rule of thumb. The generator provides you the option of outputting the entire RSS XML file content or just the item content. You will need to get the full feed content the first time that you create an RSS feed but after that you can generate “item only” and add each subsequent new item block to the top of your set of item blocks. An RSS XML file with multiple item blocks would look something like this:
<rss version=”2.0″><channel>
<title>My Cool Articles</title>
<link>http://www.MyWebsiteDomian.com</link>
<description>Cool feed</description>
<copyright>MyGenerator</copyright>
<generator>copyright (c) 2009</generator>
<item>
<title>Article 2</title>
<pubDate>2/9/2009</pubDate>
<link>http://www.MyWebsiteDomian.com/article2.htm</link>
<description>
Something about article 2.
</description>
</item>
<item>
<title>Article 1</title>
<pubDate>1/1/2009</pubDate>
<link>http://www.MyWebsiteDomian.com/article1.htm</link>
<description>
Something about article 1.
</description>
</item>
</channel>
</rss>
The elements of items that we have chosen to include are Title, Publication Date, Link and Description. Of those elements only Title or Description is required. Here is an explanation of the elements that we have chosen to include:
Title (title) [required if no description]: This is the title of your article or page where the content resides.
Description (description) [required if no title]: This is a short simple text description of your article or content. It shouldn’t be more than a few sentences and should not include any HTML.
Publication Date (pubDate): The date when the article or content was published. This will not necessarily be the same date as the date you generate the feed item.
Link (link): This is the full url link to the full article or page content, e.g. “http://www.MyWebsiteDomian.com/article2.htm”.
As for the generator code itself, it flows like this:
- User fills in appropriate information and clicks the Generate Feed button.
- The Generate Feed button executes the ButtonGenerateXml_onclick function.
- The script first examines the radio buttons and determines if it is generating a full or item only feed.
- If it is a full feed it adds the appropriate tags to the xmlOutput variable that we use to build the feed.
- It next builds the item.
- It next adds the proper closing tags if we are doing a full feed.
- Lastly, it assigns our newly generated RSS XML to the text area “TextAreaGeneratedXml” for easy copy and paste.
The process is fairly simple and straight-forward but keep in mind there is no validation with this script. So, if you put in bad or missing data you’ll end up with a bad or incomplete feed.
Creating Your RSS XML File
The hard part is now done. You have the content for your file, now all you need to do is create the actual XML file for the feed. Just open up Notepad or some other simple text editor, paste in your generated contents and save the feed with the .xml extension. Next upload the file to your web server and you are all done.
Linking Your Feed
Now that you have your feed in place you just need to link up any pages that you want to show the feed. To accomplish this, place this in your page <head> substituting the correct .xml file name and adding an appropriate title:
<link rel=”alternate” type=”application/rss+xml” title=”My RSS Feed” href=”MyRssFeed.xml” />
Conclusion
Generate your feed, link it to your page and then see that little RSS feed button light up on your browser. It’s really pretty cool. With only a little effort you can easily create a feed for your website content. You can also add a link to your feed from within any page content like this:
<a href=” MyRssFeed.xml”>Link to my RSS feed!</a>
Happy feeding!
