UPDATE 5.28 : As you probably guessed I’ve been slacking on this, but I’d like to think of it more of just being temporarily roadblocked. I did a little work on the HTML client and added the nice character count and everything, but can’t seem to figure out how to send the Basic Authentication header via Javascript. I tapped into the XmlHttpRequest as well as a JQuery lib, but just couldn’t get it going. As of now my html twitter client does tweet, but you’ll get the login prompt from twitter.com. This is not good IMO which is why I haven’t posted anything yet. I’ve since changed my focus to my AIR Yammer client, and probably adding Twitter support to that. For anybody interested, here’s my latest HTML twitter client in case you’d like to fix it up, or even use it for that matter. If you can make this work, please drop me a note, I’d love to see how you did it.
Having a hard time getting the Basic Authentication header working in JS
UPDATE : When I was first messing with this little form, I didn’t realize I had already authenticated with Twitter and thought the hidden fields were in fact doing their jobs by passing the username and password. Turns out that’s not the case. When you submit this form, the status will be sent, but you will be presented with a username and password dialog from Twitter. After logging, your status will be sent. I know have a goal of figuring out how to make this simple HTML form work with Twitter. Got a feeling I’ll have to do some javascript magic with OAuth. Once I figure this out, this post will be updated with the latest html.
Here’s an easy way to update your Twitter status using a simple HTML form. Be sure to replace { TWITTER USERNAME }and{ TWITTER PASSWORD } with your information prior to using this form.
<form action="http://twitter.com/statuses/update.xml" method="POST" enctype="application/x-www-form-urlencoded">
<!-- set your Twitter username and password here -->
<input type="hidden" name="user" value="{ TWITTER USERNAME }" />
<input type="hidden" name="pswd" value="{ TWITTER PASSWORD }" />
status <input type="text" name="status" maxlength="140" />
<input type="submit" value=" tweet! " />
</form>
Tags: basic authentication, html form, twitter, update status, xmlhttprequest
Change the action to include the username and password, like this:
action="http://username:password@twitter.com/statuses/update.xml"
You can then get rid of the user and pswd input fields. One caveat, though – at least in Mozilla Seamonkey, it didn't prompt me for the username and password, but the browser did prompt me to ask if it was okay to log in as "username" or not.
Yes, I played with that as well, but you still get the confirmation prompt. I'm hoping to create a light html client that will only require me to type the username and password into the file once. I've started an updated version, but haven't ironed out the Basic Authentication piece using XmlHttpRequest. I'll update this post once I get around to it.
Thanks for stopping by.
any updates on this? i'd love a nice, simple html form to update twitter.
Hey Dave,
I have a minor update posted at http://ericfickes.com/2009/04/update-twitter-stat... />
Long story short is I haven't figured out how to send the Basic Authentication header in JS yet. Still get the login prompt from twitter.com, which is not what I want. If you're interested, there's a link to the latest version of the html twitter client in that update.
EF
Very cool stuff!!! This could be very useful to a lot of people! (including me haha) I'll keep checking back!
i get an error like this
This XML file does not appear to have any style information associated with it. The document tree is shown below.
i want my page to be as it is after the form is submitted..what do i do…
This message is coming from your webbrowser. It's telling you it isn't sure how to render the XML.
[...] Update Twitter status from an HTML form [...]
This is really cool, I love this idea. I did a few web searches, and from what I can tell you're the only one pursuing this. I tried it on my own page and was still prompted for login credentials, I'm still playing with it though. Does anyone know if you expose any security risks by passing username:password this way?
Hey Len,
Yeah this is one of my many 'great ideas' that are just sitting on the bench now. I wrestled with this for a while and just never got past the auth prompt. I really thought tapping into the XMLHttpRequest object would be the answer, but I couldn't get the auth headers to work properly. As far as security concerns go, I hadn't really put a lot of thought into this since I only wanted this as a local utility of my own.
Please come back if you figure this out for me
This is might work:
$.ajax ( {
url: “http://twitter.com/statuses/update.json”,
beforeSend: function (xhr) { xhr.setRequestHeader(”Authorization”, “Basic ” + encodeBase64 (”screen_name:pswd”) );
succes: function(val) { alert(val); } } );
@Adam – Thanks for the code, but I've been wrestling with the exact code. Can't figure what's not happening. I was able to get your code to fire, but the header never appears in my sniffer, so I can't confirm it's working. I'll keep at it and post an update if I get it working.
Hope you do the same
Hi, with this you are making your username and password available to anyone that makes a bit of sniffing on web traffic. Are you sure you want anyone to make your twitter updates?
I'm looking for an easy way also but safe (https) between your browser and he twitter server. Like facebook connect js api. Anyone?
Cheers.