So I’ve been working on the sharing facility of the cuckoo nest.  Today i tackled the link sharing facility

Lets check it out!

Step 1 – The share box

Here it is in all it’s glory! This is the state before the box has been given focus.  This function works in several ways.

You can simply share a text update by clicking into the ‘Share what’s new…’. This will transform it ready for some content.

Notice the four icons on the right.

These are;

1. Share text
2. Share image
3. Share location
4. Share link

Clicking each of these prompts a new action but remaining on the first is simply used as a text update.

Lets check out the others, so far the standard share text, link and location are functional.

Location

This was quite complex and has been documented here. So lets see it in action.

Step 1 – Clicking the icon will create a new dialog. (click for larger)

Now we have a Google map and three buttons, the initial state of the map is focused on the properties location. If we were to click on the map, the following happens.

When a user clicks the map, a event is fired which returns a point object. Inside this object contains two functions lat() and lng(), this was looked at in this post – http://damonsk.com/2011/05/task-10-system-functionality-geodata-google-maps/ A red marker is also placed onto the map.

Using this information, a reverse geocode lookup is preformed.  This is essentially a call to Google and asks them for a street name for the coordinated provided.  This information is presented in the window title and will be used later on.

We can, if we want to, choose a new location on the map, save the location, discard location or finished.  Saving the location will update the status update with the location data, discard will delete and finished closes the map.

Next a user will save the location, this will update the status update and return them to their property page as shown;

Notice the additional information that’s attached below the update.  The last thing for a user to do is to ‘Share’ the update;

This updates their property page with the new status.

Links

The next part is the link sharing.  This will allow users to enter a URL and attach it to an update.  Here it is in action.

Step 1 – Clicking the link icon will force a new dialog – similar to the way the map worked.

Here users are given an input box that they must enter a URL into.  In the screen shot I’ve used the BBC Technology News page – completely unrelated to property sales and used for demonstration.

The next step is to click the preview button.  This will preform the process outlined here – http://damonsk.com/2011/05/task-10-system-functionality-sharing-links-like-facebook/

This has returned the page title, meta description and all the images found on that page.

A user may flick through image thumbnails and choose something relevant.

Once we are happy with the thumbnail, we select ‘Finished’ on the Dialog. This will return us to the status update with additional information attached.

Now lets ‘Share’

Heres an example in a property sale context