RSS Feed

Blog

External RSS XML Feed Processed via jQuery for Simple Display

External RSS XML Feed Processed via jQuery for Simple Display
Posted on Mar 14, 2013 by Stephen Owens
Tutorial and Code category
   [ Return ]

A snippet of code that will allow you pull an RSS feed and output a simple list of titles, summaries, and the first image from the content. Will work by simply replacing the RSS Feed url and pasting the code into your website.

Source Code for the jQuery RSS News Ticker

  1. <ul id="news-ticker"
    style="height:128px;overflow:hidden;list-style-type:none"></ul>
    
  2. 
    
  3. <script type="text/javascript">
    
  4. // Process the RSS feed through the Google API to return as JSON for
    jQuery
    
  5. function parseRSS(url, callback) {
    
  6.   $.ajax({
    
  7.     url: document.location.protocol +
    '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q='
    + encodeURIComponent(url),
    
  8.     dataType: 'json',
    
  9.     success: function(data) {
    
  10.       callback(data.responseData.feed);
    
  11.     }
    
  12.   });
    
  13. }
    
  14. 
    
  15. function displayNewsTicker (feedResponse) {
    
  16. 
    
  17.   var html = '';
    
  18.   var limit = 5;
    
  19.   
    
  20.   $.each(feedResponse.entries, function(key, val) {
    
  21.     if (key < limit) {
    
  22.       var newscontent = val.content;
    
  23.       var newsimgsrc = $(newscontent).find('img:first').attr('src');
    
  24.       var newslink = val.link;
    
  25.       var newstitle = val.title;
    
  26.       var newsdate = val.publishDate;
    
  27.       var newssummary = val.contentSnippet;
    
  28.     
    
  29.       // Build the list item for the news ticker
    
  30.       html += '<li style="height:128px;"><a
    href="' + newslink + '"
    style="text-decoration:none;color:#000000;"><div
    style="width:100%;height:100%"><div
    style="height:100px;width:100px;float:left;margin:0 20px 0
    0;"><img src="' + newsimgsrc + '"
    style=max-width:100%;max-height:100%;"/></div><p><h2>'
    + newstitle + '</h2>' + newssummary +
    '</p></div></a></li>';
    
  31.     }
    
  32.   });
    
  33.   
    
  34.   // add the news items to the news ticker
    
  35.   $('#news-ticker').append(html).live();    
    
  36. 
    
  37. }
    
  38. 
    
  39. function tick(){
    
  40.   $('#news-ticker li:first').slideUp( function () { 
    
  41.     $(this).appendTo($('#news-ticker')).slideDown(); }
    
  42.   );
    
  43. } 
    
  44. 
    
  45. $(document).ready(function() {  
    
  46.   // URL of the RSS feed            
    
  47.   parseRSS('http://www.yourwebsite.com/blog/feed/', displayNewsTicker);
    
  48.   // News Ticker Speed
    
  49.   setInterval(function(){ tick () }, 5000);
    
  50. });
    
  51. 
    
  52. </script>
    

How to Use the Snippet

Find around line 47:

  1. parseRSS("http://www.yourwebsite.com/blog/feed/", displayNewsTicker);

And replace http://www.yourwebsite.com/blog/feed/ with your RSS feed url.

Paste the code into your site.

jQuery is Required

If you are not already using jQuery on your site you will need to include it.

  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

Share
Like what you read? Get updates for free!
comments powered by Disqus