Yep, we have a totally cool way to display feeds on your legacy college website using AJAX. This means the page will load right away and then call out to the server for your feed.
Do not use this method if you want the feed contents to be indexed by search engines. Use ASP includes for things such as profile pages which should be fully indexed.
You only need three things to make this happen.
- Prepare your page with one line calling to a JavaScript file.
- Insert a snippet of JavaScript in your page and set the variables.
- Some elbow grease and or moxie!
OK the third item is really about having something to feed in and an XSLT to transform the feed. No worries though! Samples will be provided on this page so grab a bag of Skittles and a Mountain Dew we are going to get crazy.
1. Prepare Your Page
This will work on .asp, .html, .aspx or just about any other type of page. In fact you can convert your old ASP feed pages to this new AJAX method if you like.
In the head of the document you need this line of code:
<script type="text/javascript" src="/attributes/js/ajaxRSS.js"></script>
It can come before or after the call to your style sheets. All this does is point to the set of JavaScript so that your page is ready to receive an RSS feed.
Note: You can include this in your DWTs, be sure to use a root-relative link!
2. The Code Snippet
Paste the JavaScript code snippet in the body of your page where you want the feed to appear.
Copy and paste this into your code view!
<script type="text/javascript">
getRssFeed("mydivId2","http://myfeed.xml","/MyXSLT.xslt","My Error Message")
</script>
Now adjust the four variables in the feed:
- mydivId2
- The script automatically generates a div to surround your feed. This variable will set the div’s id attribute.
- http://myfeed.xml
- This is replaced with the URL of your feed. Just highlight and paste away!
- MyXSLT.xslt
- This is the call to the XSLT used to transform the feed into HTML.
Be sure to use a root-relative link! - My Error Message
- JIC things go wrong you can have a custom error message display. Just about anything want too including a link or e-mail. Just be sure to change any quotes in your HTML message to single quotes so it doesn’t conflict with the quotes the JavaScript is using.
- So this:
<a href="mailto:jeff@umn.edu">
Becomes this:
<a href='mailto:jeff@umn.edu'>
3. The Feed and XSLT
I am not going to lie to you, this gets tricky! An RSS feed is just raw XML, something needs to transform it so it will display in some intentional way on a Web page.
Here are three examples based on a feed from the CEHD events calendar. You can download the XSLT and CSS and mess around with each sample. There are lots of comments in the XSLT code to guide you along using this feed.
- The Basic
- This grabs the full date from the event and the title and wraps both in a paragraph tag. Very basic as the name implies.
- The list
- Same as basic but now it throw the items into a list, limits the number of events displayed to six and links the title back to the events calendar.
- The table
- Super uber-wicked! Builds a table and checks to see if there are multiple events for one date so the day does not keep repeating.
These are actually very basic examples, more fun can be found at W3 Schools tutorial on XSLT!