skip to main | skip to sidebar

Realtime Related Stream Bar; 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 :(
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)

19 comments

  1. tok // October 7, 2009 at 2:56:00 AM GMT+11  

    hmm i just see 'loading...'

  2. Mike // October 7, 2009 at 3:09:00 AM GMT+11  

    @tok,
    which demo exactly?
    All'r running with me.. may be a glitch or a Digg/Tweet effect..

  3. tok // October 7, 2009 at 3:59:00 AM GMT+11  

    looks like it works only in ff. i get 'loading' in all demoes in opera\ie\safari :(

  4. Mike // October 7, 2009 at 4:35:00 AM GMT+11  

    @tok,
    ok, will check them out and get back to you. thnx

  5. Mike // October 7, 2009 at 11:59:00 AM GMT+11  

    @tok,
    It was IE problem!
    I made it work for Opera.
    I'll check on Safari tomorrow, then EVIL IE.
    Stay tuned. Thnx for your feedback :)

  6. Mike // October 8, 2009 at 1:20:00 PM GMT+11  

    @tok,
    I got it working for all including Safari, Opera and EVIL IE.
    But Just Now Collecta API returns "API request limit reached". So, I'll wait for a while to test it properly.
    I guess the plugin is getting high traffic!

  7. Mike // October 9, 2009 at 2:18:00 AM GMT+11  

    It should be working now for all browsers including Safari, Opera and EVIL IE.
    "API request limit reached" response was reset.

  8. FAQPAL // October 10, 2009 at 2:00:00 PM GMT+11  

    Looks fantastichanks for the share.

  9. Mike // October 10, 2009 at 2:05:00 PM GMT+11  

    @FAQPAL, thanks

  10. FAQPAL // October 11, 2009 at 12:16:00 PM GMT+11  

    @Mike Anytime, glad to promote anything that deserves it likes this does.

    Hope to see more of your stuff.

  11. Mike // October 11, 2009 at 12:44:00 PM GMT+11  

    @FAQPAL,
    I'm glad you like it, thanks for your support :)

  12. clippingimages // October 18, 2009 at 8:57:00 PM GMT+11  

    WoW :) Great article. Collecta really inspired me. Thanks for this lots of information which i shared from this article.

  13. free Games // November 15, 2009 at 6:29:00 AM GMT+11  

    i will try later, thnx for share

  14. r4i firmware // December 8, 2009 at 10:38:00 PM GMT+11  

    Thanks for sharing. Looks perfect, I will be trying it soon.

  15. Mia // January 21, 2010 at 8:39:00 PM GMT+11  

    yet another great plugin by YOU ! so whats next Michael ? the reinvention of the wheel ??? :) So proud of you H**key ☺:) <3

    M.

  16. Mike // January 22, 2010 at 12:46:00 AM GMT+11  

    Thanks Mia. Will look for a Wheel's API :)

  17. mfsmillie // March 3, 2010 at 11:39:00 AM GMT+11  

    I like this, but would like to "hard code" the tags...can you show me how?

    Thanks

  18. Mike // March 3, 2010 at 12:22:00 PM GMT+11  

    @mfsmillie,
    check demo #4

  19. Atiqur Sumon // June 25, 2010 at 2:14:00 PM GMT+10  

    I was searching for a plugin for creating bar in my site.I used your suggested one and got good result.Thanks.

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net
More Tech Tips! | Technology tips on web development

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS