Twitter "Don't Click" hack explained

The 'hack' that is spreading through twitter like wildfire right now is pretty simple. The idea is when you click on the url http://tinyurl.com/amgzs6 a page that looks like this is loaded:


When a user clicks on the "Don't Click" button a tweet containing the same link 'automagically' gets posted to his or her twitter.



How does this work? The trick is fairly simple, the 'Don't click' button is actually loaded beneath the regular twitter page. This is accomplished by loading twitter in an iframe and setting the CSS z-index property of that iframe to something lower than the z-index of the button.

But the twitter page is also set to transparent. Using CSS, the twitter page is moved so that the now invisible 'Update' button on Twitter is exactly on top of the visible "Don't Click" button. So when you think you are clicking on the latter, you are actually clicking on the former.

This only works if the user is logged in though becuase Twitter allowes posting right from a url:

http://twitter.com/home?status=XXXX
where XXXX is the tweet.

CSS used to accomplish this:



Finally, if we set the iframe to only partially transparent, we can actually see how the two buttons are placed on top of each other:



What an example of the use of reverse psycology and virality!