Ajax Updates

Posted by education training on Friday, December 25, 2009

Ajax Updates

JQuery Google Feed Plugin

Posted: 24 Dec 2009 01:09 PM PST

Google announced the Google AJAX Feed API. This is a pretty cool thing as it facilitates feed mashups by providing the server component. This means that developers can easily mash feeds on the client by simply including Google’s new API script. And Google has provided a nice Developer’s Guide which shows how to get started.
To simplify this even more for jQuery developers, I’ve created a small plugin which performs the task of unobtrusively converting an element, such as an < a >, into a < div > element which holds feed content.

Update: On May 8th, Google announced the Feed Control. As a result, this plugin has been updated (and simplified!) to use the new Google control.

This page demonstrates the plugin by converting the markup displayed below into the feed content displayed in the sidebar to the right. 

 <div id="feeds">     <a class="feed" href="http://jquery.com/blog/feed/">jQuery Blog</a>     <a class="feed" href="http://www.learningjquery.com/feed/">Learning jQuery</a> </div>

Using the Google API, each anchor is converted to a series of semantic < div > elements which can be styled to your liking using CSS. The CSS structure of the generated markup is detailed here: http://code.google.com/apis/ajaxfeeds/documentation/reference.html

The following script is included in the head of this document: 

  <!-- include Google Feed API --> <script type="text/javascript" src="http://www.google.com/jsapi?key=[your API key]"></script>   <!-- include this plugin --> <script type="text/javascript" src="jquery.gfeed.js"></script>   <script type="text/javascript">     // when the DOM is ready, convert the feed anchors into feed content     $(document).ready(function() {         $('a.feed').gFeed( { target: '#feeds', tabs: true } );     }); </script>

Options
Options can be passed to the gFeed method using an object literal. The following options are supported:

target
jQuery selector which identifies where the feed content should be inserted on the page.
title
Allows you to provide a specific feed title to override the markup.
url
Allows you to provide a specific url for the feed (which means you don’t have to use anchors).
max
Identifies the maximum number of feed items to display for a given feed. The default is 5.
tabs
true if feeds should be rendered using Google’s tabbed drawing mode.

Using the options argument we can limit each feed to only 3 items like this: 

  $(document).ready(function() {     $('a.feed').gFeed( { max: 3 } ); });

Manually Adding a Feed
Rather than convert existing elements to feeds, we can easily add feeds on the fly like this: 

   $(document).ready(function() {     // add a feed manually     $('#alistapart').gFeed({         url: 'http://www.alistapart.com/feed/rss.xml',         title: 'A List Apart Feed (Added by Brute Force)'     }); });



Download: http://dllurl.com/36
Source: http://dllurl.com/37

Related Listings:

  1. jQuery Feed Menu When feeds became popular, it worked to have one icon...
  2. jFeed – jQuery Feed Parser A lightweight JavaScript feed parser based on jQuery and couldn’t...
  3. Pulling Your Flickr Feed with jQuery Feeds are the easiest way to view updated content, whether...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.