Add a Retweet Button to Any Page

by Curtiss   |   last updated September 13, 2009   |   Javascript Tutorials · Web 2.0 ·

A few weeks ago, I came across a really nice script that lets you add a retweet button to any page of your site. You can add it into your site template or add it to a single page. The script uses simple javascript DOM replacement rather than inserting an iFrame the way other retweet scripts do. On top of that, the button is not associated with any specific Web site, so it won’t inject any additional text into the default status message it sends to Twitter. This script is very flexible and brings with it quite a few nice features. Following is a quick rundown of some of the nicer features you’ll find. More information is available in the original post on John Resig’s blog.

1. All URLs will be automatically shortened with bit.ly
   1. You can associate a generic bit.ly account (set up by John Resig, the guy who created this script, specifically for this project) or you can associate your own bit.ly account with your username and API key.
2. You can specify a custom URL to shorten and use with the retweet button (so, for instance, if you wanted a different button inserted with each summary on your front page, you could have the retweet button lead to the actual post rather than leading to the front page of your Web site).
3. You can specify custom text to use as the text of the tweet.
4. You can easily switch between a horizontal display (the count and the button, side-by-side) and a vertical display (the count on top of the button).

Another nice thing about this button is the fact that the appearance of the button is controlled completely by CSS, so it’s rather simple to change the way it looks. If you are looking to add a retweet button to your Web site, I would highly recommend using this script rather than using any of the alternatives available out there.

This script is offered under the MIT license, so you are free to use it, modify it and distribute it basically any way you see fit.