del.icio.us .:. tweet

Cleeper: an iPhone Copy-To-Twitter Assistant .:. kentbrewster.com

One of the iPhone's few glaring disappointments is the lack of proper copy and paste. If I'm on a page and I want to send a chunk of it over to Twitter, I have no choice but to memorize it, bring up Twitter's horrific little iPhone interface, and painfully bang it in there with my big fat fingers. After warming up with iClock, a toolbar bookmarklet that contains an entire Web page in a base-64 encoded data: URL, I was ready to try something a bit more useful. Hopefully this is it:

Cleeper

Cleeper will inject itself into the page you're on, wait for you to click an existing block-level element, and copy the text of the element into an entry box, where you can edit it. After you're done editing, click the Cleep button to send your message off to Twitter. You'll still need to hit Twitter's update button, so don't panic; Cleeper's not going to post anything on your behalf.

Click it and try it out here first, just so you know what you're getting into. If you want to try it on your iPhone or iPod Touch, drag it to your Safari bookmarks toolbar, sync bookmarks to your device, and you ought to be off and running. If you need some instruction on exactly how to get Cleeper onto your iPhone, click this:

Painfully Detailed Installation Instructions

  • Bring up Safari on the same machine you sync your iPhone or iPod Touch. If you don't have Safari, go get it now.
  • Make sure your Bookmarklets toolbar is showing. If it's not, go to View and select Show Bookmarks Bar.
  • Navigate your way back to this page.
  • Drag the Cleeper bookmarklet to your Bookmarks Bar. It will confirm that you really want to do this, and ask you what you want to call your new bookmarklet.
  • Bring up iTunes and plug in your device. Once iTunes recognizes it--oh, and anybody who can tell me how to get Windows to quit bringing up that damn "Camera Connected" dialogue every freaking time I plug it in will be richly rewarded in Heaven--click the device name, and then bring up the Info tab, which is second in line between Summary and Ringtones on mine.
  • In Info, scroll down a bit to Web Browser. Click the checkbox next to Sync Bookmarks With, and tell it you want Safari.
  • If you've made a change here, your Sync button (lower right corner) will turn into Cancel and Apply buttons. Click Apply. If not, click Sync.
  • Wait for your sync to finish; if it starts backing up your device and you don't want to wait, you can safely click the little X to the right of the Backing Up progress bar. You may get a dialogue warning you that your phone didn't back up; this is fine, as long as the sync completes successfully. (Do remember to back up occasionally, however.)

Using Cleeper

  • Bring up Safari on your iPhone, navigate your way back here, and click the little book-shaped thingie in the bottom bar. Either your History or Bookmarks bar will probably come up; you want Bookmarks, and then Bookmarks Bar.
  • Deep inside your Bookmarks Bar, which should come up by default next time, you'll see the bookmark you sync'ed from Safari. Click it, and you should see a lovely yellow box at the top of the page you're browsing.
  • Click what you want to tweet and the yellow box should expand to show its text content.
  • Double-tap the text box to zoom in, edit until the number of characters in the middle is under 140--this is not terribly important, but you'll have a better experience editing here than on the mobile version of Twitter, so you might as well go ahead--and then click that left button.
  • Twitter should come up, with your message all filled in and ready to send. If you need to log in, you can do so and your message will be there when you get back.
  • Fire away!

If I Could Ask One Special Favor....

... it would be that your first Cleeper-assisted tweet looks something like this:

Trying out @kentbrew's Cleeper, an iPhone copy-to-Twitter assistant, from http://bit.ly/pxfu

Go on, cleep it right now. You know you want to! :)

Caveats and Gotchas

  • Existing document styles may hose the entry box's colors, layout, and font sizes.
  • If you copy a paragraph that contains more words than will fit into the text entry box, or the font size (see above) is too big, you won't be able to scroll down.
  • There's no telling what might happen when this thing encounters non-English character sets.
  • We're not cleaning up after that Cancel button; for best results, reload the page instead.

Directions for Future Development

  • Paste straight to e-mail.
  • Add a bunch of different services, not just Twitter. There's no reason why Cleeper shouldn't be a global share-this/annotate-this bookmarklet.
  • Be more precise about selecting text. Figure out how to break each detected block-level element into word-sized SPAN tags, and only bring in enough to fill the entry box.
  • Think about using Safari's HTML5 persistent database as a clipboard. You'd need two bookmarklets, one to copy and one to paste, but it would probably work, and would be a client-only solution to the global copy-and-paste problem.

