Realtime Related Stream Bar: A Collecta-powered jQuery plugin

This is a jQuery plugin to create a bar of real-time stream of information related to your post powered by Collecta search engine. Collecta monitors the streams of news sites, popular blogs and social media. So it can show you results as they happen. There are five content categories in Collecta - updates, stories, comments, photos, and videos.

Check these Demos..

Each one links to the demo page where you can see HTML & CSS & JS you need to use... CSS code is important but it is almost the same across those different samples, so I'm not going to focus on it here.

Demo 1: Typical Real-time Search ►
Post tags will be extracted automatically and used to do a typical realtime search to return related streams..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://realtime-related-stream-bar.googlecode.com/files/jquery.relatedstream-1.0.min.js"></script>

<div class="related-stream">loading..</div>
Use CSS in demo file then include jQuery and plugin JS and add a div with a "related-stream" class and it will be auto-loaded with default options!

Demo 2: Real-time Search by All Tags ►
By default, plugin will search by OR-ing those tags to return results with any of the tags. but you can force it to return results that contain all tags.
you may also limit number of the used tags to avoid empty resultset when Collecta can't find any results that have all tags!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://realtime-related-stream-bar.googlecode.com/files/jquery.relatedstream-1.0.min.js"></script>

<div class="related-stream" options="{
   debug:1
   ,or_tags:0
   ,max_tags:2
   ,animate:'height'
}">loading..</div>
you can see that (or_tags) was set to 0 to disable. and (max_tags) to 2. also animation is done by the height!

Demo 3: Real-time Search without Photos or Videos ►
By default, Search will return results from all content categories. to exclude photos and videos will set (get_photo) and (get_video) to 0. which will leave you with updates, stories and comments.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://realtime-related-stream-bar.googlecode.com/files/jquery.relatedstream-1.0.min.js"></script>

<div class="related-stream" options="{
   debug:1
   ,get_photo:0
   ,get_video:0
   ,animate:'lineHeight'
   ,default_avatar:'http://groups.google.com/group/collecta-developer/icon'
}">loading..</div>
you can see that line-height is used for animation. and (default_avatar) is set with some image URL to show default avatar when no one is present in search result.

Demo 4: Custom Search ►
Not related not realtime search, just searching a fixed query using a typical Javascript call.
(realtime) was set to 0 to stop refreshing search automatically. and Increased (n) which is the number of results to return.
And set (query) to search for jQuery or AJAX.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://realtime-related-stream-bar.googlecode.com/files/jquery.relatedstream-1.0.min.js"></script>
<script type="text/javascript">  
   $(document).ready(function(){
      $('#rrs').relatedStream({
         debug:1
         ,realtime:0
         ,query:'jQuery OR AJAX'
         ,n:20
      });
   });
</script>

<div id="rrs">loading..</div>

Features:
Allow me to summarize the features of this plugin.

1. Show realtime related stream of information based on your post tags.
2. Collecta provides streams of information from a wide variety of sources. you can choose from 5 categories of content:
   • Updates: Tweets, Dents, and other status update messages common on social sites.
   • Stories: blog posts and news articles.
   • Comments: comments for blog posts. but it is expected to include photo and video comments as well.
   • Photos.
   • Videos.
3. Search by tags in OR or AND operators.
4. You can also search using a custom query (Fixed query or based on user input).
5. Many transition options like opacity, height, font-size.
6. Each part of the result -avatar, author name, link- has its own class for easy style customization.
7. Show or hide some parts of the results like avatar, author name, date.
8. Use a typical JS call or auto-load div elements that have "related-stream" class.

Notes:
The Collecta API is very promising, but it is currently beta. So, things might not go as planned in this early stage.

• Searching in updates doesn't return twitter tweets, just Identi.ca dents (and any service related to Status.Net). but the API is supposed to include Twitter later.
• Beta API has an initial limit of 5000 requests per hour. So, things might get a little sluggish if many of you Digg this. So, please don't.. No, not really ;) Digg it and Retweet it if you like.
• It is free API. so, you are required to keep that small Collecta badge as is.

Project
Go to project page for more details on plugin options, request features or submit bugs :(

• Plugin Javascript file (minified ~8KB)
• Plugin Options
• Demo Package
  

Related Work
Lately I've been interested in related information and real-time search . So, this is the 4th plugin in that category:

1. Realtime Related Tweets Bar (2 weeks ago)
2. Rebuilding Google Blog Bar; jQuery-ed Version (Jun 2009)
3. A Smarter Related Posts widget (Apr 2009)

Tags: hot , javascript , jQuery , JSON , realtime-search , RESTful