• Save
LinkedIn JavaScript API Soup to Nuts
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

LinkedIn JavaScript API Soup to Nuts

on

  • 6,116 views

 

Statistics

Views

Total Views
6,116
Views on SlideShare
6,053
Embed Views
63

Actions

Likes
4
Downloads
0
Comments
5

4 Embeds 63

http://romacknatividad.wordpress.com 35
http://www.linkedin.com 13
http://lanyrd.com 8
https://www.linkedin.com 7

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • @Jakobo Can we comment on a post using JSAPI ? If yes, can you please share a code sample if you have any.
    Are you sure you want to
    Your message goes here
    Processing…
  • I experimented a bit with NetworkUpdates for all the possible categories and found What I needed, if you are interested in the code, email to me at carlos dot crosetti dot gmail dot com,
    Are you sure you want to
    Your message goes here
    Processing…
  • Carlos: I think the easiest way nowadays with the JS API is to use IN.API.Raw(), which allows for fields not normally retrievable using the standard IN.API endpoints. IN.API.Raw() will allow you to make any rest based call, even those that are not documented.

    http://developer.linkedin.com/documents/inapiraw

    You can then use any of the standard API calls through this interface: http://developer.linkedin.com/apis
    Are you sure you want to
    Your message goes here
    Processing…
  • I undertood what you said in the slids but found the API documentation in LinkedIn.com not complete, could you please send pointers on how I can retrieve the events when my contancts change jobs? I do not need code, just one-linets describing thesteps, thanks!
    Are you sure you want to
    Your message goes here
    Processing…
  • please send me sample app
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Welcome\nSurvey JavaScript Knowledge\nTalk level: Basic. Hopefully have seen javascript\n or have awesome copy/paste skills\nAs the talk progresses, it will get a bit more technical\nWe'll get code samples into your hands though so you can begin hacking by the end of this presentation\n
  • Introduce self, company, qualification\n
  • LOTS TO COVER,\nGoing to move somewhat quickly, so that there's time for questions at the end\nIf I could pick any one part to be awake for during this afternoon's talk, it's where to get an API key and get started\n
  • So here's where you get the API key and get started\nAlright, thanks, that's everything. \nJust kidding, let's get into the (very brief) history of JavaScript\n
  • \n
  • Javascript is a pretty straightforward language, browser quirks aside\nNode.js and other technologies let you run JS on the server side\n\nWe're interested in the client side interaction, which gained traction in 2004\nThere was AJAX which superseded DHTML as the awesomest thing on the internet\n (IF nerdy audience)\nIt was probably quickly eclipsed by LOLcats, but seriously, the rebirth of javascript in the browser was a big thing\n\nSemi-recently, Facebook launched their connect platform, and later their open graph and instant personalization products\nAll of a sudden, facebook was running in other people's web sites (good or bad thing is another talk)\n\nIn October, LinkedIn jumped into browser side API fray with their already established REST APIs\n
  • \n
  • When we set out to design the API, we strove for HTML5 compliance (even in draft form)\n(IF NERD) We're making use of data attributes for parameters, and script tags for embedding content\nThe JS feels pretty natural, using chained methods to link up the APIs, in the spirit of more modern libraries such as YUI3 and JQuery\nWe simplified some of the most common REST operations (such as connections)\nBut included RAW rest support\nThe developer website has a copy/paste example that can get you up and running with a proof of concept in less than 25 lines\n
  • It's working too. Since October, we've seen hundreds of developers pick up the platform\n\nThe platform is labeled as Early Access, so it's slightly possible we shipped some bugs\n\nFeedback is really important to us at this stage, it helps us understand what developers want to do with JavaScript\n
  • Getting an API key is as simple as filling out a form\n
  • developer.linkedin.com Get Started\n\n"get an api key"\n
  • Add a new application, and you're presented with a form\n
  • Fill in all the asterick items, such as your company, any additional administrators or developers for the app\n
  • There's one really important field: the "JavaScript API Domain". This is where your installation is running.\n\nProbably the hardest part of the framework here. For security reasons, the framework will only talk back to the domain you specify here.\n
  • When complete, you'll get an API key and an API secret\n\nIgnore API secret\n\nSave the API key\n
  • \n
  • Here's the basic markup for a "sign in with linkedin" button\n\nScript tag of type text/javascript for our source, with key/values inside\n
  • Inside the script tag, key/value are colon separated, and each item is on its own line\n
  • The two main parameters are api_key and authorize\n\napi_key is the key we got from developer.linkedin.com\n\nauthorize: if true, we'll automatically log the user in if they've given you access.\nif false, we'll always display the "sign in with linkedin" button and ask them to approve your app again\n
  • Script tag of IN/Login which is our login widget. The insides are displayable content (in this case, what will replace the button when the user logs in)\n
  • We can customize the widget by using attributes that start with "Data", followed by a dash\n\nThe login widget supports onAuth and onLogout\n
  • all of this creates the button you see here. When the user clicks it, they're asked to give your site permission\n\nOnce you have permission, you can begin making API calls\n
  • \n
  • We're going to start by modifying the IN/Login tag to add one of those onAuth parameters. We'll call the function getProfile\n
  • getProfile looks like this.\n
  • Most interestingly, we're making a call to IN.API.Profile() right away. This is the JavaScript API. Items are chained together to define the request, which is turned into a REST request on the backend\n
  • The syntax looks like this. IN.API.Profile(), followed by fields() and result()\n\nStarting with the parameter for the Profile() method, you can pass in one or more of the following:\npublic profile URLs can be passed in as url= your URL here\n
  • The fields you want for the profile are denoted using fields()\n\nNames are camelCase, and a full list of profiles can be found here\n
  • The call happens when you call the result() method\n\nIt can be invoked one of two ways. The first way is with just a callback function, which will receive the result\n\nThe second way includes a scope for the function in more complex Object Oriented environments\n
  • Lastly, .error() is a method you can add on to capture any errors\n\nAnd params() lets you pass key-value pairs along\n
  • Inside of result, you get a json payload of the API\n\nThe format is very similar to the standard XML. Collections are under a "values" key, attributes are prefixed by an underscore\n
  • \n
  • Adding connections to our existing code is easy\n\nFirst, we add the getConnections() method to our login widget\n
  • Then we set up the matching function\n
  • Similar to IN.API.Profile, I've highlighted the relevant method calls.\n
  • The connections API supports fields(), result(), and error(), just like the Profile API\nYou can also use params() to pass in limiting parameters to do things such as restricting the total number of results, or setting an offset for pagination\n\nThe complete docs for connections can be found on the developer.linkedin.com site\n
  • \n
  • The last of the introductory APIs I wanted to talk about is searching linkedin's database\n
  • Our getSearch method is going to retrieve some data identical to a search you can do on LinkedIn.com\n
  • We make use of params() to pass in our search parameters. In this example, we're pulling up people who are currently employed at LinkedIn\nWe're then sorting them by distance relative to the logged in user, This means people at LinkedIn in my first degree will be returned, followed by second degree, and then my out of network matches.\n
  • PeopleSearch is a bit different from Connections and Profile. It doesn't need ids.\n\nIt instead uses params() for the searching.\n\nAs for what you can search for, the complete list is on developer.linkedin.com\n
  • Let's talk finally about something that is released but not completely documented yet, support for our RAW apis. Certain operations such as POST and PUT haven't been baked fully into the profile yet. For that reason, we're offering a way to make RAW api calls\n\nThese calls will be supported, even when we add shortcut methods, making it ideal to use functionality before it's generally available\n
  • In this example, we're going to set the current user's status\n\nThere's a couple new methods we're introducing to handle the raw APIs\n
  • First up is the Raw() method itself. We point it to the rest URL, minus the api.linkedin.com/v1 part\n\nWe don't need to worry about GET parameters (as .params() is still supported)\n\nBut we lose the really nice "me" syntax to refer to the currently logged in user. Instead, we need to use a tilde\n
  • We have a method called method() which allows you to change from the default GET to post, put, or delete if your browser supports it\n
  • And then there's the body() method, which is the body of the post.\n\nThe same translation rules that apply to results also apply for sending a json payload back to the server. camelCase for fields, and underscores for attributes\n\nYou can also send a primitive such as a string like we used for status\nBe sure to escape, or the API will return an error.\n
  • The raw API also supports params() like the other APIs, adding items to the GET part of the request\n
  • And supports result() and error() using the same syntax.\n\nWhen posting data, result() may not actually get any data back, but it will be called on success\n
  • If you're looking for inspiration, winners of hackday are on linkedinlabs.\n\nOf note, our most recent hackday winner created LinkedIn Instant. A google-instant like searching tool using our APIs.\n\nThe total time for development (knowing as much as you know now) was 5 hours, including all the custom markup and CSS added\n
  • Again, here's the resources\n\nDeveloper.linkedin.com for all your API questions, developer support and documents\n\nAnd a short link which goes to code samples we've gone over today\n\nThe slides will be available on cloudstock's site after the conference as well\n
  • Questions\n

