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: "hi"'
instead of 'Joe says: "hi"'
3. OR use wide button and place options in HTML comment <!-- -->.
<a class="bitly-button" href="http://twitter.com">You should escape single-quotes as before. And put a backslash between any 2
consecutive dashes like this 'Joe -\- Button'
instead of 'Joe -- Button'.
<!-- {
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>
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:
- 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.
-
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.
-
CSS3 styles are embedded in the script, to minimize page-loading time. Still, you can disable this and create your custom CSS.
-
You may change the bit.ly icon or host the image somewhere else. You can also replace it with text only.
- 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.
- Button will degrade gracefully to a link to Twitter home when javascript is disabled.
- The button makes use of jQuery DOM-Manipulation (No document.write) for better integration with your code.
- Since this is a Javascript-only solution; you can add this button anywhere you can embed Javascript like Google Blogger, Wordpress, ...
- 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.
Web developer, jQuery plugin author, social media fan and Technology Blogger.
You Highlight Excellent Features, It Helps me in Understanding ...
like tweetme right?
nice nice, thanks my friends ^_^
@Beben,
Retweet button like Tweetmeme, but instead of showing number of retweets this one shows number of bit.ly clicks!
Wow cool, im gonna be using that on my sites!
This is a nice one, was searching for something showing the clicks instead of retweets. Thanks Mike!
Really great tips here - this is so useful for twitter posts! Thanks for posting
vous fashion.thank pour le partage
Lol, I am about to stop retweeting... this is really cool...