Creating a Member Profile Plugin

The Full Member Profile plugin allows you to display large and detailed LinkedIn profiles on your site.

The code to present the Full Member Profile plugin is simple, but it does require that you know the member's platform id.  Let's walk through the process of getting this value and using it to create the plugin.

1. Create the Login Button

The first thing you need to do is go all the way through Getting Started with the LinkedIn JavaScript API. This demonstrates how to install the JS framework and authenticate a member. When you're done with that, you'll have a page that has these pieces on it.

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
  api_key: your_api_key_goes_here
</script>

<script type="IN/Login">
Hello, <?js= firstName ?> <?js= lastName ?>.
</script>

2. Grab the Member ID and Display the Profile Widget

The next step is to make a profile call for the user to get their platform id. This is the id field for a person.  To make the call, we change the code above so that instead of just printing the user's name to the screen, a function is run after the user has authenticated.

You'll need to add a separate <div> for the profile to be injected into.  This can go in your HTML body wherever you want the profile to appear.

<div id="profile"></div>

This JavaScript function should be placed in the head of the document.  Note that because this tutorial is dynamically creating the widget, we need to re-parse the div to generate the profile page.  This is done using IN.Parse(), which is documented on the documentation page about IN.Auth, IN.Event, and IN.UI.

function getID() {
   IN.API.Profile("me")
   .result(function(result) { 
      $("#profile").html('<script type="IN/FullMemberProfile" data-id="' + result.values[0].id + '"></script>');
      IN.parse(document.getElementById("profile"))
   })
}

The ID returned is the user's platform id for your application key, and is a string which looks like: G0uYndFs07

Last, change the login button in the body of the page to call the function when the user has authenticated by setting the data-onAuth parameter to the name of the function, getId().

<script type="IN/Login" data-onAuth="getID"></script>

With these pieces in your file, a user will see their profile once they've logged in to the site.

Full Code

This application performs the following tasks:

  • Handles authentication for the member
  • Retrieves user information once the user has logged in and updates the page to add the widget
  • Reloads the JSAPI framework to display the newly created profile

The full code for this application would be something like the following.  This example uses jQuery, but of course you can use whatever framework works best for you (or plain vanilla Javascript)

<html>
<head>
<title>Profile App Example</title>

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
  api_key: o1yf9WMdgd8dp_OGkmtXESCOJFostN8N1jI1AFKY2i0kJ1QFNMOs3a6R5qUoBIqF
  authorize: true
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5b1.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>  

<script type="text/javascript">

function loadData() {
IN.API.Profile("me")
   .result(function(result) { 
      $("#profile").html('<script type="IN/FullMemberProfile" data-id="' + result.values[0].id + '"></script>');
      IN.parse(document.getElementById("profile"))
   })
}

</script>

</head>
<body class="yui3-skin-sam     yui-skin-sam">
<div id="profile"></div>
<script type="IN/Login" data-onAuth="loadData"></script>
</body>
</html>