Import RSS Feeds using jFeed (jQuery)

Import RSS Feeds using jFeed (jQuery)

57 433385
Import RSS Feeds using jFeed
RSS feed

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:

    clock icon
    loading icon
    loading background icon
    more icon

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!

SIMILAR ARTICLES

Understanding Closures

0 20930

57 COMMENTS

  1. how can i control the content display form the feed .. whn i try this with feedburner feed link its shows the full content.. i need post title + short intro about the post..

  2. heyho…well done. thx :)

    I would like to import multiple rss Feeds and ORDERthem by date in one list. Do you have a suggestion where to look? there is alot of stuff, using webservices to combine them. but i want to collect all RSS Feeds, relevant to the students of my course…and i want them to be realtime. so they need to be imported on client-side.

  3. I use this script and it’s working great in localhost, but when I host that in some server, the page always stay in loading state. I’ve tried to host in different servers but it stay the same. Are there any settings i’m missing?

    thanks

    • I advice you to track all possible JS errors. As example – install Firebug plugin to your Firefox, and look for errors. Possible your custom page have some errors, or, hosting unable to connect to external source of RSS feed

  4. thanks for the reply
    I host your sample code to test the result, and it seems that my hosting cannot connect to external source of RSS. Is there probably any settings on the server we need? I’ve tried changing the permission but the page still do not load.

  5. Hi, try to check server variable ‘allow_url_fopen’, try to set to 1 (ON)
    possible reading
    http://bugs.php.net/bug.php?id=28497
    will help

  6. Hi,

    Can I do this using classic ASP instead of PHP ? I want to implement the same functionality for an ASP website ? any thoughts ??

    • Yes, sure, just repeat what I doing in PHP in your ASP, this is small and easy code.
      You will need just return RSS feed text in your custom ASP file (instead my get_rss_feed.php)

  7. Hi, this is really great post, but i have some problem.
    I am a beginner in a web development, and the problem is same: When i try the demo, everything is Ok, but downloading the source, it doesn’t work.
    Maybe that should insert into localhost, or it is not necessary?
    I really need your help, because i want to make similar page in my website.
    Thank you

    • Yes, sure, try this at localhost, this sample should work, just because I made it (when prepared this post) at localhost too :)

  8. Hi, great post. I’ve been looking at improving the rss feed on my site. Now I just need to adapt it to asp.net. :)

  9. Hi Admin,

    Great post on this RSS feed. I’ve tried everything but can’t seem to get it to show up inside of another .php file. No problem if I post it alone. See examples below:

    By itself (working)
    http://www.ebaytales.com/feed/

    Embedded inside a php file (not working):
    http://www.ebaytales.com/searchS.php?type=2&cid=24

    Just says “Loading..” I know it’s trying because the footer comes through but the feed doesn’t. Viewed the source code and it looks the same on both pages. Not sure what’s going on.

    Note: I’ve already set allow_url_fopen = on in the php.ini. Also I I get a java error in IE.

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)
    Timestamp: Thu, 10 Mar 2011 06:39:17 UTC

    Message: Object expected
    Line: 266
    Char: 1
    Code: 0
    URI: http://www.ebaytales.com/searchS.php?type=2&cid=43

    266: $(document).ready( function() {

    Hope that helps you find the bug.
    Thanks in advance.

    Mike

  10. Beware: This won’t work in browsers with Javascript turned off.

    Maybe modify the code a bit, so w/ Javascript turned off, it just shows the images?

    • 2 lep
      Of course don`t will work, even jQuery library not will work in case if we will disable JS in browser :)
      If you want to display some image/warning in case when JS disabled – you can just drop this image in layout.
      And, remove that image in JS. So if JS enabled – your image will removed when page will loaded.

  11. It won`t work in my site. See for yourself: http://infodrumtest.zymichost.com/?p=33 . Please help me figure this out. Firebug said there`s an error somewhere, but I`m not familiar with jQuery and can`t fix it myself. Thanks a ton.

    • 2 Iris
      Maybe you faced with problem of second jQuery instance?
      try to disable jquery of our sample. Possible you already had jQuery in your project?

  12. It doesn’t work for me either. On none of my browsers, maybe because I updated them all recently and there were bunch of modifications.

    It doesn’t replace the gif part with the actual feed. Your demo, however, is working. It is just when I am trying to load it from my website or locally that it does not work

    • Hello Faghan,

      I can suggest you to test it in firefox browser. And please – activate Fiebug plugin. It seems that you have some another JS error at this page.

  13. Great RSS feeder, just what we were looking for. Just one question – I am not able to decipher how to edit the image size. Is that possible?

    • Hello Cassie,
      Images is provided by RSS providers. If you will provide bigger images in your RSS – you will have bigger images too

  14. Great post! Thanks for the information!

    I was wondering if it would be possible to have multiple sources read out of a single feed…

    • Hello Billy,

      Why not, but in this case you have to create another way to pass multiple source URLs to get_rss_feed.php.
      And after, read multiple URLs (readfile) and mix results into single XML file.

  15. Thanks ..it works really well on my drupal.
    Just one question… i´m trying to shorten the number of words in “rss_item_desc” div.
    Is it possible to customize it ?
    Thanks in advance

    • Hello Juan,
      Yes, sure, you can make description shorten, you can use JS ‘substring’ function, and instead:
      + item.description +

      You can use:
      + item.description.substring(0,128) +

  16. I tried add + item.description.substring(0,128) + in jquery.aRSSFeed.js but i get error, it show’s just title

    • Hello Emil,
      Sorry for my late response. But I am happy to see that you have already got the solution for you.

    • Hello Emil again,
      Random feeds or display posts randomly (of single feed)? (this is different things) :-)

  17. Thanks for the plugin, and the tutorial. I ran into a few hours worth of issues (PHP.INI ~ url_fopen), but have it running on clients network solutions hosting. Just wanted to say you’re work is appreciated. I’m currently looking into how to keep the feed from changing the page’s scroll position when it updates.

    –R

  18. Looks like it the culprit was .fadeIn()

    // Find block and fade in
    newsHolder.find("#newsBlock" + index).fadeIn(2500);

    ~to~

    $('#' + i).css("display","inline-block");

    *** note the var i, it’s a standard iterator loop set by settings.limitItems.length — i’m not sure if it’s really necessary to go about it that way

    also, fwiw, I changed the following to more closely reflect american english:
    itemLinkText: 'read more',
    ~to~
    itemLinkText: 'read more',

  19. For those of you who are using asp and need to take what is contained in the “get_rss_feed.php” file and turn it into asp language, I found success using the following code.


    <%
    ' change the RSSURL variable to the exact URL of the RSS Feed you want to pull
    RSSURL = Request.QueryString("url")

    Dim objHTTP ' this object is used to call the RSS Feed remotely
    Dim RSSURL,RSSFeed ' these variables hold the URL and Content for the RSS Feed
    Dim xmlRSSFeed ' this variable hold the XML data in a DOM Object

    ' this code requests the raw RSS/XML and saves the response as a string
    Set objHTTP = Server.CreateObject("Msxml2.ServerXMLHTTP")
    objHTTP.open "GET",RSSURL,false
    objHTTP.send
    RSSFeed = objHTTP.responseText

    ' this code takes the raw RSSFeed and loads it into an XML Object
    Set xmlRSSFeed = Server.CreateObject("MSXML2.DomDocument.4.0")
    xmlRSSFeed.async = false
    xmlRSSFeed.LoadXml(RSSFeed)

    ' this code disposes of the object we called the feed with
    Set objHTTP = Nothing

    Response.Clear
    Response.ContentType = contentType
    Response.Charset = "utf-8"
    Response.Codepage = 65001
    Response.Write RSSFeed
    Response.End

    %>

    Of course, you’ll need to change the filename to “get_rss_feed.asp” and make appropriate changes anywhere that your configuration pointed to the php file of the same name.

    I’m a newbie .. and it took awhile for me to figure out how to make it work. I hope it can help you out if you’re stuck.

    Andrew: Thanks for posting this code. I’m making great use of it … on a website (not ready for prime time just yet) .. and just in learning how all this stuff is put together. Just know your work is truly appreciated.

    RICK

  20. Hi
    I am a complete novice and wanted to upload the package to my webspace and get it running, as some research.
    I have copied it all up with the same structure but get a 404 when I go to the path for the index.php.

    What am I doing wrong?
    Do I need to call the php from a html page?

    • Hello Hassan (HH),
      You have to run it at your localhost (as example – in Wamp). Only in this case this PHP will be executed.

  21. Hello, in the meantime thanks for the plugin, but I wanted to ask how can I do to increase the size of your thumb?

  22. Hello Team,

    The code works fine for bringing in the rss feeds on my website. But since i live in a country with multiple languages like example : hindi, kannada for whom the codes are “hi” & “kn” respectively ; Henceforth i need assistance in implementing the code for multiple languages. Could you assist me with the problem i’m facing ???

    Need assistance soon will be waiting for your reply…

    • Hi saurabh,
      Sorry, but do you mean that you want to implement some behavior to translate all your feeds (which are provided initially only at the one of languages) on-fly? :-)

  23. Okie i’m able to fetch rss in different languages but i need to save it into my DB as well as display them accordingly …. Need assistance ASAP !!!!

    • If you need to save all your rss feeds into your database, I can recommend that you do it on daily or hourly basis. Just download a RSS feed, then – parse it, and add these snippets into database.

    • Hi ayush,
      Actually, it doesn’t matter which server language you use. As usual, I use php, I don’t use jsp (this is to no purpose). If you know jsp – you should be able to turn php code to jsp.
      There are only two very small PHP files here.

  24. Hi Admin,

    i tried this rss feed reader and it worked very fine…just one question….the thumb images that comes beside every title in the list, i want to reduce the thumb size to be 84×84 for each thumb…what should i do? because my rss feed link shows the images in big size
    here’s the rss feed link i use : http://al-tabeer.com/rssfeed.php?
    thanks in advance

    • HI wahid, in that case you should specify the size of images, example:
      <img src="" style="height:84px;width:84px;" />

    • Hi Laura, There is no more additional parameters except rssnum and rss_url. This is pure JS code, if you need to display only a certain content length – you can limit it

Leave a Reply