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:

Contents

Step 1. HTML
templates/sample1.html
templates/sample2.html
templates/sample3.html
Step 2. CSS
css/styles1.css
css/styles2.css
css/styles2.css
Step 3. JS
Step 4. PHP
get_rss_feed.php
Conclusion

Live Demo 1

Live Demo 2

Live Demo 3

[sociallocker]

download in package

[/sociallocker]

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); 
  
?>

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!