Left Logic - Brighton web development, design and consultancy

How many times have you looked at a photo on the Internet and wanted to add your own commentary with a speech bubble?

Now you can, to any picture on the Internet - and you can share it with friends, or even start your own competition if you like.

How to install & demonstration

The following short video shows how to easily install speech bubbles, and how they work. Once you've copied the link, you can then email the speech bubbles to your friends.

Install speech bubbles

To install, in Firefox and Safari, drag the link below to your bookmarks bar. In Internet Explorer, right click and 'Add to favourites' and select 'Links'.

» Speech Bubbles «

Please note that currently, we are not storing the speech bubbles that are created. The web sites that the bubble is created on could replicate the speech bubble (by checking through their referrer logs), but with larger web sites like Flickr and Facebook it would be extremely unlikely.

There are plans in the future to allow you to save a history of speech bubbles.

Usage

The speech bubbles are very easy to use.

1. Click on the bookmarked link (from above) on the page you wish to add the speech bubble on to.
2. Move the speech bubble to the right place, by clicking and dragging.
3. Enter your text.
4. To share either click the 'copy' link and a link to the speech bubble is automatically created and copied to your clipboard - or - right click on the 'copy' link and manually copy to your clipboard.
5. To close, click the 'x'.

How does it work?

The speech bubble is broken in to two sections. The bookmarklet and the public speech bubble.

Bookmarklet

The bookmarklet firstly loads in jQuery for simplified DOM access, then loads in the speech bubble code. Once loaded it fires the creation function within the bubble code.

There are some security concerns that loading an external library could be considered a bad idea from the browsers point of view. Originally I had designed the whole bubble code as a bookmarklet, but IE being the browser it is, doesn't support long strings as locations (lending weight to the idea that browsers just aren't supposed to do this kind of stuff).

Anyone is welcome to host the bubble.js on their own server and change the link in the bookmarklet.

However, the natural upside of the file being loaded from Left Logic's servers, is that you will receive an automatic upgrade as features are extended or bugs are fixed.

Public Speech Bubble

Using the information in the URL, we load one large iframe containing the source URL, then load over the bubble, creating the effect that allows us to run our script on another web site.

Compatibility

The speech bubbles supports the latest versions of Internet Explorer, Safari, Firefox and Opera.

Internet Explorer 6 is not currently supported as it doesn't appear to load in the external scripts when required. On going testing and development will aim to include IE6 if possible.