JavaScript API Tags

Our new JavaScript API supports a number of tags that help you add LinkedIn data and functionality to any web page with just a few lines.

Login Button

The most important of all tags. Creates a "Sign In With LinkedIn" button, which allows the user to authorize your application to access LinkedIn on their behalf.

<script type="IN/Login" data-onAuth="[onAuthCallback]" data-onLogout="[onLogoutCallback]">
[TEMPLATE]
</script>

By default, this tag renders a button:

After the user authorizes, the button disappears. If you have specified a template inside the tag, it will be rendered with basic profile data about the currently signed-in user (see "Templating" below). Available fields are the default Profile API Fields: id, firstName, lastName, headline, and pictureUrl. The template operates under the "me" namespace (see "Templating").

• data-onAuth (optional, comma-separated)
  names of custom callback functions to run when the user authorizes your site
• data-onLogout (optional, comma-separated)
  names of custom callback functions to run when the user logs out of the JavaScript API

Share Button

Creates a LinkedIn Share button.

<script type="IN/Share" data-url="[URL]" data-onSuccess="[successCallback]" data-onError="[errorCallback]"></script>

• data-url (required)
     The URL you want to have the member share
• data-onsuccess (optional)

           The name of a function to invoke if the user completes the share.

• data-onerror (optional)

           The name of a function to invoke if the user does not complete the share.

Example with callback:

<script type="IN/Share" data-url="http://www.linkedin.com" data-success="test"></script>
<script type="text/javascript">function test() { alert('shared');}</script>

MemberData

Creates a tag that allows for the rendering of one or more members' profile data.

<script type="IN/MemberData" data-ids="[ID_LIST] data-fields="[PROFILE_FIELDS]">
[TEMPLATE]
</script>

The contents inside of the script tag are made available as a template (see "Templating"). Available fields are defined in the data-fields and made available via the Profile API. When the viewing user is not logged in or hasn't granted access, a limited set of profile data is made available.

• (required, comma-separated)
     A list of LinkedIn ids for which to retrieve profiles. May be in one of the following formats:             
  • member token A unique token assigned based on your API key per member
  • public profile URL A public profile URL, such as http://www.linkedin.com/in/jakobheuser
  • me The keyword "me" refers to the currently signed-in user
• data-fields (optional, comma-separated)

          A list of fields to retrieve for the members. If not specified, defaults to the Profile API Fields (see "APIs:Profile")

Multiple Members

As you might have guessed from the trailing "s" in data-ids, the In/MemberData doesn't just work for one member. You can retrieve data for multiple members at once.

Put the members you want in a comma separated list inside data-ids. It's okay to use any of the two ways to refer to people. You can even mix them up in one request:

<script type="IN/MemberData" data-ids="a6cWq36XOd,H834yeP0Oo">
<?js if ($("a6cWq36XOd").pictureUrl) { ?>
  <img src="<?js= $("a6cWq36XOd").pictureUrl ?>"></img>
<?js } ?>
<?js if ($("hH834yeP0Oo").pictureUrl) { ?>
  <img src="<?js= $("H834yeP0Oo").pictureUrl ?>"></img>
<?js } ?>
</script>

Like before, use the $() function to specify which member's data you want. This lets you control exactly what person and data goes where.

To reference everyone retrieved, ask for $("*"). This gives an array of members. Then you can do:

<script type="IN/MemberData" data-ids="a6cWq36XOd,H834yeP0Oo">
<?js for (var member in $("*")) { ?>
     <?js if ($(member).pictureUrl) { ?>
       <img src="<?js= $(member).pictureUrl ?>"></img>
     <?js } ?>
<?js } ?>
</script>

The same result, but more compact code.

If you pass data-ids a value it doesn't understand or cannot display due to privacy reasons, it will omit it from the response.

Additional Profile Fields

Unless you say otherwise, you only retrieve a few pieces of information about each member: id, first name, last name, headline, profile picture URL. This is the same id that you can use with data-ids to identify a member. But, most LinkedIn members have a lot more data in their profiles. You need to ask for it.

That's done with the data-fields attribute. For example, to get a person's first name, last name, and their industry:

<script type="IN/MemberData"
    data-ids="a6cWq36XOd,H834yeP0Oo">
    data-fields="firstName,lastName,industry">
<ul>
<?js for (var member in $("*")) { ?>
    <li><?js= $(member).firstName ?> <?js= $(member).lastName ?> 
    works in the <?js= $(member).industry ?> profession.</li>
<?js } ?>
</ul>
</script>

The full list of profile fields lists everything you can ask for and what format we return it. The one translation you must make make it turn hyphens to camel case (Our JSON format uses camelCase instead of the XML dialect's hyphen-format). So, when you see first-name on that page, use firstName.

Additional fields may not always return. It depends on what the member you are looking up has filled out, allows to be displayed publicly, or the relationship between the viewer and the member. So, code defensively when you access this data.

Templating

Tags that allow for templating use a special JS syntax for creating HTML within the script tag's contents. This lightweight templating makes it easy to quickly display results.

<script type="IN/Login">
Hello, <?js= firstName ?> <?js= lastName ?>. You are now logged in.
</script>

<script type="IN/MemberData" data-ids="H834yeP0Oo">
Details for <?js= $("H834yeP0Oo").firstName ?>:
<?js if ($("H834yeP0Oo").pictureUrl) { ?>
  <img src="<?js= $("H834yeP0Oo").pictureUrl ?>"></img>
<?js } ?>
</script>

• <?js
     an opening tag. JavaScript will be executed up until a closing ?>
• <?js=
     an opening tag that outputs the JavaScript variable up until a closing ?>
• $()
     a local function that will retrieve a set of keys by ID