Subscribe to CrazyLeaf Design Blog and join our other

Tutorial: How to implement a complete RSS feed and your favorite news feed links in your site?

by Alex
Posted in Programming, Tutorials on November 15th, 2008

In this tutorial, I will present how to make a new RSS feed in your site. I’ll explain the implementation issues, with different options (from easy or no coding t hard coding, etc) to perform the implementation. It is designed for ay people- non-programmers to programmers to design a RSS feed.

Ok, first I’ll present the big picture of the desired RSS feed.

A) Big Picture : First I’ll show what I want to make. The overall view is essential to present the RSS look-and-feel to your boss or administrator before doing any coding.

One ‘RSS’ button should make a link from one of your source page. Clicking on that button, the following page should appear.

Figure 1: Main view of the desired RSS feed

Now I will explain how to start coding. Before coding, two easy solutions are there that you can take into account. Start reading.

B) Easy solutions (mainly for non-programmers):

From the administrative point of view, you can do either of the following two things :

Buy or ask for a RSS component to your web-design companies. Most web-design companies use CMS (content management systems) to make your site. And almost all CMS has plugins or extensions of RSS ready to be used in a site. It is just a matter of enabling the option into your site without almost any coding from your website designers. So don’t miss the chance asking them to enable that option!
There are many free web-companies to prepare a RSS feed for your company. What you need to do is as follows: a) Make a XML RSS feed like Part C of this tutorial below, and b) link your prepared XML RSS feed from that web-company. Prior this operation you need to register. It is also simple, isn’t it?

However, if you want to program, keep on reading. I’ll touch every options to make your RSS workable and efficient.

C) Main RSS feed (The XML one!)

The left part of Figure 1 is actually the main RSS feed to be used in a website. It’s a XML file that Internet Explorer and many others can read and parse and present accordingly (with subscription link as well).

Tools like ‘Feed editor’ (need to be activated after a period), RSSEditor (free), etc can be used to make a RSS feed (xml file). You’ll put that xml file into your site and it works fine. However, you need to validate RSS feed using a plugin of those tools (if available) or different free validator around the web. You can get many such validators after doing a little searching in the web.

RSS Feed (test2.xml)

[-]^?View Code XML

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
	<channel>
 
	<pubDate>13 Nov 2008 11:33:23 GMT</pubDate>
	<title>SACARs Articles</title>
	<description>Sa cars articles presented regularly</description>
	<link>www.sacars.com.au</link>
	<docs>http://blogs.law.harvard.edu/tech/rss</docs>
	<ttl>1440</ttl>
	<item>
	<title>New google map </title>
	<description>New google map showing all 13 service stationms of SACAR has been uploaded. (c) Manzur Ashraf</description>
	<pubDate>13 Nov 2008 20:14:47 GMT</pubDate>
	<link>http://www.sacars.com.au</link>
	<guid isPermaLink="false">99AC223C-729D-4B14-8A53-67187F24EA79</guid>
	</item>
	<item>
	<title>New FORD arrivales</title>
	<description>&lt;P&gt;Hello This is a test&lt;/P&gt;&lt;P&gt;By Mark Conway!&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
	<pubDate>13 Nov 2008 19:39:35 GMT </pubDate>
	<link>www.sacars.com.au/assets/157/t2.html</link>
	</item>
	<item>
	<title>SEO article</title>
	<description>&lt;P&gt;This is a test by manzur&lt;/P&gt;</description>
	<pubDate>13 Nov 2008 19:39:38 GMT </pubDate>
	<link>www.sacars.com.au/assets/157/tt.html</link>
	</item>
	</channel></rss>

C.1) Rendering XML rss feed into html :

There are a number of options to render your XML feed using any server sided script (ASP,PHP, etc) or using Javascript.

