RSS feed – using jFeed (jQuery) to aggregate RSS
This simple tutorial will show you how to Import rss feeds of any site into your own custom area/block of website. It can be used as news imported from yahoo, bbc etc. As we know, RSS feeds are usually used to trasnfer some news for people. Today I’ll tell you about RSS feeds and show you how to make an own RSS aggregator. In the result, you will be able to display various RSS feeds on your website with nite and modern design.
Here is the sample:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Well, download the source files and let’s start coding !
Step 1. HTML
As usual, we start with the HTML.
This is our main page code (with 2 RSS blocks). Pay heed at RSSAggrCont elements. Param ‘rssnum’ means – how many rss elements will be displayed at the page. ‘rss_url’ – is RSS url. I hope that you will be able to change these params easily.
templates/rss_page.html
<link href="templates/css/styles.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.jfeed.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.aRSSFeed.js"></script> <div class="RSSAggrCont" rssnum="5" rss_url="http://rss.news.yahoo.com/rss/topstories"> <div class="loading_rss"> <img alt="Loading..." src="templates/images/loading.gif" /> </div> </div> <div class="RSSAggrCont" rssnum="5" rss_url="http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml"> <div class="loading_rss"> <img alt="Loading..." src="templates/images/loading.gif" /> </div> </div> <script language="javascript" type="text/javascript"> $(document).ready( function() { $('div.RSSAggrCont').aRSSFeed(); } ); </script>
Step 2. CSS
Here are CSS styles.
templates/css/styles.css
.RSSAggrCont { border:1px solid #AAA; -moz-box-shadow:0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; width:500px; padding:10px; background:#f3f3f3; margin:15px; float:left; } /* RSS Feeds */ .rss_item_wrapper { padding-bottom: 8px; } .rss_item_wrapper:last-child { padding-bottom: 0px; } .rss_item_header { font-size:12px; font-weight:bold; padding-bottom:0px; } .rss_item_header a, .rss_item_header a:link, .rss_item_header a:visited, .rss_item_header a:hover, .rss_item_header a:active { font-size:12px; font-weight:bold; color:#33c; } .rss_item_info { color:#999; font-size:9px; } .rss_item_desc { text-align:justify; font-size: 11px; } .rss_read_more { background-color:#EDEDED; font-size:11px; font-weight:normal; height:30px; line-height:30px; vertical-align: middle; margin-top:2px; padding:0 9px; text-align:left; text-decoration:none; text-transform:capitalize; } .loading_rss { text-align:center; width:89px; height:64px; background-image:url(../images/loading_bg.png); z-index: 10; margin: 10px auto; } .loading_rss img { margin-top: 16px; } .loading_rss div { width:89px; height:64px; background-image:url(../images/loading.gif); background-position:center center; background-repeat:no-repeat; }
Step 3. JS
Here are few necessary JS files for our project:
js/jquery.aRSSFeed.js
// jQuery plugin - Dolphin RSS Aggregator (function($){ $.fn.aRSSFeed = function() { return this.each( function(){ var $Cont = $(this); var iMaxNum = parseInt($Cont.attr( 'rssnum' ) || 0); var sFeedURL = $Cont.attr('rss_url'); if (sFeedURL == undefined) return false; $.getFeed ({ url: 'get_rss_feed.php?url=' + escape(sFeedURL), success: function(feed) { if (feed != undefined && feed.items) { var sCode = '<div class="rss_feed_wrapper">'; var iCount = 0; for (var iItemId = 0; iItemId < feed.items.length; iItemId ++) { var item = feed.items[iItemId]; var sDate; var a; var oDate if (null != (a = item.updated.match(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)Z/))) oDate = new Date(a[1], a[2]-1, a[3], a[4], a[5], a[6], 0); else oDate = new Date(item.updated); sDate = oDate.toLocaleString(); sCode += '<div class="rss_item_wrapper">' + '<div class="rss_item_header">' + '<a href="' + item.link + '" target="_blank">' + item.title + '</a>' + '</div>' + '<div class="rss_item_info">' + '<span><img src="templates/images/clock.png" /> ' + sDate + '</span>' + '</div>' + '<div class="rss_item_desc">' + item.description + '</div>' + '</div>'; iCount ++; if (iCount == iMaxNum) break; } sCode += '</div>' + '<div class="rss_read_more">' + '<img class="bot_icon_left" src="templates/images/more.png" />' + '<a href="' + feed.link + '" target="_blank" class="rss_read_more_link">' + feed.title + '</a>' + '</div>' + '<div class="clear_both"></div>'; $Cont.html(sCode); } } } ); } ); }; })(jQuery);
js/jquery-1.4.2.min.js and js/jquery.jfeed.js
This are common files – jQuery library with jFeed library. It is to no purpose to publish full codes of these files here (they are pretty huge). Both are available in our download package
Step 4. PHP
Finally – PHP sources, I think that everything should be easy to understand:
index.php
<?php require_once('templates/rss_page.html'); ?>
get_rss_feed.php
<?php $sUrl = (isset($_GET['url']) && $_GET['url'] != '') ? $_GET['url'] : 'http://www.boonex.com/unity/extensions/latest/?rss=1'; header( 'Content-Type: text/xml' ); readfile($sUrl); ?>
Step 5. Images
Several images are required for our project:
Live Demo
Conclusion
Today I’ve described you how to create own RSS aggregator using jQuery library – jFeed. You are welcome to use it in your projects. Good luck!
Hello,
i want to open the links of the incoming rss in a popup box with iframe, can you please let me know what should i modify?
Thank you.
Hello Miel,
In your case you can add onclick event handler with the next code:
window.open (‘item.link’,’_self’);
Hi,
thanks for this script!
Please,
how can I retrieve the Image within Enclosure or Media tag in xml?
thanks in advance!
Silvio
Hi Silvio,
Firstly, you will need to obtain a necessary code for your media elements (images), and after – display them in the output