Using Twitter as a data provider to automatically fill forms
I hate having to enter all my details when I fill forms – especially when I know for a fact that I’ve entered them before. Looking at “Smashing Magazine’s Twitter Avatar WordPress Plugin”:http://www.smashingmagazine.com/2009/01/08/twitter-avatars-in-comments-wordpress-plugin/#comment-304292 I got to play with the show API of twitter, which gives you user information.
For example to get my information in Twitter you can just call http://twitter.com/users/show/codepo8.xml and get all I entered. This is also available in JSON and with a callback parameter. You can also do a lookup by email, by calling http://twitter.com/users/show/show.xml?email=you@yourserver.com. Using both of these together, I thought it’d be a good idea to use this API to automatically fill forms.
I’ve created a quick proof of concept: “automatically filling forms with twitter data”:http://icant.co.uk/sandbox/twitterfill.html . If you want to use the script yourself (“twitterfill.js”:http://icant.co.uk/sandbox/twitterfill.js), simply add it to the page with your form and give it the right parameters in the init method. For the demo page this is:
<script type="text/javascript" src="twitterfill.js"></script>
<script type="text/javascript">
twitterfill.init(
{
label:'Get Twitter data',
loading:'retrieving data',
mailfield:'email',
name:'Name',
location:'location',
url:'hp'
}
);
</script>
The parameters are label, which is the text of the button, loading, which is the loading message, mailfield, which is the ID of the email field (the button will be inserted after it), and name,location and url which are the IDs of the form fields you want to fill.
Tags: autofill, datastorage, forms, twitter
January 8th, 2009 at 7:56 pm
I like this idea. what about mixing it with your previous twitter hack ? That way, I only have to fill in my email & if I decide I don’t want to use my twitter email, then you can still fill the form with my other twitter info.
January 9th, 2009 at 12:56 pm
Of course, you could just use Opera with its Magic Wand tool. Ctrl + Enter is a life saver :)
January 11th, 2009 at 12:20 pm
A question — can the above script be modified in the following manner (I’ll try to explain in a few words):
Let’s say that a user is filling out a comment form. He/she first enters e-mail, then tabs to the next field — say, name or website (typically, users fill 3-4 fields maximum – name, email, website). So, when the user tabs to the next field and the previous field loses focus, the script automatically checks the twitter database and if the same email that the user has entered, was used with Twitter, it fills the name and website. A small notice next to the ‘e-mail’ field can explain that Twitter might autofill the rest of the form.
What my idea is, that in this scenario, the user won’t have to click a button and wait, but once he/she has moved to the next field, the rest of the form could be autocompleted, without the need for clicking a button. In the old days, something like ‘onBlur’ could be used, I guess, which’ll trigger the automatic check, but I guess that wouldn’t be the case these days…
If you know a way, I’d be happy to see your example! :-)
Thanks! :)))
January 11th, 2009 at 2:12 pm
OK, something like this:
http://www.optimiced.com/web/2009/twitter-forms-autofill/
The script is the same, except that you don’t have to click on the button to fetch the twitter data, but just tab through it, like: 1) fill email first, 2) tab once, focus is on the button, 3) tab once more, the button loses focus and twitter data is autofilled in the rest of the form! :-)
Wonder if the button can be totally skipped? (My JS is not that powerful…) Like, fill email, tab to next field (name) and while there, script is activated and data is autofilled silently in the background? If there’s no corresponding user account in twitter associated with the email inserted, then user simply fills manually rest of the form. If there is one, then data is autofilled.