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!
Related Articles
Import RSS Feeds using jFeed (jQuery)
Image Flow – Multiple Albums
How to use Multiple backgrounds and Animation with CSS3
Thanks for sharing how can be added image on this feeds?
Hope that yes, are you tried to use feeds with images?
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
This is what I am looking for but somehow script does not work. Other js works but these… Damn it.
I have tried it on PHP server and it doesn’t work
It’s now working for me
I have copied exact as it written…. please help
2 Roy: Interesting, .. make sure that you have single instance of jquery loaded at your page
Hello, how can we add images?
2 Nikolas
Can, but you will need to modify jquery.newsWidget.js script itself, look for ‘parse’ function
Is there a way to do this without the PHP code/file?
Hi Mike,
You can try. But, due browser’s restriction you will have difficulties to obtain content of external urls through JS
Excellent stuff, but some strange stuff is going on when I set example 2 to refresh. After one refresh the items are double-posted, after two refreshes they are triple-posted, and so on…
Any idea on what is going on?
Hi Pete,
It is pretty strange, I’ve just checked our demos – it works well. Not sure why it doubles or even tripples in your case. Try to evoke ‘newswidget’ when whole page is loaded (on document ready). Maybe it will help you.
This jQuery newsWidget seems great and exactly what I’m looking for for a website I’m developing but I saw the admin comment “make sure that you have single instance of jquery loaded at your page” and wanted to ask about this before I waste time trying it. I am already using jQuery SimplyScroll (which uses jquery-1.7.2 whereas newsWidget appears to use an older version, if that makes any difference) and I reference jquery.min.js and jquery.simplyscroll.js in the header whereas your coding references jquery.min.js and jquery.newsWidget.js in the body. Do you think there is any way I will be able to use both jquery.simplyscroll.js and jquery.newsWidget.js on the same page, or is it waste of time to try?
Hello Chris,
In this demo (which I made 2 years ago) I used jQuery v1.3.2
Try to use this newsWidget with jQuery 1.7.2 – it is possible that it will work, if not – just tell me, and I will try to find fresh version of this library.
have just tested your script to see how viable it is and I like it but I’m not sure if it’s a bug but when I set random to “false” and use refresh in any interval (that is faster than the source’s rss is updating), the newest feed will continually add itself as #1 with every refresh until it’s pushed everything else off the list.!
in other words, the first rss list is generated and site A, article A is number #1 on the list. on the first refresh, site A, article A is again first but it pushes the rest of the existing list down one so I end up with 2ea. site A, article A’s in first and second place. the second refresh puts them in 1st,2nd and 3rd position and continues with every refresh till my whole list is site A, article A or until (presumably) a rss feed with newer content is pulled.
thanks!
Hi Rich,
I think that yes, it can have a but in the library, you can try to find an updated version of this library. But I can also suggest that you remove ‘refresh’ property in case if you set ‘random’ to false.