Importing multiple RSS feeds – using newsWidget (jQuery)

Aug04
2010 10 Comments Written by admin

Importing multiple RSS feeds – using newsWidget (jQuery)

Some times ago I told how to display rss feed at our website. But some times ago my friend ask me how to display in single box feeds from multiple sources. I decided to investigate it and located NewsWidget library. Lets check its possibilities.

Here is a sample:

Live Demo 1
Live Demo 2
Live Demo 3
download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we will start with the HTML.

Here are sources of all 3 samples:

templates/sample1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example 1 - NewsWidget jQuery Plugin</title>
    <link rel="stylesheet" href="css/styles1.css" type="text/css" media="screen" />
</head>
<body>
    <div id="newsWidget">
        <div class="intro">Below you find some <strong>random</strong> rss feeds from few sources using extended format. Every <strong>15 seconds</strong> the list is updated.</div>
        <ul id="news"></ul>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.newsWidget.js"></script>
    <script type="text/javascript">
        $('ul#news').newswidget({ source: ['http://rss.news.yahoo.com/rss/us', 'http://rss.news.yahoo.com/rss/world', 'http://feeds.bbci.co.uk/news/rss.xml'],
            proxyUrl: "get_rss_feed.php",
            limitItems: 10,
            refresh: 15000,
            random: true,
            itemDateElement: "span",
            itemLinkElement: "span",
            itemWebsiteTitleElement: 'span',
            linkTitle: true,
            format: "title,description,date,link,websiteTitle"});
    </script>
</body>
</html>

templates/sample2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example 2 - NewsWidget jQuery Plugin</title>
    <link rel="stylesheet" href="css/styles2.css" type="text/css" media="screen" />
</head>
<body>
    <div id="newsWidget">
        <div class="intro">Below you find some the <strong>latest</strong> rss feeds from few sources using extended format.</div>
        <ul id="news"></ul>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.newsWidget.js"></script>
    <script type="text/javascript">
        $('ul#news').newswidget({ source: ['http://rss.news.yahoo.com/rss/us', 'http://rss.news.yahoo.com/rss/world', 'http://feeds.bbci.co.uk/news/rss.xml'],
            proxyUrl: "get_rss_feed.php",
            limitItems: 10,
            random: false,
            itemDateElement: "span",
            itemLinkElement: "span",
            itemWebsiteTitleElement: 'span',
            linkTitle: true,
            format: "title,date,websiteTitle, description"});
    </script>
</body>
</html>

templates/sample3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example 3 - NewsWidget jQuery Plugin</title>
    <link rel="stylesheet" href="css/styles3.css" type="text/css" media="screen" />
</head>
<body>
    <div id="newsWidget">
        <div class="intro">Below you find some the <strong>latest</strong> rss feeds from few sources using easy format.</div>
        <ul id="news"></ul>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.newsWidget.js"></script>
    <script type="text/javascript">
        $('ul#news').newswidget({ source: ['http://rss.news.yahoo.com/rss/us', 'http://rss.news.yahoo.com/rss/world', 'http://feeds.bbci.co.uk/news/rss.xml'],
            proxyUrl: "get_rss_feed.php",
            limitItems: 10,
            random: false,
            itemDateElement: "span",
            itemLinkElement: "span",
            itemWebsiteTitleElement: 'span',
            linkTitle: true,
            format: "title,date"});
    </script>
</body>
</html>

As you can see – these samples quite same, just list of params is different. Most of params described in JS library itself, but I used next: limitItems – how many elements we will display; refresh – refresh time (in ms, optional param); random – are elements will display randomly or not, format – array of elements which we going to display.

Step 2. CSS

Here are used CSS styles.

css/styles1.css

