My Opera news » Tweet using Opera's address bar

Tweet using Opera's address bar

Thursday, September 18, 2008 8:31:19 AM

Dustin Wilson (also known as "Khadgar") always enjoys a challenge. His latest project was to get Opera's custom search feature work with the update form on Twitter, so he could do all his Tweeter updates using the address bar. Well, that would work as long as there's an active auth session, so it's not usable unless you've already logged in.

After many hours trying out different solutions how to send data, he falled back on using a data URI (please read his own excellent blog post if you want all the juice). It's somewhat long and messy, but it does the trick:

data:text/html,%3C%21DOCTYPE%20html%3E%3Chtml%20lang%3D%22en%22%3E%3Chead%3E%3Cmeta%20charset%3D%22UTF-8%22%3E%3Ctitle%3ETweet%3C%2Ftitle%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Eobject%7Bvisibility%3Ahidden%3B%7D%3C%2Fstyle%3E%3C%2Fhead%3E%3Cbody%3E%3Cscript%20type%3D%22text%2Fjavascript%22%3Efunction%20enc%28text%29%7Breturn%20encodeURI%28text%29.replace%28%2F%5C%2B%2Fg%2C%27%2520%27%29%3B%7D%20var%20tweet%3Denc%28%27%s%27%29%3Bvar%20username%3Denc%28%27opera%27%29%3Bvar%20password%3Denc%28%27software%27%29%3Bdocument.write%28%27%3Cobject%20data%3D%22data%3Atext%2Fhtml%2C%253C%2521DOCTYPE%2520html%253E%253Chtml%2520lang%253D%2522en%2522%253E%253Chead%253E%253Cmeta%2520charset%253D%2522UTF-8%2522%253E%253Ctitle%253ETweet%2521%2520Tweet%2521%253C%252Ftitle%253E%253C%252Fhead%253E%253Cbody%253E%253Cform%2520method%253D%2522POST%2522%2520action%253D%2522http%253A%252F%252F%27%2Busername%2B%27%253A%27%2Bpassword%2B%27%2540twitter.com%252Fstatuses%252Fupdate.xml%2522%2520name%253D%2522tweet%2522%253E%253Ctextarea%2520name%253D%2522status%2522%253E%27%2Btweet%2B%27%253C%252Ftextarea%253E%253Cinput%2520type%253D%2522submit%2522%253E%253C%252Fform%253E%253Cscript%2520type%253D%2522text%252Fjavascript%2522%253Edocument.tweet.submit%2528%2529%253B%253C%252Fscript%253E%253C%252Fbody%253E%253C%252Fhtml%253E%22%3E%3C%2Fobject%3E%27%29%3B%20window.location%3D%27http%3A%2F%2Ftwitter.com%2F%27%2Busername%3B%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E

To use it follow these directions:

Copy the long data URI into a text editor and do a text replacement for "opera" then replace it with your twitter username.
Do a text replacement for "software" and replace it with your password.
Go to Tools → Preferences (or Opera → Preferences on Mac OS X).
Click on the Search tab then click the Add… button.
In the input box labeled Name type in Twitter.
Type in a suitable keyword in the Keyword field. For example tw.
Paste in the data URI from your text editor into the Address field and click OK.

Now you should be able to type tw Tweet! and update your status on Twitter with "Tweet!". As this is just a proof-of-concept it can be expanded to do more such as display an error if you’ve typed in more than 140 characters among other things. We're super happy Dustin thought he'd challenge himself to see if it could be done.

Imagery from Dustin Wilson's Web site: http://dustinwilson.com/

Comments

José Torreszetorres # Thursday, September 18, 2008 8:32:28 AM

DesertDawg # Thursday, September 18, 2008 8:47:08 AM

...he fell back to ...

Steve DavisSteveD # Thursday, September 18, 2008 9:10:50 AM

whoa. nice job dustin!

not working for me. just takes me to my twitter profile. i'll double check.

Tamil # Thursday, September 18, 2008 9:51:47 AM

David Håsätherhzr # Thursday, September 18, 2008 10:27:22 AM

Here is a similar solution: http://my.opera.com/edvakf/blog/2008/07/24/update-twitter-status-from-opera-address-bar (I know p01 have done the same in the past too).

Or if you want a widget (shameless plug): http://widgets.opera.com/widget/7206/ (soon to be updated

)

Miladin MiladinoskiEagleMKD # Thursday, September 18, 2008 10:46:15 AM

Woot thanks! I'll try it now!

Espen André ØverdahlEspenAO # Thursday, September 18, 2008 10:49:13 AM

hzr: Thanks for sharing those links! I also like edvakf's approach to it.

Yeni Setiawansandalian # Thursday, September 18, 2008 11:18:12 AM

Excelent!

Rijk # Thursday, September 18, 2008 11:21:34 AM

I want Khadgar's solution with the 'from OperaAddressBar' source attribute from edvakf

Dustin WilsonKhadgar # Thursday, September 18, 2008 12:45:59 PM

