Easy Retweet Button

<a class="retweet" href="https://johnresig.com/">John Resig's Blog</a>

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

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

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

<a class="retweet vert" href="https://johnresig.com/">John Resig's Blog</a>

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

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

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

<script src="https://johnresig.com/files/retweet.js"></script>

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

<a class="retweet" href="https://johnresig.com/">John Resig's Blog</a>

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

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

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

Posted: July 9th, 2009

44 Comments (Show Comments)

1. Andrew Mager (July 9, 2009 at 12:23 pm)

   I like this better than Tweetmeme’s. Great job.

2. Nicholas C. Zakas (July 9, 2009 at 12:26 pm)

   Shouldn’t the title of the button be just “Tweet”? Retweet typically means you copied someone else’s tweet, which isn’t the case here. :)

   (yes, apparently have my nit-picking hat on today!)

3. Sean Nieuwoudt (July 9, 2009 at 12:27 pm)

   and John strikes again!

   Nice one dude!

4. TJ Kelly (July 9, 2009 at 12:27 pm)

   Wow, this is great. Thanks!

5. Remy Sharp (July 9, 2009 at 12:28 pm)

   Nice use of the recycle character over an image, and works in windows to boot :-)

6. magesh (July 9, 2009 at 12:28 pm)

   i really love this… i wanted to try something similar to this…and here you have given it… cool..

7. Joe McCann (July 9, 2009 at 12:29 pm)

   Nice one John…I’ve been messing with some of the url shorteners’ APIs myself. Check out the bookmarklet I created for a quick, “trimmed” link:

   http://tr.im/rAXE

8. John Resig (July 9, 2009 at 12:31 pm)

   @Nicholas C. Zakas: Haha, yeah, I debated what text to put. *shrug* If someone wants to tweak it, it’s as simple as:
   RetweetJS.link_text = "Tweet!";

   @Remy Sharp: Thanks! That was surprisingly hard – OS X gets the recycle character, windows gets the arrow (I like the Recycle better, but most Windows fonts don’t seem to support it, lame.)

9. Daniel (July 9, 2009 at 12:33 pm)

   Um, what about graceful degradation? Disable JavaScript and this becomes a meaningless link, almost a negative user experience. (Tough cookie without some form of pre-processing, I guess)

10. Mike T. (July 9, 2009 at 12:33 pm)

    This should come in handy. :)

    (found a small typo: Completely Unobtrusive You can place the script in the of your document instead of inline.

    You accidentally the whole head element.)

11. David Kaneda (July 9, 2009 at 12:34 pm)

    Awesome work! Totally removes the need for cruddy Tweetmeme, I can see about 100 advantages right off the bat. Really awesome stuff, thanks.

12. Yoosuf (July 9, 2009 at 12:34 pm)

    its a cool and handy code, also a cool re inventsion ;)

13. Devdatta Kane (July 9, 2009 at 12:35 pm)

    This is really good. Great work and thanks!!

14. Phil Dokas (July 9, 2009 at 12:36 pm)

    Under step 1 the closing tag for the script is listed as “</pre>”.

15. Dustin (July 9, 2009 at 12:36 pm)

    Good work John

16. Adam (July 9, 2009 at 12:37 pm)

    In Your last example:
    Tweet Text: “Easy Retweet Button Examples http://bit.ly/LrsqA”

    Refers to the (old?) “/apps/retweet” bit.ly link.

17. Amir (July 9, 2009 at 12:37 pm)

    Nice thanks!

18. heme (July 9, 2009 at 12:39 pm)

    Nice work John!

    Am I correct to assume that your Bit.ly acct info is available in retweet.js? Might want to note that for newbies.

    (apparently I too have my nit-picking hat on today!)

    Thx, great stuff!

19. John Resig (July 9, 2009 at 12:40 pm)

    @Daniel: Well, gracefully degrading to a functional link is fine (in my opinion). If you wanted to have the best of both worlds you could do something like:

    <a href="http://twitter.com/home?status=Some+Text+http://bit.ly/url"
class="retweet self">Retweet This</a>

    The ‘self’ link will override the specified href with the current page, but the retweet link will still work for those who want it (but, as you said, it would require some pre-processing on the server-side, so that’s your prerogative).

    @Mike, @Phil, @Adam: Thanks, fixed!

    @heme: Good point, I’ll clarify this.

20. Stephen (July 9, 2009 at 12:41 pm)

    John, why add ‘vert’ to all elements? Why not just the parent? That’s why it is called Cascading Style Sheets. Otherwise they might have called it Redundant Style Sheets. ;)

21. John Resig (July 9, 2009 at 12:43 pm)

    @Stephen: This is to work around the problem with styling in Internet Explorer. In IE if you say “a.retweet.vert” in your stylesheet it’ll only go with the last specified class name. More details here. This way you can now write “a.retweet strong.vert” instead to get the correct styling in all platforms.

22. JDD (July 9, 2009 at 1:18 pm)

    I love it :D

23. Bernhard Häussner (July 9, 2009 at 4:04 pm)

    Why not making it a bookmarklet to tweet to current page? I would work on all pages and could always be found in the bookmarks toolbar. It could not display the click count though.

24. Rubens Mariuzzo (July 9, 2009 at 4:29 pm)

    Good! I really like it!

25. Blubaar (July 9, 2009 at 4:31 pm)

    I believe Webdings or Windings has such a character, but ofc not at the right position.

    Too bad it’s not possible to check whether a character can be displayed or not…

