Ever since I saw the Bit.ly JavaScript API I’ve been wanting to build a simple script for tracking the number of people visiting a blog post from Twitter. This past weekend I built a little script for doing just that – and in a completely unobtrusive manner.

The script itself is completely standalone (no dependencies) and can be included in any page relatively painlessly. Additionally, since it’s just HTML, CSS, and JavaScript, it’s completely themeable and customizable to the style of your site.

Usage Sample Codes:

<a class="retweet" href="http://ejohn.org/">John Resig's Blog</a>
 

Tweet Text: “John Resig’s Blog http://bit.ly/vqYAg”

<a class="retweet" href="http://jquery.com/">jQuery JavaScript Library</a>
 

Tweet Text: “jQuery JavaScript Library http://bit.ly/FGybD”

<a class="retweet" href="http://google.com/" title="Google Search Engine">Google</a>
 

Tweet Text: “Google Search Engine http://bit.ly/ScCbV”

<a class="retweet self" href=""></a>
 

Tweet Text: “John Resig – Easy Retweet Button http://bit.ly/1cliT”

Vertical Style
Sample Code

<a class="retweet vert" href="http://ejohn.org/">John Resig's Blog</a>

<a class="retweet vert" href="http://jquery.com/">jQuery JavaScript Library</a>

Tweet Text: “jQuery JavaScript Library

<a class="retweet vert" href="http://google.com/" title="Google Search Engine">Google</a>

Tweet Text: “Google Search Engine http://bit.ly/ScCbV”

<a class="retweet vert self" href=""></a>

Tweet Text: “John Resig – Easy Retweet Button http://bit.ly/1cliT”

How to Use / Installation

Getting the Easy Retweet Button running on your site is painfully easy (ha!).

Step 1: Include the retweet.js file in the of your web site.

<script src="http://ejohn.org/files/retweet.js"></script>
  

(Note: You should place and use a copy from your own site, in case mine ever goes down.)

(Note 2: You DO NOT need a bit.ly account in order to use this script. A working one is provided for you by default.)

Step 2: Add a class of ‘retweet’ to any anchor that you wish to turn into a Retweet button – or add a link with classes of ‘retweet’ and ’self’ to add a retweet button for the current page.

Retweet link for the current page: (See example at the end of this blog post.)

<a class="retweet self"></a>
 

Retweet link for other page:

<a class="retweet" href="http://ejohn.org/">John Resig's Blog</a>
  

Wordpress: If you’re using Wordpress you could sculpt a custom button like so, placed in your single.php theme file (although, the above link types should be more than sufficient for most cases):

 <a href="<?php the_permalink() ?>" class="retweet">< ?php the_title(); ?></a>  

The script has been tested in Internet Explorer 6-8, Opera 9-10, Safari 3.2-4, Chrome 2, and Firefox 3-3.5. Please write a comment if you encounter any problems.

Demo: http://ejohn.org/blog/retweet/
Download: http://ejohn.org/files/retweet.js
Source: http://ejohn.org/blog/retweet/

Related Listings:

1. jQuery Live Search Plugin Updated A Quicksilver-style Live Search to jQuery. Taking a look at...
2. Skype-like buttons using jQuery If you use Skype I am sure that you noticed...
3. Make Sexy Buttons with CSS This tutorial will teach you how to create pretty looking...

Do you like this post?

Email: