skip to main | skip to sidebar

Who-Tweet Button - Fancy jQuery Plugin for Twitter
I took the Topsy retweet button and jQuery-fied it, then added the "Who" part to it using the awesome Topsy API. to create this fancy share count button for your stories on twitter. that's it!

The Who part is about attributing the people who tweet your story by showing their Twitter pictures inside the retweet button. Topsy  keeps a complete history about Twitter trackbacks of your links which I utilized in another jQuery plugin and inspired me with this idea.

Now Check out these DEMOS..

Demo 1: Basic
Just, Include plugin CSS, jQuery library and plugin JS. then, add a div with a "who-tweet" class and the button will auto. attached to it.

<!-- Include CSS and JS once in your page -->
<link type="text/css" rel="stylesheet" href="http://who-tweet-button.googlecode.com/svn/v1/who-tweet-button-1.0.css"/>
<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://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js"></script>
<!-- Include CSS and JS :end -->

<!-- Required HTML -->
<div class="who-tweet" options="{
   nick:'Mike_More'
}"
>loading..</div>
<!-- Required HTML :end -->

Although all arguments are optional. It is better to set your own Twitter nickname (username), So when people retweet your link; your nickname appears as the source.
Link URL will be automatically grabbed from the page this code is placed in.
* You can see that Topsy badges that link as "Top 1K". What are Top Links?

Demo 2: Advanced
This time will use a typical Javascript call to attach the button to the selected element(s).. After we include Plugin CSS, jQuery library and plugin JS as before.
<!-- Include CSS and JS once in your page -->
<link type="text/css" rel="stylesheet" href="http://who-tweet-button.googlecode.com/svn/v1/who-tweet-button-1.0.css"/>
<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://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js"></script>
<!-- Include CSS and JS :end -->

<!-- Attach button -->
<script type="text/javascript">
$(document).ready(function(){
   $('div.who-tweet-2').whoTweet({
      nick:'Mike_More'
      ,url:'http://www.moretechtips.net/2009/11/twitter-trackbacks-widget-jquery-plugin.html'
      ,n:20
      ,inf_only:1
      ,inf_tip:1
      ,tweet_tip:1
      ,animate:'height'
   });
});
</script>
<!-- Attach button :end -->

<!-- Required HTML -->
<div class="who-tweet-2">loading..</div>
<!-- Required HTML :end -->

few options were changed here:

  • 'url' is manually set. You can see that this time the link has no special Topsy badge for top stories.
  • Changed number of pictures to show 'n' to 20.
  • Set 'inf_only' to 1 to get pictures from influential tweeters only.
  • Set 'inf_tip' to 1 to show people's influence level as a tool tip.
  • Set 'tweet_tip' to 1 to show people's tweets as tool tips.
  • Animating picture height instead of the default opacity animation.

Features:

  1. Display Twitter pictures of people who tweet your link.
  2. You can show pictures of highly influential users only.
  3. Display people tweets as a tool-tip when hovering over their pictures.
  4. Many transition options like opacity, height and width.
  5. The button is not Iframe-Based. Which means you can easily customize its style to blend into your theme.
  6. The button makes use of jQuery DOM-Manipulation (No document.write) for better and optimal integration with your code.
  7. Use a typical JS call or auto-load any number of div elements that have "who-tweet" class.
  8. Still, you can display the original retweet buttons -tall or wide- without the Who part.

Now, it is time for your feedback.. is it fancy or not :)


