John Resig - Blog

Blog

Easy Retweet Button

July 9th, 2009

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. Before explaining how to use it, some demos:

Demos

Simple Style

	Sample Code
John Resig's Blog	<a class="retweet" href="http://ejohn.org/">John Resig's Blog</a> Tweet Text: "John Resig's Blog http://bit.ly/vqYAg"
jQuery JavaScript Library	<a class="retweet" href="http://jquery.com/">jQuery JavaScript Library</a> Tweet Text: "jQuery JavaScript Library http://bit.ly/FGybD"
Google	<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
John Resig's Blog	<a class="retweet vert" href="http://ejohn.org/">John Resig's Blog</a> Tweet Text: "John Resig's Blog http://bit.ly/vqYAg"
jQuery JavaScript Library	<a class="retweet vert" href="http://jquery.com/">jQuery JavaScript Library</a> Tweet Text: "jQuery JavaScript Library http://bit.ly/FGybD"
Google	<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 <head> of your web site.

(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.)

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.

Configuration and Themeing

There are a few options for the Retweet button that you can use. If you're going to change them you can do so by changing the following properties after you've already loaded the retweet.js file. However, I highly recommend that you download a copy of the retweet.js file, make the changes in the file itself, and simply load that result instead.

RetweetJS.link_text (Default: "Retweet")

You can change this to another value and change the text in all of the Retweet buttons. (Good for handling different languages.)

RetweetJS.count_text (Default: "clicks")

Right now only "clicks" are supported but if you specify "none" it will show no count (and load much faster, as a result).

RetweetJS.prefix (Default: "")

Setting to "RT @jeresig " will add it to the front of the tweets.

RetweetJS.styling (Default: The full CSS used for styling the retweet button.)

You'll probably want to either tweak the CSS from inside the file itself or completely overwrite it and include your own styling elsewhere. The markup for the button is surprisingly simple:

<a href="..." class="retweet"><strong>4 </strong><span>Retweet</span></a>

And if you have a vertical-style button the markup is:

<a href="..." class="retweet vert"><strong class="vert">4 </strong><span class="vert">Retweet</span></a>

RetweetJS.bitly_user
RetweetJS.bitly_key

These default to a dummy account ('retweetjs') that can be used indefinitely. However if you wish to keep track of your own links and add them to your own Bit.ly account then please add in your Bit.ly username and API key (which can be found on your Bit.ly account page). These values should be changed within the retweet.js file itself.

Alternatives

Two alternatives that I know about are the Tweetmeme Button and the Backtype Tweetcount.

Some of the major differences between this script and those are:

Completely Unobtrusive You can place the script in the <head> of your document instead of inline. The other scripts rely upon document.write() and write out iframes into your document.
Speed Retweet.js works completely asynchronously, loading data and updating the rendering as it comes in. This means that the buttons won't block your page while they're loading (unlike the other buttons).
Pure HTML/CSS The result is just pure HTML styled with CSS - you can customize it however you wish, no images are required.
Number of clicks, not retweets. The number of retweets may be interesting to some but it's a poor indicator of actual traffic. Instead, the number of clicks coming in is shown instead (a much more useful number).
You control the data All tracking works directly through Bit.ly, not a third party - this means that all the clicks and traffic can be stored straight in your bit.ly account, not some third parties.
100% Open Source This script is released under the MIT license and is completely open to modification and redistribution. The full source is available on Github.

If you have any questions regarding the script please feel free to post them her in the comments. If you have any tweaks for the script, please apply them against the source repository. Enjoy!

Tags: javascript, twitter

44 Comments on 'Easy Retweet Button'

Twitter Quick Reply

June 24th, 2008

A quick bookmarklet that I made for Asa Dotzler. If you've ever visited a tweet, on Twitter, directly, and had wished to immediately reply to its author you probably found it to be quite convoluted (typically this is the case if you subscribe to services like Summize or Tweetscan. It usually involves copying the username, visiting the reply screen, and then typing/pasting in the relevant parts to make the @reply. Instead you can just use the following bookmarklet to make that easy.

javascript:window.location=window.location.href.replace(/(com.)([^.\/]+).*/,"$1home?status=@$2+");

First, Drag this to your bookmark bar: Twitter Reply

Second, visit a tweet: http://twitter.com/jeresig/statuses/841204003

Then hit the bookmarklet and you should be taken to the reply screen with "@jeresig " (or whatever the appropriate username is) already pre-filled in. Enjoy!

P.S. As a bonus it maintains the http/https URL protocol, as well.

Tags: twitter, javascript

6 Comments on 'Twitter Quick Reply'

@Twitter

February 2nd, 2008

I'm not sure why, but I've become hooked on Twitter. I find it to be interesting because I don't get hooked on new social network-like sites very easily, but I'm stuck in here pretty good. Here's some random thoughts that I've pulled together concerning my use of the site:

I really enjoy the 140 character constraint. I feel as if I become more creative in my posts and choose my content more wisely. I'm intrigued by the concept of Microblogging as a whole - the result feeling completely different from normal blogging.
Being able to update it from your cell phone, in a pinch, is absolutely key. This is a major differentiator from normal blogging.
It took me a while to realize this but the major differentiator of Twitter, compared to just straight-up blogging, is that you have a feed reader integrated into your blogging engine. It's such a smart and obvious concept, once you think about it. It definitely makes the cost of starting a Twitter competitor that much higher (since you have to build a network in order for it to become useful).
I've often wondered if a distributed twitter would be possible - more decentralized like normal blogging. I think it would work, as long as your blogging engine was also a feed reader (actively pulling in your friends content).

Follow Me!

If you're interested, you should follow me on Twitter - I'll probably follow you back if you talk about tech/JavaScript-related stuff. I tend to post minor things that don't make it to my blog (stuff about book writing, programming, Mozilla, traveling, etc.) so it ends up being a good source of micro information.

Bitlog

I casually mentioned that I was working on a Twitter clone in my JavaScript Pretty Date post. Honestly, I haven't really touched it since last May. I figure that if I don't get people looking at it now, it'll never get released. You can check it out here, I call it Bitlog. I have registration closed right now - if you're interested in trying it out ping me with your desired username and I'll hook you up.

It's horribly buggy and incomplete (at this point, it's nothing more than a crippled blogging engine - no networking or mobile aspects) but someday I hope to wrap it up and release it, open source, for all to consume. The Ajaxy bits are pretty slick (one-page login, logout, posting, etc.) - I hope to put some more effort into them at some point. It's in PHP 4 (compatible with 5, as well) and has no dependencies - so it should be stupid simple to deploy to the server of your choice. If anyone is interested in hacking on the code, please let me know, I'd appreciate that as well.

Tags: bitlog, twitter, php, blog

16 Comments on '@Twitter'