skip to main | skip to sidebar

Bit.ly Button - jQuery Plugin for Your Clicky Post

bit.ly -The intelligent URL shortener- offers realtime statistics about the clicks on shortened links and this button takes advantage of that information. This jQuery button gives you a uniform click count button -tall or wide- that people can also use it to retweet your post.

When you use a short link to tweet your post, it may get 100 retweets but in terms of bit.ly stats that could mean 1000 clicks coming from the whole twitter ecosystem which makes another interesting measure of how popular is your post!

check out <DEMO/>

First, Include Javascript files..
Of jQuery and this plugin once in your page, at <head> section or by the end of the page.

<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://bitly-button.googlecode.com/files/jquery.bitly-button-1.0.min.js"></script>
* 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"

It is not necessary but it is recommended to use your bit.ly login and API key in order to track your links statistics on your bit.ly dashboard.
Just set these default plugin options with your login and API key right after including the javascript files:
<script type="text/javascript">
   $.fn.bitlyButton.defaults.login = 'your-login';
   $.fn.bitlyButton.defaults.api_key = 'your-API-key';
</script>

You can have a free bit.ly account at http://bit.ly/a/sign_up and get your API key at http://bit.ly/a/your_api_key
 

Second, Place an Anchor link
1. with the class "bitly-button" Where you want the button to show up and button will be auto-loaded with the URL & title of the container page.
<a class="bitly-button" href="http://twitter.com">Retweet</a>

2. You can also customize options like url, title of the desired link. and place options array in a custom HTML5 attribute [data-button]
<a class="bitly-button" href="http://twitter.com/home/" data-button="{
   url:'http://www.moretechtips.net/2010/07/quite-bitly-button-jquery-plugin.html'
   ,title:'Quite Delicious Button - A jQuery Plugin'
   ,nick:'mike_more'
}"
>Retweet</a>

Include your Twitter nick(username) to have retweets prefixed with your username as the source.

Note that, You should escape single-quotes with backslash in the title value. so, you would write 'Joe\'s Button' instead of 'Joe's Button'.
And escape double-quotes like this 'Joe says: &quot;hi&quot;' instead of 'Joe says: "hi"'

3. OR use wide button and place options in HTML comment <!-- -->.
<a class="bitly-button" href="http://twitter.com">
   <!-- {
      url:'http://www.moretechtips.net/2009/12/who-tweet-button-fancy-jquery-plugin.html'
      ,title:'Who-Tweet Button : Fancy jQuery Plugin for Twitter'
      ,button:'wide'
   } -->

   Retweet
</a>

You should escape single-quotes as before. And put a backslash between any 2 consecutive dashes like this 'Joe -\- Button' instead of 'Joe -- Button'.

4. OR Load button by a jQuery call.
<a class="bitly-button-2" href="http://twitter.com">Retweet</a>
<script type="text/javascript">
$(document).ready(function(){
   $('a.bitly-button-2').bitlyButton({
      url:'http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html'
      ,title:'Google Buzz Widget - A jQuery Plugin'
      ,button:'wide'
   });
});
</script>

Features:

  1. Uniform clicks count button - Tall or Wide- to display the count of global bit.ly clicks on all short links that points to your post.
  2. The button calls bit.ly API twice -No matter how many buttons you have on a page. First call, to get the short links and second one to get click stats of them. You should know that bit.ly API accepts 15 links at max. in one call -which is good enough, still the button will automatically handle more links with extra calls to the API.

  3. CSS3 styles are embedded in the script, to minimize page-loading time. Still, you can disable this and create your custom CSS.

  4. You may change the bit.ly icon or host the image somewhere else. You can also replace it with text only.

  5. You can customize the button by placing optional parameters -like custom URL- in a HTML5 data attribute or HTML comment so it would not break HTML validation of your page.
  6. Button will degrade gracefully to a link to Twitter home when javascript is disabled.
  7. The button makes use of jQuery DOM-Manipulation (No document.write) for better integration with your code.
  8. Since this is a Javascript-only solution; you can add this button anywhere you can embed Javascript like Google Blogger, Wordpress, ...
  9. Use a typical jQuery call or auto-load any number of anchor elements with "bitly-button" class.

* I just found now -at the time of writing these lines- that there is a retweet button by John Resig that display bit.ly click count as in my button. But my button is written from scratch, it is built on top of jQuery - that is created by John Resig too :) - and uses the latest version of  bit.ly API  which comes with more efficient handling of multiple links lookup.

8 comments

  1. Web Designer // July 29, 2010 at 8:37:00 PM GMT+10  

    You Highlight Excellent Features, It Helps me in Understanding ...

  2. Beben Koben // July 29, 2010 at 8:48:00 PM GMT+10  

    like tweetme right?
    nice nice, thanks my friends ^_^

  3. Mike // July 30, 2010 at 6:00:00 AM GMT+10  

    @Beben,
    Retweet button like Tweetmeme, but instead of showing number of retweets this one shows number of bit.ly clicks!

  4. CreativeGlofish.com // August 2, 2010 at 10:17:00 AM GMT+10  

    Wow cool, im gonna be using that on my sites!

  5. Bogdan // August 9, 2010 at 4:46:00 PM GMT+10  

    This is a nice one, was searching for something showing the clicks instead of retweets. Thanks Mike!

  6. Web Design Leeds // August 25, 2010 at 3:30:00 AM GMT+10  

    Really great tips here - this is so useful for twitter posts! Thanks for posting

  7. Lunette de soleil Chanel // June 14, 2011 at 4:50:00 PM GMT+10  

    vous fashion.thank pour le partage

  8. Unique // August 5, 2011 at 1:23:00 PM GMT+10  

    Lol, I am about to stop retweeting... this is really cool...

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