I've been pondering how to make all the various web services we use integrate better together. With the new trend being to create social networks for particular verticals (mums, fitness etc.) we'll all inevitably have a main general social networking site (like MySpace or Facebook), along with a range of other social sites and services like flickr, del.icio.us and blogger. Right now, the main way to post content or use features on these sites is to open up a new window and copy and paste the link. If sites want to provide better integration, often they provide widgets that other sites can use but the success of that ultimately depends on how well the other sites co-operate.

So how could this experience be better? How can you make your site look as if its integrated with another sites yet still have complete control? One answer is to create a browser plugin/extension of which there are plenty already - Firefox's addons directory even has a category for website integration. But this solution is annoying as the user has to install something which they may not be bothered to do (also involves a browser restart) or may be worried about given all the publicity about not installing anything from the net.

A better solution use bookmarklets, but create the interface as an overlay over the current page. Bookmarklets are simply bookmarks with javascript code instead of a URL, so just use the javascript to create some new elements on the document. Your code can access all the elements on the page that the viewer's currently seeing, and you're not interrupting what they were doing at all. Overlay the site with a small window that has your site's interface on it, allowing the user to utilise the content on the page they're viewing to contribute to your website. The overlay point is important, as most bookmarkets out there currently grabs the required content from the current page, gets rid of the current page and loads something else (or uses a new window which interrupts the user's flow). If its necessary to highlight the overlay, use the lightbox effect.

From a user's perspective, all they have to do is to drag your bookmarklet to their links bar once (which is unfortunately not visible by default on IE7) and whenever they want they can just click on that, without affecting the page they're currently browsing. It will appear very slick and not intrusive at all; in fact it could easily emulate a lot of what a browser extension can do, and is not restricted to the browser's UI design. The possibilities are endless, including:

• posting a photo on to flickr
• posting a blog post to blogger
• submitting a new item to digg
• checking out what others think of the current site
• finding similar sites and loading them in background tabs
  
• adding something to Google Calendar
• scribbling down something they just remembered (related to the current page or not) to Google Notebook
• finding out how far away a certain address on the page is using Windows Live Maps
• adding the current site's RSS feed to portals like Netvibes or offline browsers like AvantGo
• sending a link and quote of the current page to a mate using Yahoo Mail

The issue with this technique is that when you need to submit data, you run into browser security limitations, namely cross-site scripting (XSS). XSS is a risk because malicious sites can capture confidential information (like usernames and passwords) and send it back to base for future use or harvesting, so browsers instigated a 'same-domain policy' - that is, scripts and pages from different domains can't access each other. Javascript injected using bookmarklets (including external javascript files) however, can access the current page without an issue as they are assumed to be in the domain of the parent page (even if they're not), but they can't use AJAX to submit data back because the AJAX URL is in a different domain. An alternate method is to use HTML's form tag, or to pretend to add a script or image to the document, but make the source URL a URL similar to how the FORM GET method works, e.g. make the source URL http://somedomain.com/datasubmit.aspx?name=John%20Doe. It doesn't matter if nothing is returned - the request was the important thing. The problem with this is there's a limitation to the length of URLs in most browsers (smallest is IE with 2083 characters).

UPDATE: Another option maybe to look at using the bookmarklet to load a flash movie, which could then traverse the cross-domain issue. I'm not sure if this will work, given that flash has a cross-domain policy too.

Alright, enough talk. Looking around, the best example of this technique is the one on BlueDot which is a social bookmarking site (great site too btw). My blog's not letting me post BLOCKED SCRIPT links for obvious reasons, so go to BlueDot's bookmarklet install page, drag the 'Dot This!' button to your Links bar (the bar with the Getting Started and Latest Headlines buttons in Firefox; if in IE7 and there's no toolbar between the back/forward buttons and the star icons, click on Tools -> Toolbars -> Links), then navigate to another webpage and click the 'Dot This!' button you just added.

For the lazy ones, here's a nice video I found on YouTube demonstrating it, among other features of BlueDot.



These guys seem to have been able to work around the different-domain block of AJAX but unfortunately my javascript hacking skills aren't good enough - I can't seem to work out what their magic secret is. It'd be an interesting thing to know - someone fill me in!

More websites should offer this type of bookmarklet because aside from a browser extension, I reckon there isn't a smoother way to integrate a website's features into the user's browser so they can use it on any site they want. It'd be even better if the web browsers could work out a standard for securing bookmarklets so that it'll be easier to create bookmarklets like these - maybe only allow cross-site scripting if it was initiated via a bookmarklet, or make the user confirm/authorise the first time a bookmarklet is added, and then every time its changed.

P.S. Apart from the social features of BlueDot, another good thing about BlueDot is that you don't have to register before using it if you use it via the bookmarklet - just register the next time you visit BlueDot's website using the email address you used when submitting your bookmarks and they'll all be there.