in ,

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

Hey! You might want to try out Smartmockups app, an easy to use tool to design good photo and mockups without using Photoshop complex interface.
*** Remember to Use CL Design Coupon Code to claim your discount !
Coupon Code : CRAZYLEAF10

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.

Desired RSS Feed
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)



	
	
	13 Nov 2008 11:33:23 GMT
	SACARs Articles
	Sa cars articles presented regularly
	www.sacars.com.au
	http://blogs.law.harvard.edu/tech/rss
	1440
	
	New google map 
	New google map showing all 13 service stationms of SACAR has been uploaded. (c) Manzur Ashraf
	13 Nov 2008 20:14:47 GMT
	http://www.sacars.com.au
	99AC223C-729D-4B14-8A53-67187F24EA79
	
	
	New FORD arrivales
	<P>Hello This is a test</P><P>By Mark Conway!</P><P>&nbsp;</P>
	13 Nov 2008 19:39:35 GMT 
	www.sacars.com.au/assets/157/t2.html
	
	
	SEO article
	<P>This is a test by manzur</P>
	13 Nov 2008 19:39:38 GMT 
	www.sacars.com.au/assets/157/tt.html
	
	

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

<%
Response.Expires = -1
URLToRSS = "http://feeds.feedburner.com/Bytescout"
MaxNumberOfItems = 7
MainTemplateHeader = ""
MainTemplateFooter = "
" 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 = "{DATE}
{CATEGORY}
{TITLE}
{DESCRIPTION}" ' ##### Error message that will be displayed if not items etc ErrorMessage = "Error has occured while trying to process " &URLToRSS & "
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 .. entries, then try to get .. 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=" " RSSCommentsLink=" " 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 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.

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

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!

© Manzur Ashraf, Adtrans Ltd, SA 5081, Australia.

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.


Follow us on Twitter @crazyleaf.

5 Comments

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

41 websites to promote your design articles and resources

Add live search to your website