Popular-on-Twitter Widget: Topsy-enabled jQuery Plugin

Another Topsy-enabled jQuery plugin to list the most popular posts on your website, from your Twitter timeline or for some keyword within a selected period of time.
Links are displayed with number of tweets and score -which is calculated by the influence of the people talking about them and affects on sorting those links.

Now Check out these DEMOS..

Demo 1 | Demo 2 | Demo 3

In each demo page you can see the required HTML & CSS & JS... CSS code is essential but I'm not going to focus on it here.

Demo 1: Popular on a Site ►
By setting the site to 'moretechtips.net' (without www), we get popular posts on my blog.
<!-- required javascript :include once -->
<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://popular-on-twitter.googlecode.com/files/jquery.popular-on-twitter-1.0.min.js"></script>
<!-- required javascript :END -->

<!-- required HTML -->
<div class="popular-on-twitter" options="{
   site:'moretechtips.net'
   ,animate:'height'
   ,tweeter_text:''
   ,show_tweet:0
}">loading..</div>
<!-- required HTML :END -->
Use CSS as in demo page then include jQuery and plugin JS.
Add a div with a "popular-on-twitter" class and place widget settings in a custom 'options' attribute.

Demo 2: Popular From a Twitter-er ►
Now showing a bar of popular posts from my Twitter timeline within the last week.
<!-- required javascript :include once -->
<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://popular-on-twitter.googlecode.com/files/jquery.popular-on-twitter-1.0.min.js"></script>
<!-- required javascript :END -->

<!-- required HTML -->
<div class="popular-on-twitter" options="{
   from:'Mike_More'
   ,show_n:1
   ,window:'w'
}">loading..</div>
<!-- required HTML :END -->
'from' was set to my Twitter username.
The number of links to show 'show_n' was set to 1.
Time period 'window' was set to 'w' to return links within last week.
unlike last demo, 'show_tweet' was left to its default value (1) to show the exact tweets about those links.

Demo 3: Popular For a Keyword ►
This demo uses a typical JS call, to create a fixed list of most popular links about 'Twitter' today! <!-- required javascript :include once -->
<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://popular-on-twitter.googlecode.com/files/jquery.popular-on-twitter-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('div.popular-2').popularOnTwitter({
      keywords:'Twitter'
      ,show_n:0
      ,window:'d'
      ,n:5
   });
});
</script>
<!-- required javascript :END -->

<!-- required HTML -->
<div class="popular-2">loading..</div>
<!-- required HTML :END -->
'keywords' was set to 'Twitter'
'show_n' was set to 0 to disable any transitions..
'window' was to set to 'd' to return popular links of today.
Number of links to return 'n' was set to 5.

Widget Features:

1. Display popular posts on a website, from a Twitter username or for some keyword.
   
2. Select the window of time: today, this week, this month. or let Topsy automatically pick the most relevant window.
3. Display links as a bar with transition effects or as a fixed list.
4. Many transition options like opacity, height, font-size.
5. Each part of the link like Title, Score, Hashtags.. has its own class for easy CSS customization.
6. Show or hide some parts of the link like tweet, score, number of tweets.
7. Use a typical JS call or auto-load div elements that have "popular-on-twitter" class.
   

Project | Plugin Options | Download plugin | Demo 1 | Demo 2 | Demo 3

Topsy can do things other search engines don’t usually do. Topsy results are fresh, because they’re based on what you’re talking about right now, Or this week Or the past month.
Unlike Twitter API, Topsy results are ranked by how often they are mentioned, and how influential the people who tweet about them. And that's why this is my third jQuery plugin using their awesome API. check other plugins (Who-Tweet Button, Twitter Trackbacks Widget).

* Original Bird Icon by playground.ebiene.de

Tags: hot , javascript , jQuery , jQuery Plugin , topsy , twitter , Web 2.0