I was recently charged with a project where I needed to get user information from LinkedIn and I decided to use their JavaScript API.  Unfortunately, most of their examples were not very useful for what I was trying to do.

What Am I doing?

The goal was to pre-fill a long registration form and then display willing registrants on an attendees page.  This was convenient since I could take the user’s LinkedIn photo URL.  In this post, I will only go over how to get the values from LinkedIn.

Create the Application

The first step is to create an application.  Head over to https://www.linkedin.com/secure/developer. (LinkedIn account required!)  I’m not going to walk you through the form process, but I’d like to point out a few important spots.

• The Application Name will be displayed to the user, so name it accordingly
• Make sure to check the appropriate scopes according to which data you will need. For this example, I have selected r_fullprofile, r_emailaddress, and r_contactinfo. They provide a well-documented section for the profile fields, which should help you define your scope.
• JavaScript API Domains – make sure you include your development domain, e.g. localhost.

Once you hit save, you’ll be presented with an API Key.  Save that, you’ll need it later.  If you forget, it will be listed on the application page.

The Fun Stuff

Initialize the LinkedIn JavaScript API, and paste in your API key.  Since we defined the scope at the application level, you do not need to define it here, but you can if you want.

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: yourApiKey
onLoad: onLinkedInLoad
authorize: true
</script>

Now within another script tag, add the authentication event:
<script type="text/javascript">
function onLinkedInLoad() {
IN.Event.on(IN, "auth", onLinkedInAuth);
}

Now we make the API call, listing the fields we’d like to pull back.  Again, refer to the profile fields to see all the available fields and which fields are collections.
function onLinkedInAuth() {
IN.API.Profile("me")
.fields(["firstName", "lastName", "positions:(title,company)", "pictureUrl", "publicProfileUrl", "emailAddress"])
.result(function (result) {
displayProfileData(result);
});
}

In this display function, I’m using jQuery to set the values I’ve pulled back.  You will notice I am setting the positions field to 0, as I only care about their current job. In my case, I do not care or need to iterate through their past positions and companies.
function displayProfileData(profile) {
var profile = profile.values[0]; $('#firstName').html(profile.firstName); $('#lastName').html(profile.lastName); $('#title').html(profile.positions.values[0].title); $('#company').html(profile.positions.values[0].company.name);
$('#email').html(profile.emailAddress); $('#pic').attr('href', profile.publicProfileUrl);
 $('#pic img').attr('src', profile.pictureUrl);
$('#pic img').attr('alt', profile.firstName + " " + profile.lastName);
}

Toss this in the body of your HTML.  This is the button you’ll use to initiate the LinkedIn popup authentication form.  I have seen people add their own CSS styles to it to customize it, but I personally will not do that.  On a LinkedIn forum post, one of the developers states that LinkedIn would like to have a consistent experience for their users across all sites.  My only other concern is if they decide to change their styles one day, you will have a broken button.
<script type="IN/Login"></script>

This is the HTML we are going to shove the data into.  In my own project, I put these values into the input fields, but for the purpose of this post, we are going to do it this way.
<div id="firstName"></div>
<div id="lastName"></div>
<div id="title"></div>
<div id="company"></div>
<div id="email"></div>
<a id="pic" href="#"><img src="" alt="" /></a>

It’s Alive!
And that’s it!  If you did everything correctly, you should see a login button.

When clicked, LinkedIn will notify the user to which data you’ve requested access.  So, make sure you only select the scope’s you will need.

Once you allow access, this should be the result: (obviously with your beautiful mug instead of mine).