Importing multiple RSS feeds – using newsWidget (jQuery)

Importing multiple RSS feeds – using newsWidget (jQuery)

21 16171
Importing multiple RSS feeds - using newsWidget

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

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

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!

SIMILAR ARTICLES

Practice with Text Shadows

0 391
Responsive HTML Email Template

0 605

21 COMMENTS

  1. 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

    • 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.

  2. 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.

  3. 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.

  4. Hi,
    I want to open a link to zoombox js (or other lightbox) but I can not.
    Have you an example ?
    Many thanks,
    Regards.

    • Hi Matthias, is it related to our tutorial or not?
      If you want to apply an extra library for links which are generated by newsWidget.js, you can do or initialize your library with a delay, or you can modify code of this newsWidget.js

  5. Hello and thank you for this. Maybe I’m overlooking something as I’m not familiar with Jquery. But all is well except the rss feeds do not show up. I havent edited the jquery except I needed to change a ‘ to a “. The source is on the page above. My text is showing, but the rss feeds are not coming up at all.
    Would you mind taking a look? Thanks! (Using Firefox)

Leave a Reply