LinkedIn JavaScript API Soup to Nuts Presentation Transcript

  • 1. JavaScript APISoup to Nuts 1
  • 2. Introduction Web Developer LinkedIn JavaScript API Authorhttp://www.linkedin.com/in/jakobheuser 2
  • 3. A Whole Lot in 45 Minutes JavaScript Crash Course LinkedIns JavaScript API How to Get an API Key Sign in with LinkedIn Retrieve a Profile Get the Current Users Connections Search LinkedIn Raw API Calls (POST/PUT) 3
  • 4. Resources http://developer.linkedin.com – Developer Forums – API Documentation http://linkd.in/jsapi-s2n – Code samples from today 4
  • 5. JavaScript Crash Course JavaScript Crash Course LinkedIns JavaScript API How to Get an API Key Sign in with LinkedIn Retrieve a Profile Get the Current Users Connections Search LinkedIn Raw API Calls (POST/PUT) 5
  • 6. JavaScript ECMA Script (Syntactically similar to C++/Java) Runs in Browsers (and now on servers too) Also drives interaction on the client Gained traction in 2004 through "Web 2.0" 6
  • 7. LinkedIns JavaScript API JavaScript Crash Course LinkedIns JavaScript API How to Get an API Key Sign in with LinkedIn Retrieve a Profile Get the Current Users Connections Search LinkedIn Raw API Calls (POST/PUT) 7
  • 8. LinkedIns JavaScript API HTML 5 Compliant Familiar HTML and JS Syntax Shortcuts for common REST endpoints RAW REST support Copy/Paste Quick Start 8
  • 9. Adoption Launched October 6, 2010 Still in Early Access / Feedback Stage Hundreds of Developers 9
  • 10. Getting an API Key JavaScript Crash Course LinkedIns JavaScript API How to Get an API Key Sign in with LinkedIn Retrieve a Profile Get the Current Users Connections Search LinkedIn Raw API Calls (POST/PUT) 10
  • 11. Getting an API Key 11
  • 12. Getting an API Key 12
  • 13. Getting an API Key 13
  • 14. Getting an API Key 14
  • 15. Getting an API Key API Key: Used to make requests API Secret: not needed 15
  • 16. Sign in With LinkedIn JavaScript Crash Course LinkedIns JavaScript API How to Get an API Key Sign in with LinkedIn Retrieve a Profile Get the Current Users Connections Search LinkedIn Raw API Calls (POST/PUT) 16
  • 17. Sign in with LinkedIn<!DOCTYPE><html><head> <title>LinkedIn JavaScript API</title> <script type="text/javascript" src="http://platform.linkedin.com/in.js"> api_key: 7TUS2_LeCD_vLuUE0L9ew35dh-tYtWkZDk4lQm6LYbcdVXgRELNWUMxl authorize: false </script></head><body> <script type="IN/Login"> Logged in as <?js= firstName ?> <?js= lastName ?> </script></body></html> 17
  • 18. Sign in with LinkedIn<!DOCTYPE><html><head> <title>LinkedIn JavaScript API</title> <script type="text/javascript" src="http://platform.linkedin.com/in.js"> api_key: 7TUS2_LeCD_vLuUE0L9ew35dh-tYtWkZDk4lQm6LYbcdVXgRELNWUMxl authorize: false </script></head><body> <script type="IN/Login"> Logged in as <?js= firstName ?> <?js= lastName ?> </script></body></html> 18
  • 19. Sign in with LinkedIn api_key: The API Key received during signup on developer.linkedin.com authorize: Either "true" or "false". If "false", the user will not be automatically logged in for API calls. 19
  • 20. Sign in with LinkedIn<!DOCTYPE><html><head> <title>LinkedIn JavaScript API</title> <script type="text/javascript" src="http://platform.linkedin.com/in.js"> api_key: 7TUS2_LeCD_vLuUE0L9ew35dh-tYtWkZDk4lQm6LYbcdVXgRELNWUMxl authorize: false </script></head><body> <script type="IN/Login"> Logged in as <?js= firstName ?> <?js= lastName ?> </script></body></html> 20
  • 21. Sign in with LinkedIn data-onAuth: Name of a function to run when the user authorizes your site data-onLogout: Name of a function to run when the user logs off your site and LinkedIn 21
  • 22. Sign in with LinkedIn 22
  • 23. Retrieve a Profile JavaScript Crash Course LinkedIns JavaScript API How to Get an API Key Sign in with LinkedIn Retrieve a Profile Get the Current Users Connections Search LinkedIn Raw API Calls (POST/PUT) 23
  • 24. Retrieve a Profile<script type="IN/Login" data-onAuth="getProfile"> Logged in as <?js= firstName ?> <?js= lastName ?></script> 24
  • 25. Retrieve a Profilefunction getProfile() { IN.API.Profile("url=http://www.linkedin.com/in/jakobheuser") .fields("firstName", "lastName", "industry", "distance", "summary") .result(function(res) { var user = res.values[0], tmpl = ["<p>{firstName} {lastName} works in ", "the {industry} industry. You are {distance} degree(s) ", "away in the network. What follows is their summary.", "</p><p>{summary}</p>"].join(""); for (var name in user) { tmpl = tmpl.replace(new RegExp("{"+name+"}", "g"), user[name]); } document.getElementById("profile").innerHTML = tmpl; });} 25
  • 26. Retrieve a Profilefunction getProfile() { IN.API.Profile("url=http://www.linkedin.com/in/jakobheuser") .fields("firstName", "lastName", "industry", "distance", "summary") .result(function(res) { var user = res.values[0], tmpl = ["<p>{firstName} {lastName} works in ", "the {industry} industry. You are {distance} degree(s) ", "away in the network. What follows is their summary.", "</p><p>{summary}</p>"].join(""); for (var name in user) { tmpl = tmpl.replace(new RegExp("{"+name+"}", "g"), user[name]); } document.getElementById("profile").innerHTML = tmpl; });} 26
  • 27. IN.API.Profile(1).fields(2).result(3)(1) The member IDs to get: (1) url=http://www.linkedin.com/in/jakobheuser (2) mx_82djaa (member token) (3) The keyword "me" (current user) 27
  • 28. IN.API.Profile(1).fields(2).result(3)(1) The member IDs to get(2) The fields to return: (1) camelCase names (2) http://developer.linkedin.com/docs/DOC-1061 28
  • 29. IN.API.Profile(1).fields(2).result(3)(1) The member IDs to get(2) The fields to return(3) A callback function for the result (2 ways) (1) The function itself OR (1) The function itself (2) A scope to run the function in 29
  • 30. IN.API.Profile(1).fields(2).result(3)(1) The member IDs to get(2) The fields to return(3) A callback function for the result(4) Additional Chained Methods (1) .error() is identical to result() for errors (2) .params() passes key-value pairs to the API 30
  • 31. .result(myFunction(r) {...}, [scope]) The variable "r" is a JavaScript Object Contains "values" for collections of items Similar to the XML REST API 31
  • 32. Get the Current Users Connections JavaScript Crash Course LinkedIns JavaScript API How to Get an API Key Sign in with LinkedIn Retrieve a Profile Get the Current Users Connections Search LinkedIn Raw API Calls (POST/PUT) 32
  • 33. Get the Current Users Connections<script type="IN/Login" data-onAuth="getProfile, getConnections"> Logged in as <?js= firstName ?> <?js= lastName ?></script> 33
  • 34. Get the Current Users Connectionsfunction getConnections() { IN.API.Connections("me") .fields("firstName", "lastName", "pictureUrl", "publicProfileUrl") .result(function(res) { var users = [], total = res.total, values=res.values tmpl = [<li style="float: left;"><a href="{publicProfileUrl}">, <img src="{pictureUrl}" alt="{firstName} {lastName}"/>, </a></li>].join(""); for (var name in user) { tmpl = tmpl.replace(new RegExp("{"+name+"}", "g"), user[name]); } document.getElementById("connections").innerHTML = tmpl; });} 34
  • 35. Get the Current Users Connectionsfunction getConnections() { IN.API.Connections("me") .fields("firstName", "lastName", "pictureUrl", "publicProfileUrl") .result(function(res) { var users = [], total = res.total, values=res.values tmpl = [<li style="float: left;"><a href="{publicProfileUrl}">, <img src="{pictureUrl}" alt="{firstName} {lastName}"/>, </a></li>].join(""); for (var name in user) { tmpl = tmpl.replace(new RegExp("{"+name+"}", "g"), user[name]); } document.getElementById("connections").innerHTML = tmpl; });} 35
  • 36. IN.API.Connections() Similar format to IN.API.Profile() Supports .fields() Supports .result() and .error() Supports .params() – count: The number of results to return – start: Index to begin returning results at http://developer.linkedin.com/docs/DOC-1004 36
  • 37. Search LinkedIn JavaScript Crash Course LinkedIns JavaScript API How to Get an API Key Sign in with LinkedIn Retrieve a Profile Get the Current Users Connections Search LinkedIn Raw API Calls (POST/PUT) 37
  • 38. Search LinkedIn<script type="IN/Login" data-onAuth="getProfile, getConnections, doSearch"> Logged in as <?js= firstName ?> <?js= lastName ?></script> 38
  • 39. Search LinkedInfunction getSearch() { var output = ""; IN.API.PeopleSearch().fields("firstName", "lastName") .params({ "current-company": "true", "company-name": "linkedin", "sort": "distance" }) .result(function(res) { var values = res.people.values; for (var i = 0, len = values.length; i < len; i++) { var user = values[i]; output += "<li>"+user.firstName+" "+user.lastName+"</li>"; } document.getElementById("search").innerHTML = "<ul>"+output+"</ul>"; });} 39
  • 40. Search LinkedInfunction getSearch() { var output = ""; IN.API.PeopleSearch().fields("firstName", "lastName") .params({ "current-company": "true", "company-name": "linkedin", "sort": "distance" }) .result(function(res) { var values = res.people.values; for (var i = 0, len = values.length; i < len; i++) { var user = values[i]; output += "<li>"+user.firstName+" "+user.lastName+"</li>"; } document.getElementById("search").innerHTML = "<ul>"+output+"</ul>"; });} 40
  • 41. IN.API.PeopleSearch() Doesnt need ids passed in Uses .params() for search settings http://developer.linkedin.com/docs/DOC-1191 41
  • 42. Search LinkedIn JavaScript Crash Course LinkedIns JavaScript API How to Get an API Key Sign in with LinkedIn Retrieve a Profile Get the Current Users Connections Search LinkedIn Raw API Calls (POST/PUT) 42
  • 43. RAW API Samplefunction setCurrentStatus(status) { IN.API.Raw("/people/~/current-status") .method("PUT") .body("+status+") .result(function() { document.getElementById("updateStatus").innerHTML = status; });} 43
  • 44. IN.API.Raw(1).method(2).body(3)...(1) The raw REST url starting from https://api.linkedin.com/v1 (1) Does not need to include GET parameters (2) Requires the use of "~" for current user 44
  • 45. IN.API.Raw(1).method(2).body(3)...(1) The raw REST url starting from https://api.linkedin.com/v1(2) The method (default is GET) (1) POST (2) PUT (3) DELETE (if your browser supports it) 45
  • 46. IN.API.Raw(1).method(2).body(3)...(1) The raw REST url starting from https://api.linkedin.com/v1(2) The method (default is GET)(3) Your JSON-friendly body (1) For POST/PUT (2) Can also be a single primitive (like our status string) 46
  • 47. .body(3).params(4).result(5)(4) Same as other APIs (4) Will add key-value pairs to GET requests 47
  • 48. .body(3).params(4).result(5)(4) Same as other APIs(5) Same as other APIs (1) .error() also supported 48
  • 49. LinkedIn Labs (linkedinlabs.com) Collection of LinkedIn Hackday Winners Cool ideas and inspiration Working examples of the JavaScript APIs 49
  • 50. Resources http://developer.linkedin.com – Developer Forums – API Documentation http://linkd.in/jsapi-s2n – Code samples from today 50
  • 51. JavaScript APISoup to Nuts 51