RSS Enable Your Website Part 2 - Formatting the Feed
Prologue
In my last posting, I looked at creating an RSS feed for your website. I left off where the feed was created and working properly, but it wasn't very "customer-centric" meaning it looked like code when you visited it, and would be confusing to novices.
Problem
The challenge is to create a "customer-centric" RSS feed that can be read and accessed by people for which this may be their first exposure to RSS. Basically, the difference between these two pictures:
One is just code lookin' stuff to a newbie, and the other gives the newbie all the information they need to find out what RSS is and how to consume this RSS feed... the difference between being and not being 'customer-centric'.
Realistically, the solution is quite easy, it can be implemented by "copy and paste" inheritance (as we used to call it in college). Find it on the internet, and incorporate it into your stuff. The way to do it is using an XSL stylesheet. I referenced it quickly in my last post, but passed over it as we we're concerned with it at the time. Now we'll take a look at it.
What's a stylesheet? One of the cool things about XML, is that it can be easily transformed into pretty much anything else. The power for us is, we can transform the XML that makes up our RSS feed into HTML that the browser can display in a much more 'customer-centric' way, and the source code for the page will still show only XML, not messing up our RSS feed. So let's get started.
Solution
So let's get started. Go ahead and open up the project that we started last time for our RSS feed. Our whole purpose here is to create an XSL stylesheet and to apply that to our RSS feed. We will make one small change to our RSS feed (to incorporate the XSL stylesheet into it) and the rest of our project will be examining our XSL stylesheet. So let's start by getting an existing stylesheet, no sense in reinventing the wheel, we'll find one and just "repurpose it". So to to the top of this blog, and click on the link just under the header image that says RSS 2.0. This will display the RSS feed for this blog, notice that it is 'customer-centric'. Do a view source, and look for the tag that specifies the XSL stylesheet it should look like this:
<?xml-stylesheet type="text/xsl" href="http://aspadvice.com/utility/FeedStylesheets/rss.xsl" media="screen"?>
This gives us a location where we can download a stylesheet that we can then edit to our needs. So copy the URL in the href attribute and paste that into your browser. The result will be an XML document with an XSL extension. To get this into our project, do a view source, then save the result as RSS.XSL. Now you can drag this file into our project and drop it into your Solution Explorer. Realistically, we're almost done, all we need now is to add one line of code to our RSS.aspx page to apply the stylesheet. Add the following line immediately after the objXML.WriteStartDocument() line in your Rss.aspx file:
objXML.WriteProcessingInstruction("xml-stylesheet", _
"type='text/xsl' href='rss.xsl' media='screen'")
What we're doing is adding a processing instruction to your XML document. By doing this, the browser knows when it parses the XML document that it should use this processing instruction as it displays the XML. This instruction is to add a stylesheet, and then just references our Rss.XSL file. Go ahead and run your page and click on one of your links. Viola, a nicely formatted (i.e. 'customer centric') RSS feed.
That would be the end of the story, but apparently, someone did a little more research and found some verbiage that they thought was better than what had I pulled off the net. So I had to make some changes to the XSL sheet to make it conform to our website's demeanor, and to make it REALLY customer-centric, instead of just sorta customer-centric. What I'll do, is kind of run down through the XSL document and point out what's going on and what you can change to modify it to match your requirements.
You'll notice that the stylesheet starts with the following lines:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:dc="http://purl.org/dc/elements/1.1/" version="1.0">
<xsl:output method="xml" />
<xsl:template match="/">
The first line just identifies this as an XML document so that the browser knows how to process it. The second line gives all the namespace information for stylesheets, not sure if it's required for the sheet to work, but I didn't change it. Next, it defines the output of the transformation, in our case, we want XML so that our RSS feed will still work. Finally, we have an xsl:template tag (you'll notice it's end tag, way at the bottom). This instrucucts the parser to do the template information between these xsl:template tags whenever it encounters the root of the XML document. In the template you'll notice that we actually have HTML code:
<html>
<head>
<title><xsl:value-of select="rss/channel/title"/></title>
Our template says, when you hit the root of the xml document, start adding this stuff. We want to create a web page look, not an XML look so it makes sense that we'll start building a page. I won't go through all the HTML, but all the stuff for a web page is there. Now, you'll notice that between the title tags, there's a bit of xsl. This line gets the title from the RSS feed and uses that for page title. Really, we're asking the parser to select the value-of something, then telling it what to select, 'rss/channel/title' the title of the feed. The select statement is what is call xpath. This is the XML query language and tells the parser what to select. I won't cover all the xpath spec stuff, but hopefully ou can see what we're selecting there and how we're selecting it.
Next in our stylesheet, we define a bunch of CSS styles. These will be used to format our feed to match the style of your website. My company colors feature purple a lot, so our styles reflect that in links etc. I did a lot of playing with this to get it where I wanted it, but it's easily changed if you know anything about CSS.
Ok, skip down below the CSS stuff. The HTML continues with a body tag, and creates a div with a description of what RSS is and how it can be used. We actually changed this quite a bit at my company so that it was a little more basic, and included a bit more information. Again, this is straight HTML, and doesn't take much to modify it. Finally, we get down to an open div tag that has an id="content" attribute. If you view our page, this is the point where it starts to display the actual contents of the RSS feed. I actually added a small feature to ours, that isn't in our sample, I added a little section at the very end of the previous div section (inside the div before the id="content" div):
<h1>
This feed:
<span id="rssURL">
<xsl:value-of select="rss/channel/link" />
</span>
</h1>
This displays the current feed's link. This gives the user the exact URL that they'll need to copy to put into their RSS reader. I added a little bit of CSS formatting to it, so it displays like this:
Again, the key element here is the xsl:value-of element, it selects the link element of the channel and displays it. Ok, so back to our <div id="content"> tag, if you look at your RSS feed, you'll see that after the explanation, it lists the items in the feed and provides a link to the articles. By now, you may be starting to see a pattern in how to select values, use the xsl:value-of element and add what you want to select to the select="" attribute. So let's look at the code in the content section:
<h1><xsl:value-of select="rss/channel/title"/></h1>
<ol id="ItemList">
The first two lines are pretty ordinary, we put a title at the beginning, and use our xsl:value-of to pull it, then we start a list. The next line introduces a new element:
<xsl:for-each select="rss/channel/item">
This will iterate through each item element in our channel, much like a for each loop in regular VB code. Next, we'll add a new list item <li> for each item that our RSS feed has. We create a link to the article using the following:
<h4>
<a>
<xsl:attribute name="href">
<xsl:value-of select="link"/>
</xsl:attribute>
<xsl:value-of select="title"/>
</a>
</h4>
Basically, inside our H4 tag, we create a link <a> and then instruct our xsl to add an attribute to the tag, namely the href attribute to our <a> tag. The href should use the link element that our item element has. Notice that since we've selected the individual item using the for each, we don't need to fully qualify our select (i.e. rss/channel etc.). Then after our close xsl:attribute, we add the text of the link, which is the title of the item.
Next we have a section with some details about the item, namely when it was published and who created it:
<div class="ItemListItemDetails">
Published <xsl:value-of select="pubDate"/>
by <xsl:value-of select="dc:creator" />
</div>
You'll notice when you view the page, that we haven't populated the creator, so it comes blank, but you can add that into your code on the RSS.aspx page if you so desire. Nothing new in this section, we've used xsl:value-of already. Finally, we just finish up the end tags for everything and call it good. I won't post the entirety of the code for our stylesheet, it's kind of long for a blog, but hopefully you've got a decent idea now of how to customize the stylesheet to make the feed 'customer-centric'.
Epilogue
Well, that did the trick, it became much more 'customer-centric'. I did get a finger waggling for making unauthorized changes to the website, and had to run the copy through marketing to make sure that we got all our i's dotted and t's crossed. All in all, it was a fun project, and hopefully will get me that good review come next year.