There a number of free website tools (e.g. http://www.rss-to-javascript.com/) which can generate Javascript from your XML urls. You can directly put their generated javascript into your HTML page and can show the RSS view according to customized design. It is very easy to use. However, there might be some limitations, e.g. you might need to show their advertisements in your pages automatically.

However, if you want to code your own tool to view/render a XML page, you can use script like below. It is simply parsing a XML file from a URL (using URLToRSS) and present it using ASP scripts. You can also add CSS along with it to customize the design and look-and-feel of it.

File : asp_to_render_rss.asp

[-]^?View Code ASP

<%
Response.Expires = -1
URLToRSS = "http://feeds.feedburner.com/Bytescout"
MaxNumberOfItems = 7
MainTemplateHeader = "<table>"
MainTemplateFooter = "</table>"
 
 
Keyword1 = "" ' Keyword1 = "tech" - set non-empty keyword value to filter by this keyword
Keyword2 = "" ' Keyword1 = "win" - set non-empty keyword value to filter by this 2nd keyword too
 
' ##### {LINK} will be replaced with item link
' ##### {TITLE} will be replaced with item title
' ##### {DESCRIPTION} will be replaced with item description
' ##### {DATE} will be replaced with item date and time
' ##### {COMMENTSLINK} will be replaced with link to comments (if you use RSS feed from blog)
' ##### {CATEGORY} will be replaced with item category
ItemTemplate = "<tr><td><strong>{DATE}</strong><br/><strong>{CATEGORY}<br/></strong><a href=" & """{LINK}""" & ">{TITLE}</a><BR>{DESCRIPTION}</td></tr>"
' ##### Error message that will be displayed if not items etc
ErrorMessage = "Error has occured while trying to process " &URLToRSS & "<BR>Please contact web-master"
' ================================================
Set xmlHttp = Server.CreateObject("MSXML2.ServerXMLHTTP.3.0")
xmlHttp.Open "GET", URLToRSS, false
xmlHttp.Send()
RSSXML = xmlHttp.ResponseText
Set xmlDOM = Server.CreateObject("MSXML2.DomDocument.3.0")
xmlDOM.async = False
xmlDOM.validateOnParse = False
xmlDom.resolveExternals = False
If not xmlDOM.LoadXml(RSSXML) Then
ErrorMessage = "Can not load XML:" & vbCRLF & xmlDOM.parseError.reason & vbCRLF & ErrorMessage
End If
Set xmlHttp = Nothing ' clear HTTP object
Set RSSItems = xmlDOM.getElementsByTagName("item") ' collect all "items" from downloaded RSS
RSSItemsCount = RSSItems.Length-1
' if not <item>..</item> entries, then try to get <entry>..</entry>
if RSSItemsCount = -1 Then
Set RSSItems = xmlDOM.getElementsByTagName("entry") ' collect all "entry" (atom format) from downloaded RSS
RSSItemsCount = RSSItems.Length-1
End If
Set xmlDOM = Nothing ' clear XML
 
' writing Header
if RSSItemsCount > 0 then
Response.Write MainTemplateHeader
End If
j = -1
For i = 0 To RSSItemsCount
Set RSSItem = RSSItems.Item(i)
' fix for the issue when a description from a previous item 
' is used if current item description is empty provided by George Sexton
RSSdescription="&nbsp;" 
RSSCommentsLink="&nbsp;"
for each child in RSSItem.childNodes
Select case lcase(child.nodeName)
case "title"
RSStitle = child.text
case "link"
If child.Attributes.length>0 Then
RSSLink = child.GetAttribute("href")
if (RSSLink <> "") Then
if child.GetAttribute("rel") <> "alternate" Then
RSSLink = ""
End If
End If
End If ' if has attributes
If RSSLink = "" Then
RSSlink = child.text
End If
case "description"
RSSdescription = child.text
case "content" ' atom format
RSSdescription = child.text
case "published"' atom format
RSSDate = child.text
case "pubdate"
RSSDate = child.text
case "comments"
RSSCommentsLink = child.text
case "category"
Set CategoryItems = RSSItem.getElementsByTagName("category")
RSSCategory = ""
for each categoryitem in CategoryItems
if RSSCategory <> "" Then
RSSCategory = RSSCategory & ", "
End If
RSSCategory = RSSCategory & categoryitem.text
Next
End Select
next
' now check filter
If (InStr(RSSTitle,Keyword1)>0) or (InStr(RSSTitle,Keyword2)>0) or (InStr(RSSDescription,Keyword1)>0) or (InStr(RSSDescription,Keyword2)>0) then
j = J+1
if J<MaxNumberOfItems then
ItemContent = Replace(ItemTemplate,"{LINK}",RSSlink)
ItemContent = Replace(ItemContent,"{TITLE}",RSSTitle)
ItemContent = Replace(ItemContent,"{DATE}",RSSDate)
ItemContent = Replace(ItemContent,"{COMMENTSLINK}",RSSCommentsLink)
ItemContent = Replace(ItemContent,"{CATEGORY}",RSSCategory)
Response.Write Replace(ItemContent,"{DESCRIPTION}",RSSDescription)
ItemContent = ""
RSSLink = ""
End if
End If
Next
' writing Footer
if RSSItemsCount > 0 then
Response.Write MainTemplateFooter
else
Response.Write ErrorMessage
End If
' Response.End ' uncomment this for use in on-the-fly output
%>

D) Right Part (Use of APIs)

