How Feed.Us uses XHTML, XML, CSS, and XSLT to deliver your content

By John Welborn, Feed.Us CTO/Founder

The thing that makes Feed.Us Templating so special, is that it isn't.  We didn't cook up some home grown solution to allow you to customize your layout, and content display, we used W3C standards like XML, XSLT, XHTML AND CSS.   The benefit is that if you have to learn something new, it might as well be a universal standard, not something that only applies to the particular CMS you're on.

So how do you launch a site with Feed.Us?

1.You get your domain.  Hopefully My-Favorite-Website-About-My-Favorite-Topics.com is still available.

2.You choose a host for your domain... maybe even where you registered it.

3.Go into your control panel and create a folder called CachedWebContent and give write permissions on that folder. (this process varies by provider, but it's usually done througha "file manager" type application.)

4.You design your site and convert it to XHTML, or you select a template from some site (we like FreeCssTemplates.org)

5.You create an account @ feed.us and punch in a few articles (or import from email, metaweblog or RSS).

6.We store your content in an RDMS (SQL Server, in this case) and when you request it, we return it to you as XML.

7.You use our HTML export tool to choose which content you want to export and how.  The tool allows you to select a the specific content you want (like everything in a category, or a date range, or a specific story, etc), a layout (we have lots of templates, or you can EASILY modify / make your own), and the target server platform (ASP, PHP, etc..) you'll be putting the content on.

8.You paste a couple lines of code onto your page, not unlike adding a javascript widget but this is serverside.

9.Sit back, relax, and let the visitors come rolling in!

Ok... so how do you customize the layout.  Well that's the beauty of it.  You use XSLT which is the W3C standard for transforming XML into whatever format you choose, be that HTML or XML, or something else you cook up on your own.  Here's a sample.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" encoding="utf-8" standalone="yes" omit-xml-declaration="yes"/>
    <xsl:template match="/">
        <xsl:apply-templates select="//ContentItem" />   
    </xsl:template>
   
    <xsl:template match="ContentItem">
        <div class="contentItem">
            <xsl:if test="Title != ''">
                <div class="contentTitle">
                    <h3><span><xsl:value-of select="Title"/></span></h3>
                </div>
            </xsl:if>
            <div class="contentItemBody"><xsl:value-of select="Body" disable-output-escaping="yes"/></div>
        </div>
    </xsl:template>
</xsl:stylesheet>

The first two lines are two explain that this is an XSL file and that it's going to output HMTL. Kind of boring.  Like the <HTML> element.

Then you get to the more interesting stuff.  This next section will appear in most all of your custom XSL sheets. 

    <xsl:template match="/">
        <xsl:apply-templates select="//ContentItem" />   
    </xsl:template>

This tells the XSLT document to match the root element of the XML source, and apply the templates to the ContentItem elements.

Just below you see the actual template where all the magic happens.

    <xsl:template match="ContentItem">
        <div class="contentItem">
            <xsl:if test="Title != ''">
                <div class="contentTitle">
                    <h3><span><xsl:value-of select="Title"/></span></h3>
                </div>
            </xsl:if>
            <div class="contentItemBody"><xsl:value-of select="Body" disable-output-escaping="yes"/></div>
        </div>
    </xsl:template>

The first line says to match a ContentItem element from the source XML (each article is a ContentItem) (view the XML source for this article)

Then there's a test to see if the Title element is defined.  If it is, then you output a DIV tag with a class of contentTitle, and inside you render an H3 tag surrounding a SPAN and finally then actual Title field from the XML.  Then we close out the DIV and the IF statement and move on to the body where we have a DIV with a class of contentItemBody surrounding the BODY from the XML.

The point, is that you can see how easy it would be to change the template.  You could change the class of the div to whatever you like, you could change the H3 to whatever you like, you can add or remove any tags of fields as you see fit.  XSL is a very powerful language, and since it's a standard, there's help available all over the place!  Just google it.

Now you say, "Yeah yeah, but how does that get onto my page?"  Easy there friend, I'm just getting to that.  Now you've customized out XSL to have the fields you want and the tags that you need to match the design.  Copy your template page and name it, to say 'about.php'.  Depending on your hosting platform you may be using PHP, ASP, ASP.NET, or JSP.  So your file would be named accordingly, and you replace the stock filler text with the couple of lines of code that you get from our HTML export tool.   Which will look something like this.

<?php $FeedUsURL = "http://stage.render.feed.us/Feed.aspx?xp=2&id=202196&xs=New-Title-Body&l=login&pNames=&pValues=&a=0&f=399&q=&pCO=&pCN=&pCV=&COB=Start+Desc&CNI="; ?>
<?php include("FeedUsGrabber.php"); ?>

 It looks a little intimidating, but you don't need to understand it.  Just paste it in there in place of that Lorem Ipsum nonsense.  The next time you load the page, the FeedUsGrabber checks to see if it has your content cached locally (That's what the CachedWebContent folder is for) and if it doesn't it makes a server side AJAX request to our server to grab it.  Part of that big long string is what tells us which content to grab, it could be a singe story, or a category, or a date range, etc. and that gets fed into the XSL we created above (also part of the big FeedUsURL).  Feed.Us returns just the html of your request and saves it into a file on your server so it's lightning fast on the next request.

So when a web browser sends a request to your server it gets back an HTML page.  Then it uses your css to style it. 

The end result, is that you make Feed.US fit your design, not the other way around.  You can quickly modify our stock XSL templates to use the tags and classes defined in your CSS / XHTML design.

What do you think?  Any questions?  Email me at John [a t] feed dot us.