Building OpenSocial
Applications
for LinkedIn’s Application Platform

Orientation

What is OpenSocial?
“OpenSocial defines a common API for social
applications across multiple websites. Built from
standard JavaScript and HTML, developers can
create apps with OpenSocial that access a social
network's friends and update feeds. By using a
common API, developers can extend the reach of
their applications more quickly, yielding more
functionality for users.”

What can applications do?
Encourage communication & collaboration
between members

What can applications do?
Allow members to be more expressive in how
they present their professional identities

What can applications do?
Provide novel functionality that leverages a
member’s LinkedIn Network in a moment of
need

Vocabulary

They’re not widgets

Or Gidgets...

They’re Gadgets!

And a Gadget is really
just a mask for
something greater...

OpenSocial Gadgets
are just one face of an
Application
Website REST OpenSocial

Meet the Actors
The VIEWER
Always the Member currently viewing the gadget.

Meet the Actors
The OWNER
The member who owns the profile being looked at.
Sometimes also the owner of a canvas page.

Meet the Container
A Container is a Social Network that
provides an environment for OpenSocial
Javascript and REST calls, “views” for gadgets
to surface on, and underlying Social Data.

Meet the Views
Home Page
• Primary point of entry for members
• Owner & Viewer are always the same
• Content should be focused on the Member’s interaction with the
application

Meet the Views
Profile Page
• Owner is the person who owns the profile
• Information displayed is seen by all who visit the profile
• Content should be focused on what the member does with the
application

Meet the Views
Canvas Page
• Serves many purposes & contexts for an application
• Owner & Viewer might not be the same. Owner is determined by
how it was navigated to.
• Content can be anything related to the application

Let’s get Technical.

Dig the new Science!
• Technologies Involved
• Accessible Social Data
• Viral Features (Messaging, Network Updates)
• Iterative Hello, World! Example

Technologies
• Javascript (for Controller,View, and Model
logic)
• JSON (for Social Data in gadget or using in
OpenSocial REST APIs)
• XML (for Gadget Spec, optional REST)
• HTML (for your View layer)
• REST (for interacting with your server or
using OpenSocial REST APIs)

Social Data
• Person
• friends (connections)
• id
• name ( givenName, familyName, unstructured )
• thumbnailUrl
• aboutMe
• currentLocation ( unstructured )
• jobs ( title, name, description, field, startDate, endDate,)
• schools ( name, startDate, endDate )
• urls
• linkedin-ext ( require the feature in your gadget spec )
• numConnections
• distance
For more detail on fields available:
http://code.google.com/apis/opensocial/docs/0.8/reference/#opensocial.Person

the Gadget Spec
Defines an Application
This is all ceremony.

Virality
Connection Messaging
requestSendMessage() / requestShareApp()
On LinkedIn, messages can be sent to 1st degree connections using this function. User
will be diverted to standard message sending flow. The Javascript callback will never be
called.
Network Updates
requestCreateActivity()
Creates a Network Update on behalf of the Viewer of the
application. Updates should be contextual based on a user action.
Good: “Taylor is reading In Watermelon Sugar.”
Bad: “Taylor just installed this lame application.”

Let’s Begin.
• Start with Hello, World!
• Sprinkle some Social Data
• Support some Views
• Phone Home to your Server
• Celebrate!

Hello, world!
<?xml version=\"1.0\" encoding=\"utf-8\" ?>
<Module>
<ModulePrefs title=\"Hello World!\">
<Require feature=\"opensocial-0.8\" />
</ModulePrefs>
<Content type=\"html\">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>

Hello, world!
<?xml version=\"1.0\" encoding=\"utf-8\" ?>
<Module>
<ModulePrefs title=\"Hello World!\">
<Require feature=\"opensocial-0.8\" />
</ModulePrefs>
<Content type=\"html\">
<![CDATA[ I’m a silly joke,
Hello, world! executed poorly.
Still, I’d like to help
]]> you write your gadget
spec!
</Content>
</Module>

Hello, world!
<?xml version=\"1.0\" encoding=\"utf-8\" ?>
<Module>
<ModulePrefs title=\"Hello World!\">
<Require feature=\"opensocial-0.8\" />
</ModulePrefs>
<Content type=\"html\">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>

Hello, world!
<?xml version=\"1.0\" encoding=\"utf-8\" ?>
Add OpenSocial features
<Module>
<ModulePrefs title=\"Hello World!\">
<Require feature=\"opensocial-0.8\" />
</ModulePrefs>
<Content type=\"html\"> Prepare View Content
<![CDATA[
Hello, world!
]]>
</Content>
</Module>

Hello, world!
From gadget metadata
From your <Content> block

Adding Social Data
1. Setup a new DataRequest object
2. Add a new fetchPerson request for Actors you
need data for, fetchPeople requests for
collections like friends, arrays of member ids...
3. Execute the request with request.send,
specifying a callback that will act on the data

Adding Social Data

Do something in your
callback...

Tell the container to
execute this on load...
This is like body onLoad in normal
HTML

And something like this
will be your result.

Views

Functions to Know
Get a View Object
var view = new gadgets.views.View(\"viewName”);
viewName in this case would be one of our supported views: canvas, profile, home
You need a view object to request navigation to it.
Navigate Between Views
gadgets.views.requestNavigateTo(view, optionalParameters)
This initiates a transition from one view to another.
• You can’t specify an Owner or Viewer in this context. It carries over from the last.
• You use this function in an onClick event for a link
• optionalParameters are JSON-format parameters to be passed only to a Canvas
page. How to get these parameters on the next page will be detailed on the next
slide

Functions to Know
Receive URL Parameters
gadgets.views.getParams()
Parameters sent via requestNavigateTo (or provided by other means of generating a
canvas URL) are accessible through this function in JSON Hash format.
Adjust View Height
gadgets.window.adjustHeight()
Adjusts the height of your gadget frame, while trying to auto-magically guess how
much space you need, within the confines of the allowed height. Not always accurate.
• You can specify an integer representing the exact pixel height to extend to.

Add Support for Views to Your Gadget
First to ModulePrefs

Add Support for Views to Your Gadget
Then Change Your
Content Blocks
(You set the view for the block here)

Add Support for Views to Your Gadget
Then Change Your
Content Blocks
(You set the view for the block here)

Navigation
Set up params to pass to
canvas
Inspect the params on the
canvas

Navigation
Your link will carry your params...
gadgets.views.requestNavigateTo
And you receive them here!
gadgets.views.getParams()

How to Phone Home

How to Phone Home
Use gadgets.io.makeRequest()
Inbound to your server, you’ll receive these parameters:
opensocial_owner_id
opensocial_viewer_id
opensocial_app_id
opensocial_app_url
In addition, you’ll receive an OAuth signature for parameter validation.
Implementation depends on your server-side language and is beyond the
scope of this tutorial.

How to Phone Home
Processing the Callback
• If your content type in the response is HTML, your
response variable would be a string with that HTML.
• If your content type in the response is JSON, it will
automatically be destringified into a JSON object.

Celebrate!

What now?!
You’ve got a lot of reading to do!
http://code.google.com/apis/opensocial/docs/0.8/reference/