The right part is optional but improves the overall visibility and accessibility of the site. You can import your favorite and relevant RSS feed news from different URLs and put in your website. It represents an animated news feed and increases the potentiality of your site.

The right frame is done using Google API and Javascript to render three ‘rss feed’ locations (web address). Feed control and css are accomplished by appropriate javascripts from Google. You can get more functions from http://groups-beta.google.com/group/Google-AJAX-Search-API. Its a cool site to explore.

File : rss-google.html

[-]^?View Code HTML

<div id="feed-control">
    <span style="color:#676767font-size:11pxmargin:10pxpadding:4px">Loading...</span>
  </div>
 
  <!-- Google Ajax Api
  -->
  <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
    type="text/javascript"></script>
 
  <!-- Dynamic Feed Control and Stylesheet -->
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css")
  </style>
 
<script type="text/javascript">
    function LoadDynamicFeedControl() {
      var feeds = [
	{title: 'Auto Trader',
	 url: 'http://rss.autotrader.co.uk/feed/autotrader/news'
	},
	{title: 'Carsales',
	 url: 'http://automotive.einnews.com/rss/archive/car_sales'
	},
	{title: 'Sacars',
	 url: 'http://feeds.feedburner.com/Sacar'
	}]
      var options = {
        stacked : true,
        horizontal : false,
        title : "News from top automotive industries"
      }
 
      new GFdynamicFeedControl(feeds, 'feed-control', options)
    }
    // Load the feeds API and set the onload callback.
    google.load('feeds', '1')
    google.setOnLoadCallback(LoadDynamicFeedControl)
  </script>

Now both those pages (one is XML, another is html) can be linked together using a frame based html page like below.

File : two_links.html

[-]^?View Code HTML

<html>
<HEAD>
<TITLE>Frames Example 5</TITLE>
</HEAD>
<FRAMESET cols="75%,25%">
<FRAME SRC="http://www.sacars.com.au/assets/157/files/test2.xml" name="left_frame">
<FRAME SRC="http://www.sacars.com.au/assets/157/files/rss_google.html" name="right_frame">
</FRAMESET>
</HTML>

Hope it covers the basic implementation issues of the proposed RSS feed in your website.
Don’t miss to look at detailed options presented in this tutorial. You can suggest me with any ideas or comments.
Happy coding!

About the author

Author : Manzur Ashraf
Website : http://www.geocities.com/manzur_bd/
For any questions regarding this tutorial you can contact the author here.

You might also like these similar articles:

If you enjoyed this article please consider joining our other

Share this article

Got something to say ?Leave a comment

Andrew Kelsall
November 15, 2008 at 10:14 pm

Great post, but glaring typo “…make a new RSS feed in your ite”, I think you mean SITE
Andrew Kelsall
November 15, 2008 at 10:18 pm

Also, “You need to a registration prior to perform this operation”, hmmm.
Alex
November 16, 2008 at 3:02 am

Sorry about the typos. I’ll make the necessary modifications to the author’s text
Andrew Kelsall
November 16, 2008 at 11:08 pm

No Worries
James
November 19, 2008 at 5:27 am

Good intro to RSS. You may also checkout Feedity - http://feedity.com to create RSS feeds instantly from any webpage. It’s a nice and simple tool for generating RSS.

Add a commentGet a Gravatar

Tutorial: How to implement a complete RSS feed and your favorite news feed links in your site?

Related posts

Trackbacks

Popular Articles