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!
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: |
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