dW

Sep 25th 2008

Tweet from Opera’s Address Bar 2

EDIT: I don’t suggest using this. It probably will not work, anyway. I’m keeping the post here for posterity’s sake.

A week ago I wrote about tweeting from Opera’s address bar and presented a method for doing so without aid for external scripts or services such as a method given a couple of months ago. Since then my method has made its way across the interwebs even being posted on My Opera, but there’s a better way to do it.

The method I presented was ugly, but it worked. The jist of it was that it used a data URI to feed Opera a ready-made document. It’s long-winded and difficult to modify. The reason why I did it that way was because I tried using a javascript URI when a blank document or Speed Dial was open, and I’d get nothing as it didn’t have a document to modify. I didn’t think to set a variable to create a new document as this solution provided for me.

I decided to take the time to expand upon it quite a bit. One problem that could occur to users is that they have no way to know how many characters they’re typing without counting them manually, so if you go over 140 the user would have a truncated tweet or if they went over 160 their tweet would be rejected. I’ve solved that by displaying a form in certain situations allowing the user to modify his/her tweet without having to retype it:

It’s similar to Twitter’s own form. I have programmed support for submitting sources, but I have to submit the application form to Twitter to be accepted first. It definitely should be easier to maintain than that mess of junk. EDIT: Fixed a bug where it wouldn’t redirect when the script was being operated off the web form.

javascript:(function(u,p) {var d=document;var str="%s".replace(/\+/g,' ',1);var t=d.createElement("title");var s=d.createElement("style");t.innerHTML="Opera Address Bar Twitter Client";s.setAttribute("type","text/css");s.innerHTML="iframe{visibility:hidden;width:0;height:0;}";var h=d.getElementsByTagName("head")[0];h.appendChild(t);h.appendChild(s);var f=d.createElement("form");var i=d.createElement("iframe");f.method="post";f.action="http://"+u+":"+p+"@twitter.com/statuses/update.xml";f.target=i.name='tweet';var fs=f.appendChild(d.createElement("fieldset"));t=fs.appendChild(d.createElement("textarea"));h=fs.appendChild(d.createElement("input"));h.setAttribute("name","source");h.setAttribute("type","hidden");h.setAttribute("value","operasaddressbar");t.name="status";t.value=str;document.body.appendChild(i);if(str.length>140) {if(str.length<160) {if(confirm("Your status update contains more than 140 characters. The full update will only be viewable on the web. Cancel to edit and resubmit or click OK to continue.")) {f.submit();i.onload=function(){window.location="http://twitter.com/"+u;};}} s.innerHTML+="iframe,html,form,body,fieldset,p,h1,h3{margin:0;padding:0;border:0;}html{background-color:#9ae4e8;}body{width:510px;padding:20px;background-color:white;margin:40px auto 0 auto;}form{position:relative;}h1{font-weight:normal;font-size:20px;line-height:36px;letter-spacing:-1px;}h2{font-weight:normal;color:#ccc;font-weight:bold;font-size:29px;position:absolute;top:45px;right:0;font-family:Georgia,serif;line-height:0;}body,textarea,button{font:normal 12px/18px \"Lucida Grande\",\"Trebuchet MS\",sans-serif;}textarea{width:496px;height:45px;padding:5px;}button{float:right;font-size:14px;color:#444;background-color:#f5f5f5;border:1px solid #dadada;padding:10px 32px;margin-top:4px;}button:enabled{cursor:pointer;}button:enabled:hover{background-color:#e3e3e3;border:1px solid #b9b9b9;}button:disabled{opacity:0.5;}p{margin-bottom:1em;height:30px;}";var h1=d.createElement("h1");h1.innerHTML="What are you doing?";var h2=d.createElement("h2");var strlen=str.length;h2.innerHTML=str.length;var b=d.createElement("button");b.setAttribute("type","submit");b.innerHTML="update";var p=d.createElement("p");fs.insertBefore(h2,t);fs.insertBefore(h1,h2);fs.insertBefore(p,h1);fs.appendChild(b);if(str.length>160) {p.innerHTML="Your status message contained more than 160 characters. Shorten it to 140 or 160 characters to have it truncated and viewable only on the web.";} else {p.innerHTML="Modify your message to contain less than 140 characters and/or hit submit to resubmit.";} document.body.appendChild(f);i.onload=function(){window.location="http://twitter.com/"+u;};var limit=false;t.onkeyup=function() {tlen=t.value.length;if(tlen==0) {b.setAttribute("disabled","disabled");} else if(b.getAttribute("disabled")=="disabled") {b.removeAttribute("disabled");} h2.innerHTML=tlen;if(tlen<strlen&&!limit) {limit=true;} if(tlen>160&&limit) {t.value=t.value.substring(0,160);h2.innerHTML=160;}};} else {f.submit();i.onload=function(){window.location="http://twitter.com/"+u;};}})('ook','eek',1);

Still ugly, but it at least makes sense! The directions are identical to what they were before:

  1. Copy the long javascript URI into a text editor and replace “ook” with your twitter username.
  2. Replace “eek” at the end with your password.
  3. Go to Tools → Preferences (or Opera → Preferences on Mac OS X).
  4. Click on the Search tab then click the Add… button.
  5. In the input box labeled Name type in Twitter.
  6. Type in a suitable keyword in the Keyword field. I use tw.
  7. Paste in the javascript URI from your text editor into the Address field and click OK.

Type tw Tweet! and it should send a tweet if you do not include quotation marks in your tweet. I cannot fix that as Opera’s text replacement doesn’t escape quotes. Perhaps this can be fixed in a future version of Opera. Enjoy. It’ll probably be the last time I’ll take a crack at it. I’ll at least update if there’s an update on my source name approval process. EDIT: It’s been approved, and the code above has been updated to reflect the new source name. When updating the status it should show “Opera’s Address Bar” linking back to this article.