skip to main | skip to sidebar

Follow & Tweet Widget - Another jQuery Plugin

This plugin displays avatars of people who have recently followed your twitter account and tweeted your link. It would be useful when you have a new project launch and you need to encourage people to follow & tweet it by showing their Twitter avatars!

The plugin is a mix of two of my favorite plugins: Twitter Friends & Followers Widget and Twitter Trackbacks Widget. It first queries Topsy API to get tweeters and compares them with followers returned from Twitter API.

View these Demos..
Each demo page contains HTML & CSS & JS you need to use... Few CSS lines are needed, but will not focus on it here.

* If you don't see any avatars in these demos, you should:
1- Follow me
2- Tweet This Post

Demo 1
By Default widget will fetch your latest 20 followers who tweeted your URL and append each Twitter avatar with a fade transition.
There are 2 essential options: the URL and the Twitter username, that should be placed in the options attribute of any Div element with class name as "follow-tweet".

<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://follow-tweet-widget.googlecode.com/files/jquery.follow_tweet-1.0.min.js"></script>

<div class="follow-tweet" options="{
   debug:1
   ,username:'mike_more'
   ,url:'http://www.moretechtips.net/2010/06/follow-tweet-widget-another-jquery.html'
}"
></div>

Demo 2
<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://follow-tweet-widget.googlecode.com/files/jquery.follow_tweet-1.0.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#friends').followTweet({
         debug:1
         ,username:'Mike_More'
         ,url:'http://www.moretechtips.net/2010/06/follow-tweet-widget-another-jquery.html'
         ,n:60
         ,user_animate:'width'
         ,friend_calls:2
         ,tweeter_calls:2
      });
   });
</script>

<div id="friends"></div>

This demo loads the plugin on document-ready event with few options changed:
- Used the 'width' for picture animation instead of default opacity animation.
- Changed the default users count to 60.
- Increased number of Twitter & Topsy API Calls to aggregate more users avatars.
* Over-increasing number of calls will delay the plugin output and may result that site-users being blocked by the API when rate limits for Twitter or Topsy get exceeded.

* Plugin was also tested to work with jQuery 1.4.2, Just replace jQuery Javascript path to "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

Widget Highlights:

  1. Show your latest Twitter followers who tweeted your link.
  2. It can work with friends instead of followers.
  3. You can control number of API calls made to Twitter & Topsy to be able to show more avatars.
  4. Instead of linking people avatars to their twitter page; You can link it to their home pages.
  5. It can easily fit in different layouts by adjusting the number of avatars and its dimension.
  6. Few transition options to apply to avatars like opacity, width, height.
  7. Use a typical jQuery call on document ready or the plugin will auto-load any div elements that have "follow-tweet" class.
  8. Widget adds a small "i" letter that links to the widget page. You can remove it by setting (info) option to empty string (''), but I'll appreciate it if you attribute/link-back to me elsewhere on your website.

Go to plugin page for more details on plugin options, request features or submit bugs.

Demo 1 | Demo 2 | Download Plugin | Plugin Options | Plugin Page

* Credits of inspiration go to Noura Yehia for motivating me to do this plugin.

9 comments

  1. Noura Yehia // June 28, 2010 at 8:59:00 AM GMT+10  

    Thanks Mike for creating this simple yet very useful technique specially for start-ups.
    I was searching for a plugin to do it but had no success, i can only show my followers or who tweeted my story.

  2. Mike // June 28, 2010 at 9:19:00 AM GMT+10  

    Thank you Noura for inspiring me to do it :)

  3. 736 Studios // July 6, 2010 at 8:11:00 PM GMT+10  

    Fantasic! Exactly what I was looking for!

  4. Визитки Брошури // July 20, 2010 at 11:16:00 PM GMT+10  

    Nice post. Thank's for share

  5. Road2Tech // July 25, 2010 at 9:38:00 PM GMT+10  

    Really nice post and I might use this plugin on my blog. I think you should write something about how to get more twitter followers.....

  6. Web Design Norwich // July 26, 2010 at 8:47:00 AM GMT+10  

    great blog, intersting read, keep up the good work!

  7. Custom Web Designer // July 30, 2010 at 8:51:00 PM GMT+10  

    Interesting & Very Useful Work ! I Like your Work :)

  8. dunk low // June 14, 2011 at 6:21:00 PM GMT+10  

    ok.trop cool et je reviendrai la prochaine fois.

  9. dunk low // June 18, 2011 at 8:25:00 PM GMT+10  

    so nice,thank you for sharing.

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