RSS feed with jQuery

In this example below you will see how to do a RSS feed with jQuery with some HTML / CSS and Javascript

Pulls RSS to display title, image and snippet.

Thumbnail
This awesome code was written by Turqueso, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Turqueso ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>RSS feed with jQuery</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h2>RSS Feed with jQuery</h2>
<h3>Feed api is decreped now :[</h3>
<div id="feed"></div>
<!--is anyone interested on this plugin?-->
<!--based on https://codepen.io/ParsonsProjects/details/inKoE/-->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Turqueso/rss-feed-with-jquery-emxEQL */
/*
Milestone:
-Each article should be insise <article>
-Github
-add css
-change layout
-custom tags
- loading animation
*/

/* ignore this */
#feed {
  max-width: 600px;
  margin: auto;
  padding: 0 20px;
}

img {
  max-width: 100%;
}

h2 {
  text-align: center;
}

/*Downloaded from https://www.codeseek.co/Turqueso/rss-feed-with-jquery-emxEQL */
(function($) {
  
  $.fn.loadPosts = function(options) {
    var defaults = {
      feedUrl       :  null,
      outputId      :  $(this),
      countLimits   :  3
    }
    
    var settings = $.extend({}, defaults, options);
    
    var feedURL   = settings.feedUrl,
       outputEl   = settings.outputId,
       countLimit = settings.countLimits;
    
   $.ajax({
     url: document.location.protocol +
     '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' +
     encodeURIComponent(feedURL),
     dataType: 'json',
     success: function(data) {
       var entries   =   data.responseData.feed.entries,
           $wrapper  =   $('<article>').appendTo(outputEl);
       
       for (var i = 0, length = countLimit; i < length; i++) {
         var title            =   entries[i].title,
             contentSnippet   =   entries[i].contentSnippet,
             link             =   entries[i].link,
             thumbImage       =   $(entries[i].content).find('img').first().attr('src');
             
             if (thumbImage  !=   null) {
               $image         =   $('<a target="_blank" href="' + link + '"><img src="' + thumbImage + '"></a>').appendTo($wrapper);
             };
             $title           =   $('<a target="_blank" href="' + link + '"><h3>' + title + '</h3></a>').appendTo($wrapper);
             $snippet         =   $('<p>' + contentSnippet + '</p>').appendTo($wrapper);
       }
       
     }
   });
  }

}(jQuery));

$('#feed').loadPosts({
  feedUrl:  'https://github.com/blog/general.atom',
  countLimits:  3
});

//  Other RSS you can use to test
//  https://blog.codepen.io/feed/
// https://staff.tumblr.com/rss

Comments