RSS News Feeds

From Web Developer Network Wiki
Jump to: navigation, search

RSS (XML) files are a great way to get news/events/and other content out quickly and efficiently in a simple markup. This article will detail two ways you can use RSS feeds to display valid xml content within your web pages. After following these steps your pages will act sort of similar to server side includes where you will only need to edit the .xml file and all pages that display your feed will automatically be updated as well.

FeedBurner and BuzzBoost

Create a free account with FeedBurner, attach your news feed, and head over to the "Publicize" tab, click on "BuzzBoost" and set up your feed. I set it up as follows: Display Item Content in Plain Text and full content; Display Item Date above Content; and open links in same window. FeedBurner will then provide you with a javascript that you can insert into the body section of your page, here's mine:

<script src="http://feeds.feedburner.com/uhcnews?format=sigpro" type="text/javascript" ></script>
				
<noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/uhcnews"></a><br/>Powered by FeedBurner</p> </noscript>

BuzzBoost will rework your .xml file and convert it into standard html with each headline, description, etc. having a specific element id - Here's how it formats the output. This allows you to devise a set of styles to apply to your feed to display it as you want. Here's how I've restyled the feed:

<!-- Styles for the Feed display in maincontent -->
<style type="text/css">
#maincontent ul {
	list-style:none;
	}
	
#maincontent li {
	border-bottom:#666666 thin solid;
	padding:20px 0 20px 0;
	}
	
#maincontent li:hover {
	background-color:#F0F0F0;
	}

#maincontent span.headline {
	font-weight:bold;
	font-size:14px;
	color:#000000;
	}

</style>

Here's how it looks

Ticker / Marquee

Another way to display your feed is to have a ticker/marquee crawling through your headlines.

Download the following file and put it in your sharedcode:

Change the reference to point toward your feed. You can also tweak some of the other settings: feed.setNumEntries(num) will cause the ticker to display "num" number of entries before restarting and you can adjust some of the timing (in milliseconds) to change how long each headline is displayed and how long transitions last. Once you've got the script edited to fit your needs insert the following in your header

<!-- Inserted for News Ticker -->
<style type="text/css">
#newsticker {
	min-height:100px;
	}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAUbaJkPV1tAaMsNS-7UBDNhTELkNjcWhKXky6vQZrvQAPA5Uw6xTIiC7jVa6AkRGHRPsr18Bp3NCL4Q"></script>
<script type="text/javascript" src="sharedcode/ticker.js"></script>

Now insert the following into the section of your body where you want the ticker to come up

<h2><a href="url" class="feed-icon">News Feed</a></h2><br />
    <div id="unl-splashfeed">
    <p>» <span id="feed">Loading feed...</span></p>				
    </div>

Here are some examples of the above ticker in action:

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox