Your SlideShare is downloading. ×
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 ...
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...
Meet the Container




    A Container is a Social Network that
  provides an environment for OpenSocial
Javascript and RE...
Meet the Views




                        Home Page
• Primary point of entry for members
• Owner & Viewer are always the ...
Meet the Views




                       Profile Page
• Owner is the person who owns the profile
• Information displayed is...
Meet the Views




                        Canvas Page
• Serves many purposes & contexts for an application
• Owner & View...
Let’s get Technical.
Dig the new Science!



•   Technologies Involved

•   Accessible Social Data

•   Viral Features (Messaging, Network Upda...
Technologies
• Javascript (for Controller,View, and Model
  logic)
• JSON (for Social Data in gadget or using in
  OpenSoc...
Social Data
•   Person
     • friends (connections)
     • id
     • name ( givenName, familyName, unstructured )
     • t...
the Gadget Spec
Defines an Application

           This is all ceremony.
Virality
  Connection Messaging
requestSendMessage() / requestShareApp()
 On LinkedIn, messages can be sent to 1st degree ...
Let’s Begin.

• Start with Hello, World!
• Sprinkle some Social Data
• Support some Views
• Phone Home to your Server
• Ce...
Hello, world!
  <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
<Module>
 <ModulePrefs title=quot;Hello World!quot...
Hello, world!
  <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
<Module>
 <ModulePrefs title=quot;Hello World!quot...
Hello, world!
  <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
<Module>
 <ModulePrefs title=quot;Hello World!quot...
Hello, world!
  <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?>
                                                  ...
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, fe...
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(quot;viewName”);

 viewName in this case would...
Functions to Know
 Receive URL Parameters
gadgets.views.getParams()

 Parameters sent via requestNavigateTo (or provided b...
Add Support for Views to Your Gadget
           First to ModulePrefs
Add Support for Views to Your Gadget
            Then Change Your
             Content Blocks




                    (You...
Add Support for Views to Your Gadget
            Then Change Your
             Content Blocks
                     (You se...
Navigation
             Set up params to pass to
                      canvas




             Inspect the params on the
 ...
Navigation
       Your link will carry your params...

       gadgets.views.requestNavigateTo




         And you receive...
How to Phone Home
How to Phone Home
               Use gadgets.io.makeRequest()




        Inbound to your server, you’ll receive these par...
How to Phone Home
            Processing the Callback




• If your content type in the response is HTML, your
  response ...
Celebrate!
What now?!




         You’ve got a lot of reading to do!
http://code.google.com/apis/opensocial/docs/0.8/reference/
Upcoming SlideShare
Loading in...5
×

Developing for LinkedIn's Application Platform

10,344

Published on

The bare basics. There's a lot more to know, but this is where it all begins. Learn OpenSocial with General Zod, Mr. Wizard & more.

Published in: Technology
1 Comment
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,344
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

Transcript of "Developing for LinkedIn's Application Platform"

  1. 1. Building OpenSocial Applications for LinkedIn’s Application Platform
  2. 2. Orientation
  3. 3. 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.”
  4. 4. What can applications do? Encourage communication & collaboration between members
  5. 5. What can applications do? Allow members to be more expressive in how they present their professional identities
  6. 6. What can applications do? Provide novel functionality that leverages a member’s LinkedIn Network in a moment of need
  7. 7. Vocabulary
  8. 8. They’re not widgets
  9. 9. Or Gidgets...
  10. 10. They’re Gadgets!
  11. 11. And a Gadget is really just a mask for something greater...
  12. 12. OpenSocial Gadgets are just one face of an Application Website REST OpenSocial
  13. 13. Meet the Actors The VIEWER Always the Member currently viewing the gadget.
  14. 14. Meet the Actors The OWNER The member who owns the profile being looked at. Sometimes also the owner of a canvas page.
  15. 15. 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.
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. Let’s get Technical.
  20. 20. Dig the new Science! • Technologies Involved • Accessible Social Data • Viral Features (Messaging, Network Updates) • Iterative Hello, World! Example
  21. 21. 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)
  22. 22. 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
  23. 23. the Gadget Spec Defines an Application This is all ceremony.
  24. 24. 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.”
  25. 25. Let’s Begin. • Start with Hello, World! • Sprinkle some Social Data • Support some Views • Phone Home to your Server • Celebrate!
  26. 26. Hello, world! <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> <Module> <ModulePrefs title=quot;Hello World!quot;> <Require feature=quot;opensocial-0.8quot; /> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ Hello, world! ]]> </Content> </Module>
  27. 27. Hello, world! <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> <Module> <ModulePrefs title=quot;Hello World!quot;> <Require feature=quot;opensocial-0.8quot; /> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ I’m a silly joke, Hello, world! executed poorly. Still, I’d like to help ]]> you write your gadget spec! </Content> </Module>
  28. 28. Hello, world! <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> <Module> <ModulePrefs title=quot;Hello World!quot;> <Require feature=quot;opensocial-0.8quot; /> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ Hello, world! ]]> </Content> </Module>
  29. 29. Hello, world! <?xml version=quot;1.0quot; encoding=quot;utf-8quot; ?> Add OpenSocial features <Module> <ModulePrefs title=quot;Hello World!quot;> <Require feature=quot;opensocial-0.8quot; /> </ModulePrefs> <Content type=quot;htmlquot;> Prepare View Content <![CDATA[ Hello, world! ]]> </Content> </Module>
  30. 30. Hello, world! From gadget metadata From your <Content> block
  31. 31. 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
  32. 32. Adding Social Data
  33. 33. Do something in your callback...
  34. 34. Tell the container to execute this on load... This is like body onLoad in normal HTML
  35. 35. And something like this will be your result.
  36. 36. Views
  37. 37. Functions to Know Get a View Object var view = new gadgets.views.View(quot;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
  38. 38. 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.
  39. 39. Add Support for Views to Your Gadget First to ModulePrefs
  40. 40. Add Support for Views to Your Gadget Then Change Your Content Blocks (You set the view for the block here)
  41. 41. Add Support for Views to Your Gadget Then Change Your Content Blocks (You set the view for the block here)
  42. 42. Navigation Set up params to pass to canvas Inspect the params on the canvas
  43. 43. Navigation Your link will carry your params... gadgets.views.requestNavigateTo And you receive them here! gadgets.views.getParams()
  44. 44. How to Phone Home
  45. 45. 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.
  46. 46. 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.
  47. 47. Celebrate!
  48. 48. What now?! You’ve got a lot of reading to do! http://code.google.com/apis/opensocial/docs/0.8/reference/

×