26. Kyle Simpson (July 9, 2009 at 4:59 pm)

    Great little script/tool. One question… Is the bit.ly url (re)generated on each page load? I know bit.ly will return the same one over and over again, but I’m just wondering if they’re gonna get a crazy amount more traffic now as a result of your button being put on like every site on the net!? :)

    Could the shortened url be stored in a cookie so at least it’s only re-gen’d once for each user’s visit to a page, rather than on every page view?

27. John Resig (July 9, 2009 at 5:17 pm)

    @Bernhard: If someone wants to turn it in to a bookmarklet that’s fine by me. I actually made a Twitter-related bookmarklet at about the same time last year:
    http://ejohn.org/blog/twitter-quick-reply/

    @Blubaar: Interesting point, I’ll have to examine that further.

    @Kyle Simpson: Currently, yeah, it’s going to get regenerated a bunch and increase the traffic to Bit.ly. Looking through their docs they seem to be OK with this (the only catch is that each person can only have so many connections open at a time – but it works out well in this case because browsers naturally limit the number of connections anyway). I’m not completely sure how much benefit could be derived from storing the result in a cookies (especially since most users are only going to encounter a URL once) but it’s definitely something that I’ll consider.

28. muadib (July 9, 2009 at 6:07 pm)

    Thanks! :) I realy like it

29. dotnetCarpenter (July 9, 2009 at 6:58 pm)

    http://www.firstshowing.net/ has already implemented your button.

30. Luke (July 9, 2009 at 10:39 pm)

    FYI, appending style elements to the body is not supported in Safari 3, though that is fixed in 4. Appending to head works for everybody so far as I know.

31. Dom (July 9, 2009 at 10:51 pm)

    Hey nice work.

    Although, ‘clicks’ is not an indicator of the amount of times it has been tweeted. You mention ‘Number of clicks, not retweets’, but the function is tweeting something, so there’s an inherit assumption that the number you are seeing is the amount of times it has been tweeted? Seems very misleading to the average user.

    Love all your work though, jQuery can have my children!

32. Ido Green (July 9, 2009 at 11:45 pm)

    Very nice. I’ll fork it on git and start playing with it this weekend ;)

33. Umut Muhaddisoglu (July 10, 2009 at 12:28 am)

    This is a lovely and well-thought code like always.

    Agree with Kyle that, it would be great to find a way to prevent sending queries to Bit.ly for creating the URL everytime the page loads. But can see that it will become complicated like the need of caching or db entries.

    Anyway, thanks for sharing this great code.

    P.S. I have just implemented it on WebResourcesDepot as well and shared it with “steps for a WordPress installation”: http://www.webresourcesdepot.com/help-your-content-spread-on-twitter-with-easy-retweet-button-wordpress-installation-steps/

34. Hon tap (July 10, 2009 at 4:03 am)

    So cool and easy to use. I’d like to look at your script to see how it works. Thank you very much for this.

35. Jeff Garrett (July 10, 2009 at 11:48 am)

    John,

    This looks awesome. Can’t wait to try it out. I’ve been looking for a Retweet button that could integrate with my own bit.ly account and it looks like this should work great.

    Thanks very much!

    Jeff

36. Mark Aplet (July 10, 2009 at 8:45 pm)

    Thanks for the script John. I created a plugin for mango blog out of your code. Doubt many of your readers have even heard of mango blog before. All the same, here is a link to the post. http://bit.ly/k9lGa Thanks again for all that you have contributed.

37. Bernhard Häussner (July 11, 2009 at 8:19 am)

    John,

    Indeed I crated a little bookmarklet. It does not really use your code (only snips) because I realized I would not need to load bit.ly’s whole Javascript API, just a little JSONP-call. (And it doesn’t do all the cleaning up…)

    For the interested:
    http://bernhardhaeussner.de/blog/77_Twitter_Bookmarklet_III
    The cool thing: It works everywhere – on flickr.com it will even use their flic.kr-URLs

    I would be intersted how many visitors actually use those digg, delicious – and now – twitter buttons. I’m always using bookmarklets.

38. Alex Denning (July 11, 2009 at 10:21 am)

    Pretty awesome John! Not really a big fan of Tweetmememe – this is a great alternative; thanks!

39. Troy DeRego (July 12, 2009 at 11:42 pm)

    Great job! Very simple set up.
    Tweetmeme button was failing and it was driving me nuts trying to figure out why.

    I think you are right on about keeping track of the “number of clicks” instead of “retweets”, much more useful.

    Thanks for sharing!

40. Sudar (July 13, 2009 at 11:21 am)

    John,

    Thanks for the script.

    I have converted this script into a WordPress Plugin called Easy Retweet and is available at http://sudarmuthu.com/blog/2009/07/13/adding-retweet-buttons-for-wordpress-posts.html

    Hope you don’t mind ;)

41. Marc (July 14, 2009 at 1:49 pm)

    Have to agree with DOM. Plus, I think the point of the tweet count is to show a type of social proof – what type of buzz there is about an article on Twitter. I would think only a site owner would care about clicks from Twitter.

42. Heidi (July 18, 2009 at 8:16 am)

    Thanks alot! I like this more than twittermeme´s one! It´s so easy to implement and to configure :) Thanks alot! Great job!

43. Dave (July 20, 2009 at 1:31 pm)

    Remember computer club at Horseheads High School? You must have really intimidated that lady.

44. Dux Raymond Sy (July 23, 2009 at 11:06 am)

    Awesome! used it in my blog and it only toook 3 mins for me to do it! Thanks again.

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.