skip to main | skip to sidebar


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: Typical Real-time related Search
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: Real-time Search Limited to Some Users
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: Realtime Search Limited by Geocode of 'Mountain View, CA'
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: Realtime Search by All Tags
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.
Project Pages
For more details on plugin options, request features or submit bugs :(
* Original tweeties icon by Chris Wallace

23 comments

  1. ali kinaze // September 27, 2009 11:58:00 AM GMT  

    Thanks for these nice demos. Really useful.

  2. Mike // September 27, 2009 12:50:00 PM GMT  

    @Ali, you welcome. thanks for your feedback

  3. Ian Drake // September 28, 2009 4:07:00 PM GMT  

    That's a really nice plugin.

    I've done something similar, just static. Getting related tweets and putting the content on my site helps with long tail searches which bring some surprising traffic and downloads.

    I suspect there would be no SEO benefit with dynamic content that doesn't have a perma-link. Still very cool though. I might use it somewhere else.

  4. Mike // September 28, 2009 5:32:00 PM GMT  

    @Ian Drake,
    Thanks for your SEO feedback :)

    I agree that there would be no SEO benefits compared to static content that Search engines can crawl. But there is a small chance that referring to others can get them to link back to you when they check their analytics!

    Still, It is more suitable to Bloggers that can only embed HTML/Javascript code on their blogs.

    And more important the real-time search thing is what this plugin is all about. may be combining both sides -client & server- can be the best.

  5. favSHARE // September 29, 2009 11:22:00 PM GMT  

    This article has been shared on favSHARE.net. Go and vote it!

  6. Tutlist // September 30, 2009 2:11:00 AM GMT  

    Added to TUTlist.com

  7. SharePoint developer // September 30, 2009 3:18:00 PM GMT  

    Yeah man, nice post, its pretty hard to find nice posts now…

  8. Marc van Neerven // October 11, 2009 8:40:00 AM GMT  

    Great demo, but try to move the 'options' attribute to unobtrusive javascript, because this document does not validate as XHTML 1.0 Strict.

  9. Mike // October 11, 2009 11:38:00 AM GMT  

    @Marc van Neerven,
    as in demo 5?

  10. SpirITzzz // October 26, 2009 5:33:00 PM GMT  

    Hi, you plugin don`t work correctly with Russian twits.

    for testing: http://twitter.com/SpirITzzz
    from_users:'SpirITzzz',
    don`t displayed any tweets.

    But from_users:'inpel' - displayed, because this user have twits in English and displayed only they.

  11. SpirITzzz // October 26, 2009 5:37:00 PM GMT  

    sorry, i add lang:'ru' and it work :)
    thanks! :)

  12. SpirITzzz // October 26, 2009 5:53:00 PM GMT  

    but, only one twitt displayed...

  13. Mike // October 26, 2009 11:17:00 PM GMT  

    @SpirITzzz,
    'lang' is an optional parameter, set it to empty string '' to exclude language from the equation..

  14. deep // October 27, 2009 4:57:00 AM GMT  

    Hello mike,

    Could you please tell me how can i show 3 tweets at time? i mean, each time i want to show three tweets like news sticker.

    Thanks.

  15. Mike // October 27, 2009 11:22:00 AM GMT  

    @deep,
    It is a bar so it shows tweet by tweet.. but I'll keep this in mind for next version..

  16. deep // October 27, 2009 11:25:00 AM GMT  

    Thanks for your reply mike,

    I have got the solution from here

    http://tweet.seaofclouds.com/

    if you would like to check it.

    anyways great plug in.

  17. balcon // November 3, 2009 11:04:00 AM GMT  

    @Mike It will be cool

  18. Mia // November 14, 2009 12:34:00 AM GMT  

    Great plugin Mike , do you have any plans on 'styling ' it in any way ? say even as much / little as color backgrounds , borders or is this option strictly left up to the user ?

  19. Mike // November 14, 2009 12:41:00 AM GMT  

    thanks @Mia,
    well, every piece of the tweet content has its own CSS class so the user can customize the style easily.. check the source code of the demo links to see the used CSS.

  20. gc // November 15, 2009 3:26:00 AM GMT  

    Hi,

    Been playing with this and like would I see. Very nice. Can you tell me of any disadvantages or adverse side effects of placing more than I bar in the same page? I suspect there may be some performance issues, but I'm trying to figure out if there is a problem having more than 1 '< d i v class="related-tweets" options="{...' in the same page, each with different settings. Again, I think this is great and hope to use it in a website after reviewing the usage terms and conditions.

    gc

  21. Mike // November 15, 2009 1:50:00 PM GMT  

    @gc,
    You can place many bars with no problem.. one thing to notice in general: 'n'(Number of tweets to return) should be more than 10, so plugin won't need to auto-update results too often and get blocked by the twitter API.

  22. steve // November 18, 2009 8:47:00 PM GMT  

    Hey i've tried to hook this up to my twitter account 'lionart' but it doenst seem to like it and constantly reads loading... but seems to work fine with accounts with more tweets / followers, any ideas how to get it to work? If you can let me know and tweet me that'd be great! Thanks

  23. Mike // November 18, 2009 11:36:00 PM GMT  

    @steve,
    That's so weird, Searching twitter like this:
    http://search.twitter.com/search?q=from%3Alionart
    is not returning any tweets of yours.. seems like bug in Twitter search!
    Check out this Twitter FAQ [I can't find myself in Twitter search!] in case that was the reason.
    Probably you will need to contact their support
    Let me know of any updates of this issue!

Post a Comment

You can use some HTML tags, such as <b>, <i> but no links!
Thank you for taking the time to comment..But don't waste it on spamming!

Recent Posts

Mike

Mike More After few years as a web developer, I started to like blogging as a way to improve my skills and to share knowledge too. My favorite topics are ASP.Net,ASP, JavaScript, jQuery, XML and SQL Server.

Subscribe by email

Enter your email address:

or via RSS Feed

Now, take a break

<connect></connect>