back

Add dynamic content to your site with RSS
and ColdFusion

by Brian Rinaldi

A beautifully designed web site with an easy-to-read layout can make a solid first impression and establish credibility with your visitor, but ultimately it's the content that keeps visitors coming back. Unfortunately, maintaining a steady stream of new and updated content takes work, and the hardest part is the content creation. However, adding or updating the site’s HTML pages is definitely a close second. Tools like Dreamweaver® and Contribute® can help ease this burden, but there is no replacement for dynamic, database-driven content — particularly when it comes to features like news, links, and images.

The simplicity of the ColdFusion® markup language (CFML) removes some of the barriers to creating database-driven content, but building the database as well as the content administration tools with the necessary security can be both difficult and time-consuming. As a ColdFusion developer for eight years, I have built countless variations of these types of tools for a variety of employers and clients. Experience can mitigate the complexity but won’t make the job less time-consuming.

The average developer or designer who has limited time and clients with limited budgets can encounter several dilemmas on most projects:

Not only does a solution to all these dilemmas exist, but it requires only a basic knowledge of ColdFusion and a limited understanding of RSS. If you don't already own ColdFusion, download a free 30-day trial.

RSS is an XML-based syndication format that is in use on sites like Google's Blogger for blog content (such as news), Yahoo's Flickr for images, and del.icio.us for links. By utilizing RSS and a sprinkle of ColdFusion, you can integrate the content you create and maintain through the prebuilt, feature-rich tools from some of the most notable companies on the Internet — sites you or your clients may already use. And there’s no need to mess with a database.

Setting up your accounts

First, you need accounts at Blogger, which uses your Google account, Flickr, which uses your Yahoo account, and del.icio.us. Currently these accounts are free although some restrictions apply. (For instance, Flickr has a monthly upload limit for free accounts.) You are not limited to choosing these specific sites; they are simply the ones I use and have chosen to cover for this article. You can choose any comparable site that you know or use, as long as the content is accessible via RSS. No matter what site you use, please be sure that your usage falls within the requirements of your user agreement.

Once you have set up accounts, you can start adding content to them for your site. I recommend using a tagging scheme to help determine where your content should go within your site. This enables you to maintain differing content for various sections of your site using the same accounts within each service, which I explain in more detail later. For example, my sample has only a homepage, so I have created a tag in each of these sites called "HomePage." I recommend keeping this name the same for consistency.

Locating the RSS feeds

Strangely, I have found that one of the trickiest parts of developing this solution is locating the proper RSS feeds — notably on Blogger and Flickr. While the generic feed is easy to find, this feed makes it tricky to filter content. As discussed, filtering enables you to supply content to any number of sections of your site. For example, blog articles tagged HomePage show up on the homepage, and articles tagged "AboutUs" show up on the About Us page. After searching the sites, I found the proper RSS URLs for each site (items inside brackets should be customized):

Here are some notes about the Flickr URL. First, you can determine your ID easily by the URL of the Your Photos page for your account. The URL format for that is www.flickr.com/photos/[your id]. For example, mine is www.flickr.com/photos/74682459@N00, and thus my ID is 74682459@N00. Also I recommend using the atom feed. Atom is simply an alternative syndication format similar to RSS.

Reading the RSS using ColdFusion and RSSCFC

Since RSS is a standard XML format, and reading XML with ColdFusion is a straightforward process, you can read these RSS feeds in as a ColdFusion XML object and parse through the structure. You may be thinking that this doesn't sound easy — and you’re right. Luckily, Raymond Camden, ColdFusion's most prolific open-source developer, has created a ColdFusion component (CFC) that handles the complexity of parsing the RSS (and atom) syndication format passed by a URL and returns a standard query. You can download the RSS CFC at RIAforge.org.

First, unzip and place the component into a folder under the root of your site called "com." This isn't required to use the component, but it is a standard place to keep your application's components. Components are referenced with a dot notation path instead of a standard file system path and with no file extensions. In this case, you would reference the file /com/rss.cfc as com.rss when calling it within your code. The function within the component that you need is called getEntries, and it requires only the URL as an argument. Thus, your calls for the homepage feeds for the three sites would look like this:

