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..
- Show realtime related tweets based on your post tags.
- Show your twitter timeline; related to your post or not.
- Return only tweets with links or return all.
- Limit tweets by 1 or more users. (from/to/mention users!)
- Limit tweets by a location geocode and a radius.
- Search by tags in Or-ing or And-ing mode.
- Many tweets' transition options like opacity, height, font-size.
- Each part of the tweet like Avatar, links, Hashtags.. has its own class so you can customize its style.
- Show or hide some parts of the tweet like avatar, author name, date.
- Use a typical JS call or auto-load div elements that have "related-tweets" class.
For more details on plugin options, request features or submit bugs :(
* Original tweeties icon by Chris Wallace








Thanks for these nice demos. Really useful.
@Ali, you welcome. thanks for your feedback
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.
@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.
This article has been shared on favSHARE.net. Go and vote it!
Added to TUTlist.com
Yeah man, nice post, its pretty hard to find nice posts now…
Great demo, but try to move the 'options' attribute to unobtrusive javascript, because this document does not validate as XHTML 1.0 Strict.
@Marc van Neerven,
as in demo 5?
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.
sorry, i add lang:'ru' and it work :)
thanks! :)
but, only one twitt displayed...
@SpirITzzz,
'lang' is an optional parameter, set it to empty string '' to exclude language from the equation..
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.
@deep,
It is a bar so it shows tweet by tweet.. but I'll keep this in mind for next version..
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.
@Mike It will be cool
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 ?
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.
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
@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.
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
@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!