How It Works

It's a tiny bit more complicated than iClock, which runs straight from a data: url. In order for Cleeper to work, we need to inject it into the page containing the target text. That's easy; we do something like this:

javascript:(function(d){d.body.appendChild(d.createElement('SCRIPT')).src='http://yourserver.com/yourscript.js';})(document);

Because we don't want the code that does the heavy lifting to come from an outside server--privacy, efficiency, and all that--we need to serve it up locally, using the base-64 encoding method described in iClock. So we write a script, base-64-encode the whole thing, and serve it up as data instead of fetching http://yourserver.com/yourscript.js from a remote URL. Like so:

javascript:(function(d){d.body.appendChild(d.createElement('SCRIPT')).src='data:text/html;charset=utf-8;base64,yourbase64encodedscript';})(document);

The Actual Source Code

(function(){
var d=document;
var e=['P','LI','DIV','DD','TD','TEXTAREA','PRE','INPUT'];
for (var i=0;i<e.length;i++){
var n=d.getElementsByTagName(e[i]);
for (var j=0; j < n.length; j++){
n[j].addEventListener("click", function(e){e.stopPropagation(); load(this);}, false);
}
}
var s=d.createElement('DIV');
var h=d.createElement('P');
h.innerHTML='click some text';
s.appendChild(h);
s.y=s.style;
s.y.backgroundColor='#ffa';
s.y.textAlign='center';
s.y.paddingBottom='5px';
s.y.border='1px solid #000';
s.y.height='50px';
s.y.width='320px';
s.y.position='fixed';
s.y.top='0';
s.y.left='0';
s.y.zIndex='8675309';
var t=d.createElement('TEXTAREA');
t.y=t.style;
t.y.width='300px';
t.y.height='300px';
t.y.fontFamily='Tahoma';
t.y.fontSize='92%';
t.y.margin='20px auto';
t.y.backgroundColor='#fff';
t.y.color='#000';
t.y.display='none';
s.appendChild(t);
var b=d.createElement('BUTTON');
b.innerHTML='Cleep';
b.onclick=function(){d.location='http://twitter.com/home?status=' + encodeURIComponent(t.value);};
s.appendChild(b);
var g=d.createElement('SPAN');
s.appendChild(g);
var c=d.createElement('BUTTON');
c.innerHTML='Cancel';
c.onclick=function(){s.parentNode.removeChild(s);};
s.appendChild(c);
d.body.appendChild(s);
function load(e){
var v=e.innerHTML;
if(e.value){v=e.value;}
t.y.display='';
t.y.height='300px';
t.value=v.replace(/<[^>]*>/g, '').replace(/\s{2,}/g, ' ');
s.y.height='400px';
h.style.display='none';
setInterval(updateLength, 100);
}
function updateLength(){g.innerHTML=t.value.length;}
})();

Sorry this is so compressed; I was running up against a hard number-of-characters-in-a-bookmarklet limit in Safari. It's pretty unremarkable DOM manipulation, and probably could be improved with an axe.

If you find Cleeper to be useful, please follow me at kentbrew, so I can keep you up-to-date. As always, have fun with this, and please let me know how it goes.

Comments from before Disqus:

Kelly .:. 2009-12-20 13:23:47
Now that the Apple release the update for the iPhone late this summer, is there really a need for Cleeper?
raymon .:. 2009-03-08 14:16:30
solved ... seems cleeper will not work in twitter mobile view ... switched back to standard view & functions perfectly ... sorry for the confusion ...
raymon .:. 2009-03-08 13:32:39
... everything works (yellow window & info edit) when hit cleep goes to twitter but nothing in update ... when hit update no rendering & receive following message ... error on line 1 column 1: Extra content at the end of document ... worked originally & when failed deleted bookmark and reinstalled ... will do again ...
raymon .:. 2009-03-07 18:35:12
cleeper worked perfectly at first - now it doesn't ... have reinstalled but still no luck ... is it still functioning ... loved it ...

Copyright Kent Brewster 1987-2014 .:. FAQ .:. RSS .:. Contact