<!--- get blogger content --->
<cfinvoke component="com.rss" method="getEntries" returnvariable="content" xmlData="http://remotesynth.blogspot.com/feeds/posts/summary/-/HomePage" />
<!--- get del.icio.us links --->
<cfinvoke component="com.rss" method="getEntries" returnvariable="links" xmlData="http://del.icio.us/rss/remotesynth/HomePage" />
<!--- get flickr pics --->
<cfinvoke component="com.rss" method="getEntries" returnvariable="pics" xmlData="http://api.flickr.com/services/feeds/photos_public.gne?id=74682459@N00&tags=HomePage&format=atom" />
	

Now you have three queries to work with: content, links, and pics as specified in the returnvariable attribute of the cfinvoke tags. You can use the cfdump tag to view the contents of the queries by entering the following line in your code and running the page:

<cfdump var="#content#">

Outputting the content on your page

Since I am not a designer, I have pulled my sample layout from openwebdesign.org to demonstrate how to integrate this content into an actual page design. You can loop through a ColdFusion query object using the cfoutput tag with the query attribute set to your query name. You can then simply access the query data via the column names (surrounded by the standard ColdFusion pound signs). In this case, the column names are title, description, link, and date. Lastly, keeping in mind that the query could return any number of items in each particular feed, use the maxrows attribute of the cfoutput tag to ensure that you show only as many items as your layout can accommodate. For example, my main content item is pulled from my Blogger blog's HomePage category, but I only want to display a single item:

	<cfoutput query="content" maxrows="1">
    <div class="left_articles">
        <div class="buttons"><p><a href="#link#" class="bluebtn">Read</a></p></div>
        <div class="calendar"><p>#ucase(left(monthAsString(month(listfirst(date,"T"))),3))#<br />#day(listfirst(date,"T"))#</p></div>
        <h2><a href="#link#">#title#</a></h2>
        <p class="description"> </p>
        <p><img src="#replace(pics.enclosure,'_o','_s')#" class="thumbnail" alt="thumbnail" />#description#</p>
    </div>
	</cfoutput>
	

If you read that code carefully, you’ll notice I threw in a couple of curve balls. First, you may be asking yourself about line 5 in the calendar div where I output the date. The date/time returned by Blogger’s RSS in this case is in the format 2007-02-03T13:09:00.000-08:00. The listFirst() function in this case just strips the date portion from the time, enabling me to use standard ColdFusion date functions like month() to get the month and day() to get the day. The rest of this line simply uses some ColdFusion functions to format the appearance to suit the design I chose.

You may also be wondering about the contents of the image tag. In this case, I skipped ahead a bit because that code is outputting the image from the enclosure field in the first row of the Flickr query (remember it was called "pics"). The enclosure actually contains the URL of the full size image on Flickr, but in this case, I want the thumbnail. Thankfully, Flickr has a standardized naming format that you can use to pull the thumbnail: simply replace the _o with _s in the image name.

Aside from those things, you can see the cfoutput tag outputting one row of the content query, and within that, I output #link#, #title#, and #description# to display the content of the Blogger post within my site.

This is all you need to understand what is required to display RSS content on your page. Let's look at the output of the del.icio.us RSS, which offers a much more basic example:

	<cfoutput query="links" maxrows="2">
    <div class="boxtop"></div>
    <div class="box">
    <p><img src="images/image.gif" alt="Image" title="Image" class="image" /><b>#title#</b><br />#description#<br /></p>
    <div class="buttons"><p><a href="#link#" class="bluebtn"> Visit</a></p></div>
    </div>
	</cfoutput>
	

Conclusion

Now that you've seen how easily you can pull RSS content into your homepage, all you need to do to add dynamic content to any page on your site is simply change the URL to the appropriate feed in the cfinvoke tags. You can even expand this technique, for instance, by using the del.icio.us Firefox plug-in to quickly add links you find to your site or by using a browser like Flock, which offers built-in tools for editing your blog, thereby eliminating the need to visit multiple sites to edit your content.

I just need to add one caution when using this technique: The RSS calls are standard HTTP and can occasionally run slowly based on the response time of the page you are calling, or they can fail altogether if the host site happens to be down. Don’t overuse this technique, or your page may run slowly. However, when used appropriately, this solution can offer an easy way to improve your site with dynamic content.

If you’re interested in learning more, I recommend the following resources:


Brian Rinaldi is as a Content and Community Manager for the Adobe Developer Center team, where he helps drive content strategy for HTML5 and JavaScript developer content. Brian blogs regularly at http://remotesynthesis.com and is a unreformed twitter addict @remotesynth.