Open Graph – Facebook Integration

By | September 26, 2011

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…

 


Comments are closed.