skip to main | skip to sidebar

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..


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.

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

16 comments

  1. Lam Nguyen // December 29, 2009 at 11:09:00 AM GMT+11  

    Haha, cool, interesting and creative. I really like the most popular for the twitter. Great job Mike :)

  2. Mike // December 29, 2009 at 11:15:00 AM GMT+11  

    @Lam,
    Thanks my friend :)

  3. Mia // December 29, 2009 at 2:51:00 PM GMT+11  

    Well.. youve done it again hackey :) I see you were truly busy down in the lab again :D so proud of you every time !

    M.

  4. Mike // December 29, 2009 at 3:01:00 PM GMT+11  

    @Mia,
    Thanks for stopping by.. and stop calling me hackey, 2010 is almost here :)

  5. Swashata // December 30, 2009 at 2:01:00 PM GMT+11  

    Another great widget from you! You Rock!! B) :)

  6. Mike // December 30, 2009 at 2:47:00 PM GMT+11  

    @Swashata,
    Thanks buddy. Glad you like it :)

  7. valentines day // January 12, 2010 at 9:04:00 PM GMT+11  

    Thanks for this great Widget. It is really creative.

  8. Artem Russakovskii // January 17, 2010 at 1:41:00 PM GMT+11  

    You really need to add a scrolling effect, so that a number of reactions scroll down to the user, similar to the UberVU widget.

    Also, try to make the demos a bit flashier, or maybe even integrated into the page. I guarantee you it'll improve this plugin's visibility

    Otherwise, great job!
    Artem

  9. Mike // January 17, 2010 at 9:57:00 PM GMT+11  

    @Artem,
    Thanks for your valuable feedback.. will keep the "scrolling effect" in mind for next version.
    Also, If you've more specific suggestions to get it more flashier/integrated would be great. thanks :)

  10. Skateboarder // May 23, 2010 at 6:12:00 AM GMT+10  

    Best twitter feed reader I've found. Using it over on my website.

  11. Mike // May 23, 2010 at 9:26:00 AM GMT+10  

    Thanks @Skateboarder :)

  12. Skateboarder // May 25, 2010 at 5:25:00 AM GMT+10  

    Hey Mike, I'm a bit of a javascript newb so maybe I'm missing something, but is there any easy way I can get these external links to pop open in a new? I use a javascript on my site that adds in the target="_blank" for me, but these twitter posts seem to open in the same window.

  13. San Diego Oceanfront rentals // October 4, 2010 at 8:36:00 PM GMT+11  

    Good job done....I guarantee you it'll improve this plugin's visibility....

  14. utzutz // October 11, 2010 at 9:55:00 PM GMT+11  

    First of all, great script... secondly, any way to give the resulting li-items different sizes, like the most tweeted one more width compared to the second, and so on ?

    Thanks in advance...

  15. Homzmart // April 30, 2011 at 8:28:00 PM GMT+10  

    Just wanted to say great job with the blog, today is my first visit here and I’ve enjoyed reading your posts so far.

  16. Pepe Fanjul // July 7, 2011 at 10:20:00 PM GMT+10  

    Thanks for giving the widget features like Display popular posts on a website, from a Twitter username or for some keyword...It is very informative post..thanks for it

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