Realtime Related Tweets Bar: Another jQuery Plugin

Follow my blog with Bloglovin

With all the buzz lately about Twitter real-time search. Why don't you add a real-time tweets bar related to your posts from your twitter timeline or from anybody or even limit it by a geocode coordinates! 

Check out 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: This sample will extract tags that already exists in the page and do a typical realtime related search..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>

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

Demo 2: Few options were changed here:
Limiting tweets by users like @TechCrunch and @mashable only.
Returning only tweets that have links.
Increasing entry transition time of each tweet to 500ms.
Animating text font-size instead of the default opacity animation.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>

<div class="related-tweets" options="{
   debug:true
   ,from_users:'TechCrunch,mashable'
   ,links_only:1
   ,animate:'fontSize'
   ,enter_time:500
}">loading..</div>
Div now has a new attribute (options) that contains comma delimited list of options. (a trailing comma is fatal)  

Demo 3: Returns tweets by users located within a given radius of the given latitude/longitude.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>

<div class="related-tweets" options="{
   debug:true
   ,geocode:'37.400465,-122.073003,25km'
}">loading..</div>
Just added a geocode on the from of "latitude,longitude,radius". 
To convert an address to a geocode try this and don't forget to add the radius in mi(miles) or km(kilometers)!

Demo 4: 
By default, plugin will search twitter by OR-ing those tags to return tweets with any of the tags. but you can force the search to return tweets that contain all tags. 
you may also limit number of the used tags to avoid empty result set when twitter can't find tweets that have all tags on current page!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>

<div class="related-tweets" options="{
   debug:true
   ,animate:'height'
   ,or_tags:0
   ,max_tags:2
}">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 5: Just Your Twitter Timeline ►
This is a -not related not realtime- search, just your twitter feed. and using a typical Javascript call.
'status' was set to 1 to ignore tags.
'realtime' was set to 0 to stop realtime search and perform search once. and Increased 'n' which is the number of tweets to return.
<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-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#rrt').relatedTweets({
         debug:true
         ,from_users:'Mike_More'
         ,status:1
         ,realtime:0
         ,n:20
         ,show_avatar:0
         ,show_author:0
      });
   });
</script>

<div id="rrt">loading..</div>
Since It is just your tweets. you might wanna hide avatar and author name by setting 'show_avatar' and 'show_author' to 0!

Features:Now, You've seen most of the plugin features but let me summarize it..

1. Show realtime related tweets based on your post tags.
2. Show your twitter timeline; related to your post or not.
3. Return only tweets with links or return all.
4. Limit tweets by 1 or more users. (from/to/mention users!)
5. Limit tweets by a location geocode and a radius.
6. Search by tags in Or-ing or And-ing mode.
7. Many tweets' transition options like opacity, height, font-size.
8. Each part of the tweet like Avatar, links, Hashtags.. has its own class so you can customize its style.
9. Show or hide some parts of the tweet like avatar, author name, date.
10. Use a typical JS call or auto-load div elements that have "related-tweets" class.