@charset "utf-8";
body{color:#333;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;text-align:center}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px solid #cdcdcd;padding:10px}
#newsWidget .intro{background-color:#f5f5f5;padding:10px}
#newsWidget ul{margin-left:0;padding-left:0;list-style:none}
#newsWidget ul li{padding-left:20px;background-image:url(news.jpg);background-repeat:no-repeat;background-position:0 12px}
#newsWidget h4{font-size:12px;color:#424242;margin:0;padding:10px 0 5px}
#newsWidget .description{margin:0;padding:0 0 5px}
#newsWidget .date{font-size:10px;color:gray}
#newsWidget .date,#newsWidget .link{font-size:10px;color:gray;padding:0 5px 0 0;margin:0 5px 0 0;border-right:solid 1px gray}
#newsWidget .websiteTitle{font-size:10px;color:gray}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{color:#036}
#newsWidget a:hover{color:#f60}

css/styles2.css

@charset "utf-8";
body{color:#333;font-family:Arial,Helvetica,sans-serif;font-size:12px;text-align:center}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px solid #cdcdcd;padding:10px;color:#333}
#newsWidget .intro{background-color:#f5f5f5;padding:10px}
#newsWidget ul{margin:0;padding:0;list-style:none}
#newsWidget ul li{border:3px solid #f2f2f2;display:block;margin:10px 0 0;padding:10px 24px 16px 28px;position:relative}
#newsWidget h4{font-size:17px;color:#424242;margin:0;padding:10px 0 5px;line-height:22px}
#newsWidget .description{color:gray;font-size:11px;line-height:15px;clear:both}
#newsWidget .date,#newsWidget .websiteTitle{font-size:10px;font-style:italic;line-height:13px;padding:0 4px 24px 0;display:block;float:left}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{border-bottom:1px solid #d8d8d8;color:#333;text-decoration:none}
#newsWidget a:hover{border-bottom-color:#333}
.spacer{clear:both;height:1px;display:block}

css/styles2.css

@charset "utf-8";
body{color:#bebebe;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:lighter;line-height:18px;text-align:center;background-image:url(background.jpg);background-repeat:repeat}
#newsWidget{text-align:left;margin:20px auto;width:250px;border:1px dotted #414141;padding:10px;color:#333}
#newsWidget .intro{background-color:#67afcb;padding:10px;color:#fff;margin-bottom:10px}
#newsWidget ul{margin:0;padding:0;list-style:none}
#newsWidget ul li{border-bottom:1px dotted #313131;margin:0 0 8px;padding:0 0 8px;display:block;position:relative}
#newsWidget h4{font-size:14px;color:#424242;margin:0;padding:2px 0 0;line-height:18px;display:block}
#newsWidget .date{color:#999;font-size:11px;clear:both}
#newsWidget a:link,#newsWidget a:active,#newsWidget a:visited{color:#67afcb;text-decoration:none}
#newsWidget a:hover{color:#79c0dc}
.spacer{clear:both;height:1px;display:block}

Step 3. JS

Current samples contain jquery.min.js library and jquery.newsWidget.js. I don`t included source codes of these libraries in post. It always available in package

Step 4. PHP

Here are one small PHP file:

get_rss_feed.php

<?php

$sUrl = $_GET['url'];

header( 'Content-Type: text/xml' );
readfile($sUrl);

?>
Live Demo 1
Live Demo 2
Live Demo 3
download in package

Conclusion

Today I told you how to import several RSS feeds using new jQuery library. You can use this material to create own scripts into your startups. Good luck!

About: admin:
I am web developer with huge experience (in web languages and even in system languages). Also I am the founder of current website (and several another). I like to write blogs about web development/design. Feel free to Follow us on Twitter: tweetmeme_screen_name='AramisGC';
If you Enjoyed our article don't forget to Share the love with your friends.
   
   
   
Written by: admin on August 4, 2010.
Posted in HTML/CSS, JavaScript, jQuery - Tagged , , ,
«
»

9 Comments

  1. darevski's Gravatardarevski
    September 26, 2010 at 11:53 am | Permalink

    Thanks for sharing how can be added image on this feeds?

  2. admin's Gravataradmin
    September 26, 2010 at 12:30 pm | Permalink

    Hope that yes, are you tried to use feeds with images?

  3. darevski's Gravatardarevski
    September 30, 2010 at 3:14 pm | Permalink

    no i didnt trie i dont know how to do that i just start use jscript so if you can do that it will be nice thanks for the replay

  4. Mike's GravatarMike
    February 11, 2011 at 6:16 pm | Permalink

    This is what I am looking for but somehow script does not work. Other js works but these… Damn it.

  5. Roy's GravatarRoy
    April 26, 2011 at 9:04 am | Permalink

    I have tried it on PHP server and it doesn’t work :(

  6. Roy's GravatarRoy
    April 26, 2011 at 9:05 am | Permalink

    It’s now working for me :( I have copied exact as it written…. please help

  7. admin's Gravataradmin
    April 26, 2011 at 9:18 am | Permalink

    2 Roy: Interesting, .. make sure that you have single instance of jquery loaded at your page

  8. Nikolas's GravatarNikolas
    June 9, 2011 at 3:13 pm | Permalink

    Hello, how can we add images?

  9. admin's Gravataradmin
    June 15, 2011 at 8:52 am | Permalink

    2 Nikolas
    Can, but you will need to modify jquery.newsWidget.js script itself, look for ‘parse’ function

  1. Tweets that mention Importing multiple RSS feeds – using newsWidget (jQuery) -- Topsy.com on August 4, 2010 at 4:55 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>