How to create a one-click Twitter follow button

Conga

Photo by Pilipala9

When I was putting together my list of Boulder twits, I really wanted to make it easy to follow anyone who looked interesting. The whole rigmarole of having to go to their home page and find the correct button seems really awkward and very web 1.0. I wanted to create a web-page button that would let you follow someone with a single click, without leaving the current page.

I was a bit surprised I couldn't already find one, it seemed like it would be very useful for people to embed on their blogs and other profiles. Looking at the Twitter API, I discovered that all you need is a REST request to http://twitter.com/friendships/create/<user name>.xml to follow that user. I created a test link, tried it and got a 404 error. With a bit more digging, I realized that it required a POST request instead, even though no data is sent. That's a bit harder to embed in a web page, but you can do it if you create a hidden iframe, and have a form that's targeted on it. Clicking on the submit button navigates that frame to the right URL. Here's the code:

<form target="hidden_frame" action="http://twitter.com/friendships/create/petewarden.xml&quot; method="POST">
<a href="http://twitter.com/petewarden">Pete Warden on Twitter</a>
<br/>
<input type="submit" value="Follow" onclick="this.value='Following'; return true">
</form>
<div style="display:none;visible:hidden;">

</div>

You can download a full example, or try the button below:

To use this yourself, you'll need to change petewarden.xml to the actual name you'd like to follow. If I have time I'll whip up some blog widgets for Typepad, etc, so let me know if you're interested. One disadvantage of this technique is that you can't get the result of the call, but it will prompt you for your username and password if your Twitter website session has timed-out.

After doing this, I also realized that a 'zero click' follow button is possible. In other words, a malicious web page could silently force you to follow someone if you were still logged in to Twitter, just by navigating to that URL! That's a big security hole, but it would also be pretty easy to catch anyone who accumulated followers like that. They ran into a similar bug with status updating, but fixed that by checking the referer, which is hard to fake if you're calling from Javascript in a web page.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: