My Opera news » Tweet using Opera's address bar

Tweet using Opera's address bar

Thursday, 18. September 2008, 08:31:19

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

zetorres # 18. September 2008, 08:32

VanessaMk # 18. September 2008, 08:38

Thanks a lot.

DesertDawg # 18. September 2008, 08:47

...he fell back to ...

SteveD # 18. September 2008, 09:10

whoa. nice job dustin!

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

Tamil # 18. September 2008, 09:51

hzr # 18. September 2008, 10:27

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

)

EagleMKD # 18. September 2008, 10:46

Woot thanks! I'll try it now!

EspenAO # 18. September 2008, 10:49

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

sandalian # 18. September 2008, 11:18

Excelent!

Rijk # 18. September 2008, 11:21

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

lilmoder # 18. September 2008, 12:32

http://cybernetnews.com/2008/07/30/cybernotes-update-your-status-on-twitter-and-more-from-operas-address-bar/

Khadgar # 18. September 2008, 12:45

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.

fearphage # 18. September 2008, 13:17

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

AleksOD # 18. September 2008, 13:44

Amazing! Thank you for your efforts, Khadgar!

morav # 18. September 2008, 13:56

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

FierceDeity # 18. September 2008, 14:08

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

tbret # 18. September 2008, 15:40

very clever:idea:!

mrmxo # 18. September 2008, 16:43

exelent!!is very good!

thobi # 18. September 2008, 16:48

tweet? twitter?

nevertheless

ZAHEK # 18. September 2008, 18:49

good job.thanks.

Nerak # 18. September 2008, 20:01

That's flippin' sweet!

Pattty # 18. September 2008, 20:03

Wow!

I have to try it!

Okra # 18. September 2008, 21:24

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

yeeliberto # 18. September 2008, 22:07

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

danielcs # 19. September 2008, 01:43

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

Weibin # 19. September 2008, 07:08

nice work

AyushJ # 19. September 2008, 09:40

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.)

Khadgar # 19. September 2008, 14:10

@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 # 19. September 2008, 16:38

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

DotEd # 19. September 2008, 17:07

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

AyushJ # 19. September 2008, 18:36

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

JimLou # 19. September 2008, 22:15

Wicked! Man thats dedication.

soumitram4u # 21. September 2008, 17:42

Ali09139279902 # 21. September 2008, 18:25

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

deadcantdance # 22. September 2008, 05:47

This is awesome, thx!

flotsam22 # 23. September 2008, 06:56

Thanks guys. Those were really helpful tips

Tobbi # 24. September 2008, 18:45

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