Say Hello to Symphony
In this "Hello World" follow-up, we build out a full-featured site, with front-end submission, an RSS feed, Twitter integration, and more.
Step 7. Create an RSS Feed
Now that your website's visitors can submit greetings from the front end, you'll probably want to keep track of new greetings as they come in. An RSS feed would do the trick. Symphony allows you to output anything you want with your pages: XHTML, XML, even JavaScript or CSS. Here we'll set up a page that outputs RSS-formatted XML, ready to be consumed by your favorite feed reader.
7.1. Create a Data Source for your Feed
First, we'll need to create a data source that will deliver the entries we need for our RSS feed. Go to Blueprints > Data Sources and click the green Create New button. We'll Name our new data source Greetings Feed
, and select "Greetings" as its Source. We don't need to filter it, but let's set it to Sort By our "Date" field. The rest of the defaults are fine, so let's select our output elements:
- greeting-title
- greeting-content: formatted
- date
- language
Now, because this is going to be pure XML output, let's tick "HTML-encode text". This will escape any HTML elements that aren't allowed in an RSS feed.
7.2. Create your Feeds Page
Go to Blueprints > Pages and click the green Create New button. We'll Title our page Feed
and give it a URL Handle of feed
. For Page Type, click both "XML" and "hidden". Attach the "Greetings Feed" data source and click the Create button.
Now, if you visit the new feed page's debug interface (http://your-site.com/feed?debug
), you'll see our data source's output. Notice that instead of outputting <p>
tags in the greeting content, it gives us the escaped equivalent: <p>
.
Go back to Blueprints > Pages and in the Template column click "feed.xsl". Since we want pure XML output, this page won't use our master template. We can start with the default template Symphony's generated for us.
First thing we want to do is include our date-time utility to help us output valid RFC-822 date-times. After the <xsl:output>
element and before the <xsl:template>
, add:
<xsl:include href="../utilities/date-time.xsl"/>
Now, inside the <xsl:template>
element, paste the following:
<rss version="2.0">
<channel>
<title><xsl:value-of select="$website-name"/></title>
<link><xsl:value-of select="$root"/></link>
<description>All your greetings are belong to us</description>
<generator>Symphony</generator>
</channel>
</rss>
This is the skeleton of an RSS feed. We use the Symphony system parameters $website-name
and $root
to populate the <title>
and <link>
elements.
Now, what we've done elsewhere in this tutorial is use <xsl:apply-templates>
along with matching templates to iterate over entries. We'll take this opportunity to demonstrate an alternative method, using <xsl:for-each>
. After the <generator>
element, but still inside the <channel>
element, add the following:
<xsl:for-each select="data/greetings-feed/entry">
<item>
<title><xsl:value-of select="greeting-title"/></title>
<link><xsl:value-of select="$root"/>/greetings/<xsl:value-of select="greeting-title/@handle"/></link>
<description><xsl:value-of select="greeting-content"/></description>
<pubDate>
<xsl:call-template name="format-date">
<xsl:with-param name="date" select="date"/>
<xsl:with-param name="format" select="'w, d m Y T'"/>
</xsl:call-template>
<xsl:text>:00 </xsl:text>
<xsl:value-of select="translate($timezone,':','')"/>
</pubDate>
<guid><xsl:value-of select="$root"/>/greetings/<xsl:value-of select="greeting-title/@handle"/></guid>
</item>
</xsl:for-each>
For each entry in the greetings-feed XML being returned by our data source, we're outputting an RSS <item>
element with all its requisite children. Most of this should look fairly familiar to you by now, since we've used similar code elsewhere in the tutorial. You'll notice we had to do a bit more finagling of the date format to get it to comply with the RSS spec. Don't worry too much about the details there. Here's the final page template.
Save your changes and point your browser to http://your-site.com/feed
and your RSS feed should be displayed. If your browser doesn't display the XML directly, you can always go to http://your-site.com/feed/?debug=result
to verify the output. It should look something like this:
7.3. Apply some Finishing Touches
Create a folder in your workspace called /images
. Then grab this feed icon and save it in the new directory. Go to Blueprints > Utilities and click on "master.xsl".
In the <head>
of our template, after the CSS <link>
, add:
<link rel="alternate" href="{$root}/feed" title="Greetings Feed" type="application/rss+xml" />
And in the <body>
, after the <h1>
and <h5>
, add:
<a href="{$root}/feed" id="feed"><img src="{$workspace}/images/feed-icon-28x28.png" alt="Feed Icon"/></a>
Save your changes and head back to your front end. Your browser should now recognize that there's a feed available on the site, and the spiffy little feed icon should be added to your layout.