Today I decided to look at integrating Facebook deep into the Cuckoo Nest.  A typical example of what I’m wanting to achieve is as shown below.

The above screenshot is from an Application called Spotify.  This application has permission from a facebook user to post updates to their timeline.  The content of the update is generated by the application and is automatically posted to their profile for friends to see.

My intention is to allow similar functionality into the cuckoo nest that will allow users to post properties to their profile and share them with their friends.

There are a few ways of achieving this, the simplest method is using a third party service such as AddThis.com.  This simplifies the process of sharing across a number of social and bookmarking websites.  To use AddThis, a HTML code is generated by their service and then its as simple as copying and pasting the generated code into a web page.  This method is used across a number of high profile websites such as BBC.

Whilst this method will provide a presence on facebook, its a very loose/quick way of doing it.  Testing this method for the Cuckoo Nest generates the following on facebook.

Not quite what I’m after….  This is a similar process to that outlined when I looked at the sharing a link functionality a while ago.  The generator is using the page meta title and description to create the content. It’s a start but the generated content has to be specific to a users property.

The next method is using the Facebook API which requires a more complex setup.  Information about the app must be registered with Facebook.  This will define all the settings and access rights for the application and how it will appear on the social network.

The next step is to create Actions.  An action is something that a user can do, usually to an object.  An example outlined by facebook is, a user can “read, review, want” (action) a “book, movie, song” (object).

The Cuckoo Nest will allow users to post their property onto facebook. So the action would be post and object would be a property.

Using this process, Facebook outlines key required meta tags which will be used when a user posts to their timeline.  These must be placed within the head section of the html document and generated at runtime.  Information within these tags will contain information relevant to the property thats about to be shared. These tags are part of the open graph protocol.  More about them here - http://ogp.me/.

After following the api documentation, I managed to set the Cuckoo Nest up ready to test.  All the required meta tags are generated ready for a user to post to their timeline.

I have yet to integrate the add to timeline and post to facebook functionality however using a simple curl command I was able to test to see how a post would appear in facebook.

Heres the result…

 

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