30 comments

  1. Mia Zoe // December 8, 2009 at 6:52:00 PM GMT+11  

    GREAT work H**ckey ! very proud of you :))

  2. Drew Douglass // December 8, 2009 at 9:14:00 PM GMT+11  

    Wow, this is a really creative and unique take on an already great idea, I love it! Great work :)

  3. Mike // December 8, 2009 at 11:43:00 PM GMT+11  

    @Mia,
    Oh, Thanks dear :)

    @Drew,
    Thanks man.. I'm glad you liked it :)

  4. Elijah Manor // December 8, 2009 at 11:55:00 PM GMT+11  

    Hey, my elf hat made the banner picture ;)

    Nice post... will be tech tweeted at 8:45am CST

  5. Mike // December 9, 2009 at 10:03:00 AM GMT+11  

    @Elijah,
    ya, I was counting on it to get people to like this plugin :)
    thanks for your comment and the RT..

  6. asep canda // December 11, 2009 at 4:43:00 AM GMT+11  

    nice job team

  7. Anonymous // December 14, 2009 at 7:37:00 AM GMT+11  

    lovely, it didn't work right on localhost but when I put it on a real webserver it was just as you said! Now what about the banner????

  8. Mike // December 14, 2009 at 7:41:00 AM GMT+11  

    what banner ?

  9. Anonymous // December 14, 2009 at 8:14:00 AM GMT+11  

    Well I'm both confused and pleased. There is a rotating banner at the bottom of the post that appears to show the people who tweeted this. It is not the button your demos show. Haven't looked inside it yet. Furthermore, I would think you'd *USE* the same button your talking about. I can't just tweet this from a single click on the button because the button isn't here. The banner isn't clickable.
    Secondly I think the word "retweet" is confusing... what people are doing when they click the button seems to be tweeting a link to the page. Retweeting is when you copy a tweet someone else already tweeted and attribute them. If it is the second time someone tweets it that may technically be a retweet, but it isn't in the twitter nomenclature sense.
    Thirdly, I'm pleased, as my avatar did appear, (I set inf_only) so does this mean I'm an influential tweeter according to whatever metric they use?
    Finally, would this totally replace the "tweet this" plugin on wordpress?

    Thanks.

  10. Mike // December 14, 2009 at 8:48:00 AM GMT+11  

    @tixrus,
    Oh, by the banner you mean the Twitter Trackbacks Widget. As you said, It shows the tweets about each post.
    The "retweet" link does what it should do. Tweeting the link with attribute to the original author.
    Yes, your influential score is 2/10.
    No, "Twitter Trackbacks Widget" is very diffrent than tweet-this.

  11. World Fishing News // December 23, 2009 at 5:31:00 AM GMT+11  

    Hi looks Great but me and code do not get on could you please help and send me the code to use for my twitter user name worldfishing as every time I try to use the above code I keep getting your picture on the button.
    Much appreciated
    Billy
    World Fishing News
    billyfishing@wis-fm.co.uk
    Thank you.

  12. Mike // December 23, 2009 at 5:58:00 AM GMT+11  

    @Billy,
    done!

  13. Selvam // December 28, 2009 at 11:06:00 PM GMT+11  

    really nice and i'm gonno use this...thanks alot

  14. gs // January 25, 2010 at 7:59:00 PM GMT+11  

    Is it possible to customize twitter message as follows.

    RT #<sometext> @<nick_name>, <url>

  15. gs // January 25, 2010 at 8:19:00 PM GMT+11  

    I am talking about add #tags.

  16. Mike // January 26, 2010 at 12:52:00 AM GMT+11  

    @gs,
    You mean a retweet template? Can be done in next version!

  17. how to ollie // February 4, 2010 at 10:13:00 AM GMT+11  

    Excellent post and writing style. Bookmarked.

  18. jogjashoppingcenter.com // April 7, 2010 at 11:21:00 PM GMT+10  

    great plugin and tools, maybe i have to try for my account, thx a lot friend

  19. Noura Yehia // June 21, 2010 at 5:48:00 PM GMT+10  

    Hi Mike,
    Thanks for this awesome plugin. Is there a way i could display the avatar of x number people who just tweeted my story?

  20. Mike // June 22, 2010 at 8:49:00 AM GMT+10  

    @Noura,
    You welcome,
    check out option 'n' to set number of avatars to display..

  21. Noura Yehia // June 25, 2010 at 10:32:00 AM GMT+10  

    Thanks Mike for your feedback.
    I have another question, is there a way i can combine your 2 plugins: this one and the one you created to show avatars of your followers http://www.moretechtips.net/2009/10/twitter-friends-followers-widget-jquery.html

    I want to show avatar of people who tweeted my link and at the same time they are also my followers.

    Thanks for your awesome support!

  22. Mike // June 25, 2010 at 9:45:00 PM GMT+10  

    @Noura,
    You most welcome..
    Right now, there isn't a way to combine both plugins ):
    and I don't think it will be feasible to do it, since it will require the plugin to do many requests to Topsy API and Twitter API to compare re-tweeters with followers..

  23. Noura Yehia // June 26, 2010 at 6:26:00 AM GMT+10  

    Thanks Mike for your instant reply. I just saw this technique at http://campl.us at the bottom of the page. Where you can see avatars of users who just followed them and tweeted their message.

    Could you give me a hint or something about how to create this same technique?

    Thanks,
    Noura

  24. Mike // June 26, 2010 at 9:50:00 AM GMT+10  

    @Noura,
    I believe, it is done by server-side code (you can see avatars html in the source code). So, I don't think there is some plugin used for that.
    It can be done with Topsy API & Twitter API. How exactly, Depends on what you need..
    One note about campl.us, the avatars list is not updating frequently!

  25. Joana Morais // June 28, 2010 at 7:34:00 PM GMT+10  

    absolutely brilliant, thanks for creating this :)

  26. kmartin7 // October 22, 2010 at 7:09:00 AM GMT+11  

    Very Nice! I'm gonna use it on my blog. @WebsitesWork.

  27. Moderator // November 14, 2010 at 7:51:00 AM GMT+11  

    I <3 jQuery. Thanks for sharing your tips & tricks <3

  28. Mike // November 14, 2010 at 9:28:00 PM GMT+11  

    @Lauren,
    you most welcome :)

  29. ajaxified // January 17, 2011 at 4:54:00 AM GMT+11  

    Very nice job, I shall list it on my site

  30. Mike // January 17, 2011 at 12:39:00 PM GMT+11  

    Thank you @ajaxified :)

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