Importing multiple RSS feeds – using newsWidget (jQuery)

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.

Step 1. HTML

As usual, we will start with the HTML.

Here are sources of all 3 samples:

templates/sample1.html

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

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

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

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

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

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 is one small PHP file:

get_rss_feed.php

PHP
<?php

$sUrl = $_GET['url'];

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

?>
 

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!