Demo of the Same CA.gov Portal Highlights being displayed utilizing only Javascript

This feed display is accomplished by utilizing the "Buzzboost" function of the FeedBurner service. But note: if the browser has scripting turned off, you will not see this display, and, this Javascript based display is not accessible with most assistive technologies.

Subscribe to RSS headline updates from:
Powered by FeedBurner

Right Column

RSS Feed Displayed in a Webpage

There are ways to display RSS feed information directly from your RSS feed file and on to your own webpage as fully accessible HTML. If you have a Content Management System (CMS) they typically have this functionality "built in", otherwise there are still other options:

• MS Windows/ASP Scripting Enabled - If you do not have a CMS with this functionality, you can use the Department of Technology’s service for free (see this capability demonstrated at the top left of this page). Information about installing it on your own server is provided below.
• Non-Windows/ASP - If you cannot do ASP on your server, or you do not utilize Windows servers, there are numerous other server-side solutions available that you can install on your own server identified within the following article on the Web: RSS To HTML - How To Convert RSS Feeds Into Published Web Pages - A Mini-Guide

Directions On How To Install the DTS RSS-to-HTML ASP script

Download the RSS2HTML package zip file for installing into your server. It is made up of the following:

• rss2html.asp - This is the main ASP script. You must have ASP scripting turned on in your Windows server for this to work
• xmlfeed.js - This is the javascript file used to customize the display of the feed information. Note: You do not have to use this javascript file to display the feed information, only to customize the formatting of the display. More on this later...
• feed_std.css - All key feed elements have a css configurable equalivant so that you can customize the display to fit with your website.
• rss1.0.xsl - Feeds come in different industry standard XML formats. To deal with these different formats, the RSS2HTML.asp script utilizes xsl style sheet files to parse the different feed formats into the appropriate HTML elements for display.
• rss2.0.xsl - This is the most common feed format utilized today on the Web
• atom1.0.xsl - This is a feed format that is also highly used.

You can install the RSS2HTML script on the same server as your website server, or install it separately as a single service that is called from multiple website servers. In either case, the xsl style sheet files should be installed on the same server as the RSS2HTML script.

The xmlfeed.js script and the feed_std.css files are served up to the client browser and should be installed in the appropriate directories of the webserver that serves the webpage.

Directions On How To Embed a Feed Into Your Webpage Using the DTS RSS-to-HTML ASP script

There are a couple of configurations necessary to make the RSS2HTML script work. First there are "webpage" general configurations, and secondly there is the actual "call method" where you embed the specific output of a feed. (Note: You can actually look at the source code for this page to view these same configurations at work.)

Webpage level configurations:

1. First you must load the necessary javascript file and javascript variable configurations for the script to work.

<script type="text/javascript" src="/multimedia/javascript/xmlfeed.js"></script>

<script type="text/javascript">
<!--
formatXMLFeed.defaultDescriptionLength = 120; // Specify the default description length. Enter "-1" to display complete description.
formatXMLFeed.boolCleanupYouTube = true; // clean up YouTube feeds?
formatXMLFeed.boolCleanupDates = true; // clean up dates?

addLoadEvent(formatXMLFeed.initialize);
// -->
</script>


Note the xmlfeed.js is loaded, and then the following variables are initialized:

• formatXMLFeed.defaultDescriptionLength - Every feed item has a title and description. This sets the length of the descriptions in the feed page outputs. If you only want to show feed titles, set this value to 0.
• formatXMLFeed.boolCleanupYouTube - If you want to display a feed output from yours or someone else's YouTube channel, this variable cleans up the feed output so that it displays the video thumbnail images within the feed in a cleaner manner.
• formatXMLFeed.boolCleanupDates - if the feed items have dates, this will cause them to format cleaner in the output.

Additionally, you must include the following code to the webpage so that the "call" to the rss2html script will execute:

<!-- code included to enable the ability to include the RSStoHTML embeds -->
<%
Sub IncludeUrl(URL)
  Dim http
  Set http = CreateObject("Microsoft.XmlHttp")
  http.open "GET", URL, FALSE
  http.send ""
  Response.Write http.responseText
  Set http = Nothing
End Sub
%>
<!-- End necessary RSStoHTML include code -->


Don't forget, you also need to be sure to import your special css configurations for the feed output by importing the feed_std.css file.

Embedding the the "call method" for each feed you want to embed into your webpage:

Finally you must properly embed the call to the RSS2HTML script so that it can process and embed your specific feed output into your webpage as HTML. The method of calling the script is as follows: (Note: The the "call" script here, for display purposes, is split up into four lines. For it to work, the four lines must be one line, or the call will fail. See the source code for this page for an actual example of the appropriate format of the call.)

<%
call IncludeUrl("http://department.ca.gov/rss2html.asp
?xml=http://feeds.feedburner.com/StateOfCaliforniaPortalHighlights
&xsl=http://department.ca.gov/rss2.0.xsl
&numitems=3")
%>


Note the following 4 parameters in the call:

• The first one: http://department.ca.gov/rss2html.asp is the URL to the script itself
• The second one: ?xml=http://feeds.feedburner.com/StateOfCaliforniaPortalHighlights lets the script know what feed to process, consequently it is a fully qualified URL to where the feed can be obtained.
• The third one: &xsl=http://department.ca.gov/rss2.0.xsl tells the script what XSL file to use to parse the feed with. This must reflect the actual format of the feed which will be either: rss1.0, rss2.0, or atom1.0
• The final parameter: &numitems=3 tells the script how many items from the feed to show. Feeds typically will contain anywhere from 10 to 20 items. It is not likely that you will want to display that many on your webpage. The script will always show the most recent ones within the feed.

Note: If you want to display a YouTube feed, you must "wrap" the call with a div class tag equal to "youtube_feed" so that the proper css formatting gets applied to the feed. See the source code for this page where it calls in the YouTube feed.