Thanks guys. Haha. Surprised to find this here! This method does use the API like edvakf. The data URI (along with the other stuff that's described in my log post) is used instead of defaulting to mobile twitter (or using an external webapp like many other methods) to get rid of the XML output. Now if Opera's blank document and Speed Dial were markup then a javascript URI could be used, making it appear less ugly (and be much easier to modify).

@SteveD: If your profile page has already been cached it won't show the tweet. Refreshing should display it. Like I said it could use some refinement. Haha.

@Rijk: Yeah I'd like to do that myself, but adding the source argument doesn't appear to add it. I'd probably have to call it something else and submit it through their form, but I'd like to find out how edvakf submitted his as the form requires a URI.

MyOpera team, please fix this!fearphage # Thursday, September 18, 2008 1:17:42 PM

We should consolidate into a single group and then change the source to be the same for all the "clients". Just a thought. my.opera.com/twitter (which i conveniently just registered). If anyone is interested I would be more than happy to turn over control of it to you.... free of charge

Alexodius PrimeAleksOD # Thursday, September 18, 2008 1:44:34 PM

Amazing! Thank you for your efforts, Khadgar!

Alexei Morozovmorav # Thursday, September 18, 2008 1:56:55 PM

Cool, i like twitter => http://www.twitter.com/morav

FierceDeity # Thursday, September 18, 2008 2:08:51 PM

this is PERFECT! just what i was looking for. genious!

tbret # Thursday, September 18, 2008 3:40:34 PM

very clever:idea:!

Mauriciomrmxo # Thursday, September 18, 2008 4:43:57 PM

exelent!!is very good!

thobi # Thursday, September 18, 2008 4:48:17 PM

tweet? twitter?

nevertheless

Mağruf ÇolakoğluZAHEK # Thursday, September 18, 2008 6:49:09 PM

good job.thanks.

KarenNerak # Thursday, September 18, 2008 8:01:01 PM

That's flippin' sweet!

Pattty # Thursday, September 18, 2008 8:03:51 PM

Wow!

I have to try it!

Okra # Thursday, September 18, 2008 9:24:45 PM

I wonder if it would be possible to have it ask for username and password the first time and store it in cookies?

yeeliberto # Thursday, September 18, 2008 10:07:58 PM

Very nice approach, it should be included in the next Opera version.

Daniel Sitnikdanielcs # Friday, September 19, 2008 1:43:45 AM

I'm not a Tweeter user but this is just great Dustin.
Congrats!!

OscarWeibin # Friday, September 19, 2008 7:08:19 AM

nice work

AyushAyushJ # Friday, September 19, 2008 9:40:41 AM

btw, here is a pure javascript address (use in prefs>search like the data uri):

javascript:(function(u,p){var d=document,t,i,f=d.createElement('form');f.method='post';f.action='http://'+u+':'+p+'@twitter.com/statuses/update.xml';t=f.appendChild(d.createElement('textarea'));t.name='status';t.value='%s'.replace(/\+/g,' ');i=d.createElement('iframe');f.target=i.name='tweet_target';i.setAttribute('style','visibility:hidden;position:absolute;width:0;height:0;border:0');(document.body||document.documentElement).appendChild(i);i.onload=i.onerror=function(e){window.status=e.type=='load'?'Status Updated!':'Error updating status!';e.target.parentNode.removeChild(e.target)};f.submit();window.status='Updating status....'})('USERNAME','PASSWORD')

(replace USERNAME and PASSWORD at the end...)

OR

javascript:(function(u,p){var d=document,t,i,f=d.createElement('form');f.method='post';f.action='http://twitter.com/statuses/update.xml';t=f.appendChild(d.createElement('textarea'));t.name='status';t.value='%s'.replace(/\+/g,' ');i=d.createElement('iframe');f.target=i.name='tweet_target';i.setAttribute('style','visibility:hidden;position:absolute;width:0;height:0;border:0');(document.body||document.documentElement).appendChild(i);i.onload=i.onerror=function(e){window.status=e.type=='load'?'Status Updated!':'Error updating status!';e.target.parentNode.removeChild(e.target)};f.submit();window.status='Updating status....'})()

Opera will show dialog for username/password - enter the login details and optionally check "Remember password" then OK

These don't redirect you to another page - just silently update the status and show "Status Updated!" in status bar after done (and work on any page.. speed dial etc.)

Dustin WilsonKhadgar # Friday, September 19, 2008 2:10:17 PM

@AyushJ: I think I should club myself in the head for that. I NEVER thought of creating a new document so that it would work on blank documents and Speed Dial. I hate how stuff that that never enters my mind.

*goes off to make some more changes*

Pattty # Friday, September 19, 2008 4:38:05 PM

That last javascript thing didn't work for me

I tried it, but my status was updated with "+" signs between each word...

I prefer Khadgar method

speacially because it redirects me to twitter's site and I can check the updated status

.edDotEd # Friday, September 19, 2008 5:07:49 PM

dW, you never cease to delight. I'm glad we're buddies.

AyushAyushJ # Friday, September 19, 2008 6:36:42 PM

Originally posted by Pattty:

That last javascript thing didn't work for me I tried it, but my status was updated with "+" signs between each word...

Oh..

fixed in the comment above

JimJimLou # Friday, September 19, 2008 10:15:29 PM

Wicked! Man thats dedication.

Soumitrasoumitram4u # Sunday, September 21, 2008 5:42:34 PM

AliAli09139279902 # Sunday, September 21, 2008 6:25:25 PM

"/tmp/upload/6ce592c90c32364f36ff309681bd8f10ae19b643c1e6b8b65bd51fc078f9c7251/P00457_800X600_9.jpg"

deadcantdance # Monday, September 22, 2008 5:47:14 AM

This is awesome, thx!

Denis Edward Chesneyflotsam22 # Tuesday, September 23, 2008 6:56:39 AM

Thanks guys. Those were really helpful tips

Tobbi # Wednesday, September 24, 2008 6:45:56 PM

In my case it doesn't work because i get a security warning?!
Do anybody know a solution?

Greets
Tobbi

edit:
@AyushJ,
your first JS works fine for me. Thx