Import RSS Feeds using jFeed (jQuery)

Import RSS Feeds from any rss enabled site using jFeed (jQuery)

This simple tutorial will show u how to Import rss feeds of any site into your own custom area/block of site. It can be used as news import from yahoo, bbc etc. As we know, RSS feeds usually using to transfer some news to readers. Today I will tell you about RSS feeds and teach you how to make own RSS aggregator. So you will able to display different RSS feeds at your website with nice design.

Here is a sample:

Live Demo

Download in package

Step 1. HTML

As usual, we start with the HTML.

This is our main page code (with 2 RSS blocks). Pay heed to RSSAggrCont elements. At its params. ‘rssnum’ mean how many rss elements will display at page. ‘rss_url’ – RSS url. Hope you will able to easy change these params.

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 used 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 to our project.

js/jquery.aRSSFeed.js

// jQuery plugin - Simple 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 is common files – jQuery library with addon. No need to give full code of that file here. It always available as a download package

Step 4. PHP

I hope that most code will easy for your understanding – each function have normal name and commented.

Ok, here are all used PHP files:

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

Also we need several images for our project:

View Live Demo

download in package

Conclusion

Today I told you how to create own RSS aggregator using jQuery library – jFeed. You can use this material to create own scripts into your startups. Good luck!