RSS (Really Simple Syndication) feeds provide a means for regular visitors of your website to stay informed of your most recent content. You can start a new RSS feed, depending on your site, through such places as Feedburner. Visitors can then add your RSS feed to their Google Reader or as a widget on their iGoogle pages. You can also add your RSS feed to your own site to create an automated means to showcase your latest content. You can also use services such as HootSuite to push your RSS feed out to places like Twitter, Facebook and many other social networking sites.
The purpose of this article is to show different ways on how to present RSS feeds on your site. This can be a very effective way to provide fresh content to your readers. The content doesn’t even necessarily have to be your own, you can use feeds from different sites as well, but it’s best to use relevant content to your site.
The first example comes from Dynamic Drive and their SAG scroller. The code they provide shows two different types of RSS scrollers as shown in the screenshot.
As you can see, the scroller on the left displays five entries at a time from a single source. The scroller on the right shows 10 entries from two different sources. Visitors can use the white V arrow to scroll through the entries. The following is the code that Dynamic Drive provides. This code is to be placed in the <head> section of your page:
Dynamic Drive Code
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=YOUR-API-KEY”>
</script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”sagscroller.css” />
<script src=”sagscroller.js”>
/***********************************************
* SAG Content Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<style type=”text/css”>
/* #SAG scroller RSS demos #1 and 2 */
div#mysagscroller1 ul li, div#mysagscroller2 ul li{
padding:7px;
border-bottom:1px solid gray;
margin-bottom:7px; /*bottom spacing between each LI*/
}
div#mysagscroller2{
width: 400px;
height:300px;
}
div#mysagscroller2 img{
margin:0 5px 5px 0;
}
</style>
<script>
var sagscroller1=new sagscroller({
id:’mysagscroller1′,
mode: ‘manual’,
rssdata:{
feeds: [
[‘CSS Drive’, ‘http://www.cssdrive.com/index.php/news/rss_2.0/’]
],
linktarget: ‘_new’,
displayoptions: ‘date snippet’,
entries: 5 //<–no comma following last option
},
pause: 2500,
animatespeed: 400 //<–no comma following last option
})
var sagscroller2=new sagscroller({
id:’mysagscroller2′,
mode: ‘manual’,
rssdata:{
feeds: [
[‘Yahoo News’, ‘http://rss.news.yahoo.com/rss/topstories’],
[‘BBC’, ‘http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml/’]
],
linktarget: ‘_new’,
displayoptions: ‘datetime label description’,
groupbylabel: true,
entries: 5 //<–no comma following last option
},
pause: 2500,
animatespeed: 400 //<–no comma following last option
})
</script>
This code does use the Google Feed API, so you will need your own free Google API Key.
In the body of your HTML page, insert the following:
<div id=”mysagscroller1″ class=”sagscroller”>
</div>
<br /><br />
<div id=”mysagscroller2″ class=”sagscroller”>
</div>
You’ll notice that code uses <div> tags that can be formatted through CSS. Dynamic Drive also provides some CSS code to help you get started with the formatting;
.sagscroller ul li .rsscontent{ /*div containing body of each RSS entry*/
font-size:90%;
}
.sagscroller ul li .rsslabel{ /*div containing label of each RSS entry*/
margin-top:5px;
background: #eee;
font-size:12px;
clear: both;
}
If you’re seeking a more modern look to your RSS feed display, then Tutorialzine might have the answer you’re looking for.
They do use a combination of XHTML, CSS and jQuery to make it all happen. Let’s start with the HTML:
<div id=”feedWidget”>
<div id=”activeTab”>
<!– The name of the current tab is inserted here –>
</div>
<div class=”line”></div>
<div id=”tabContent”>
<!– The feed items are inserted here –>
</div>
</div>
The CSS Style
And then the CSS style:
#feedWidget{
background:url(img/bg.png) repeat-x #47525c;
border:2px solid #48535e;
margin:0 auto;
width:200px;
padding:5px;
position:relative;
/* Remains hidden if JS is not enabled: */
display:none;
z-index:20;
}
#activeTab.hover,.dropDownList{
background:url(img/drop_arrow.png) no-repeat 95% 50% #47525c;
border:1px solid #38434d;
margin:-1px;
cursor:pointer;
/* CSS3 round corners: */
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#activeTab,.dropDownList div{
color:white;
cursor:pointer;
font-size:20px;
margin:0 2px 0 0;
padding:5px;
text-shadow:0 1px 1px black;
}
.line{
height:1px;
overflow:hidden;
background-color:#2b353d;
border-bottom:1px solid #687581;
margin:10px 0;
}
After loading the jQuery library, you can use the following script to allow your visitors to interact with the RSS feed display.
RSS Feed Display Interaction
/* Configuration: */
var tabs = {
“@tutorialzine” : {
“feed” : “http://twitter.com/statuses/user_timeline/67315866.rss”,
“function” : twitter
},
“Latest Tutorials”: {
“feed” : “http://feeds.feedburner.com/Tutorialzine”,
“function” : rss
},
“Smashing Mag”: {
“feed” : “http://rss1.smashingmagazine.com/feed/”,
“function” : rss
},
“Script & Style” : {
“feed” : “http://feeds2.feedburner.com/ScriptAndStyle”,
“function” : rss
}
}
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* Counting the tabs: */
var totalTabs=0;
$.each(tabs,function(){totalTabs++;})
$(‘#feedWidget’).show().mouseleave(function(){
/* If the cursor left the widet, hide the drop down list: */
$(‘.dropDownList’).remove();
$(‘#activeTab’).removeClass(‘hover’);
}).mouseenter(function(){
if(totalTabs>1) $(‘#activeTab’).addClass(‘hover’);
});
$(‘#activeTab’).click(showDropDown);
/* Using the live method to bind an event, because the .dropDownList does not exist yet: */
$(‘.dropDownList div’).live(‘click’,function(){
/* Calling the showDropDown function, when the drop down is already shown, will hide it: */
showDropDown();
showTab($(this).text());
});
/* Showing one of the tabs on load: */
showTab(‘@tutorialzine’);
});
And here’s part two of that script, which loads the tweets on page load:
function showTab(key)
{
var obj = tabs[key];
if(!obj) return false;
var stage = $(‘#tabContent’);
/* Forming the query: */
var query = “select * from feed where url='”+obj.feed+”‘ LIMIT 5”;
/* Forming the URL to YQL: */
var url = “http://query.yahooapis.com/v1/public/yql?q=”+encodeURIComponent(query)+”&format=json&callback=?”;
$.getJSON(url,function(data){
stage.empty();
/* item exists in RSS and entry in ATOM feeds: */
$.each(data.query.results.item || data.query.results.entry,function(){
try{
/* Trying to call the user provided function, “this” the rest of the feed data: */ stage.append(obj[‘function’](this));
}
catch(e){
/* Notifying users if there are any problems with their handler functions: */
var f_name =obj[‘function’].toString().match(/function\s+(\w+)\(/i);
if(f_name) f_name = f_name[1];
stage.append(‘<div>There is a problem with your ‘+f_name+ ‘ function</div>’);
return false;
}
})
});
$(‘#activeTab’).text(key);
}
function showDropDown()
{
if(totalTabs<2) return false;
if($(‘#feedWidget .dropDownList’).length)
{
/* If the drop down is already shown, hide it: */
$(‘.dropDownList’).slideUp(‘fast’,function(){ $(this).remove(); })
return false;
}
var activeTab = $(‘#activeTab’);
var offsetTop = (activeTab.offset().top – $(‘#feedWidget’).offset().top )+activeTab.outerHeight() – 5;
/* Creating the drop down div on the fly: */
var dropDown = $(‘<div>’).addClass(‘dropDownList’).css({
‘top’ : offsetTop,
‘width’ : activeTab.width()
}).hide().appendTo(‘#feedWidget’)
$.each(tabs,function(j){
/* Populating the div with the tabs that are not currently shown: */
if(j==activeTab.text()) return true;
$(‘<div>’).text(j).appendTo(dropDown);
})
dropDown.slideDown(‘fast’);
}
Custom Controls
And finally, part three of the script, which allows for custom controls:
function twitter(item)
{
/* Formats the tweets, by turning hashtags, mentions an URLS into proper hyperlinks: */
return $(‘<div>’).html(
formatString(item.description || item.title)+
‘ <a href=”‘+(item.link || item.origLink)+'” target=”_blank”>[tweet]</a>’
);
}
function rss(item)
{
return $(‘<div>’).html(
formatString(item.title.content || item.title)+
‘ <a href=”‘+(item.origLink || item.link[0].href || item.link)+'” target=”_blank”>[read]</a>’
);
}
function formatString(str)
{
/* This function was taken from our Twitter Ticker tutorial – http://tutorialzine.com/2009/10/jquery-twitter-ticker/ */
str = str.replace(/<[^>]+>/ig,”);
str=’ ‘+str;
str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href=”$1″ target=”_blank”>$1</a>’);
str = str.replace(/([^\w])\@([\w\-]+)/gm,’$1@<a href=”http://twitter.com/$2″ target=”_blank”>$2</a>’);
str = str.replace(/([^\w])\#([\w\-]+)/gm,’$1<a href=”http://twitter.com/search?q=%23$2″ target=”_blank”>#$2</a>’);
return str;
}
Conclusion
There you go, two different methods to code your own RSS feeds. Of course, you could always use the code that Feedburner provides to display your RSS. You can also use Feed Informer, they provide a nice RSS layout as well. Both Feedburner and Feed Informer provide free services.
