Zazar Simple jQuery Plugins for Feed Consumption

ZaZar FREE JQuery Plugins Working on a new landing page for my site this week which leverages Impress.js to transition the user through a series of sections on a page ( deserves another post ). There are two sections, blog and twitter that require feed consumption. I’d like to leverage a widget or JQuery plugin for this functionality. I must admit, has been a long time since I’ve worked with widgets and plugins providing feed consumption I decided to do some Googling and hit up StackOverflow. My goal started out to find something simple, easy to use, quick to setup, and flexible enough to get the job done. I’d rather spend more time on crafting my snappy UI at this point. Below is the list I decided to investigate.

  1. YQL
  2. Google AJAX API
  3. jFeed
  4. jQuery-rss
  5. Zazar

Deciding which to use did not take long.

Selection Discussion

Did I mention I absolutely LOVE StackOverflow! I mainly used this thread from StackOverflow to create the list of Feed Consumption Plugins above and help determine the my final selection. I determined Zazar suited my current requirements the best. I put the selection at the top for those of us who can’t wait, if your interested in why I did not select the others, please feel free to continue reading.

Zazar ( Selected )

Zazar provides a set of FREE Developer JQuery Feed Plugins, Twitter, RSS, Weather, Google Map and Flickr. The Twitter and RSS feed plugins can be setup in less than five minutes. At this point, this is what I’m looking for. Reference JQuery, Zazar style sheet and JavaScript, use the code below and you are off to the races. Nice!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="testRss"><div>
<div id="testTwit"><div>

<script type="text/javascript">
$(document).ready(function () {

  $('#testRss').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
    limit: 5
  });

  $('#testTwit').twitterfeed('jquery', {
    limit: 5
  });

});

</script>

YQL

Yahoo Query Language ( YQL ) is powerful no doubt, but after reading this article I decided there was more customization than I required and more work than I was willing to put into this feature at this time.

Google AJAX API

The Google AJAX API seemed simple enough, but I’m too lazy to read through the documentation and do not want to customize it that much. Sure this is simple, but I do not want to create my own HTML output at this time, maybe later when I want more customization capability. I could use a JQuery template to output the JSON data but again, too much work at this point.

1
2
3
4
5
6
7
8
9
function parseRSS(url, callback) {
  $.ajax({
    url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      callback(data.responseData.feed);
    }
  });
}

jFeed

jFeed is nice, supports using JQuery or a php proxy. Again, the call to consume the data is simple BUT I do not want to build the HTML output, too lazy.

1
2
3
4
5
6
jQuery.getFeed({
   url: 'rss.xml',
   success: function(feed) {
      alert(feed.title);
   }
});

jQuery-rss

I like jQuery-rss, the AJAX call is using Google AJAX API, there is support for templates, filtering, and has a default output template out of the box. I like this but I want to get twitter feeds too. When I want to customize my RSS output, I will likely come back to jQuery-rss.

1
2
3
4
5
   <script>
      jQuery(function($) {
        $("#rss-feeds").rss("http://feeds.feedburner.com/premiumpixels")
      })
    </script>

Comments