JavaScript Tags and Templates Tutorial

Tags and Templating: No JavaScript NecessaryThis section explains Hello World in more detail. Then it shows how to modify it to include additional information. It's done with lightweight templating that makes it easy to quickly display results.Login TagBefore your application can retrieve interesting data about the member, they need to authenticate themselves and allow your program access to their LinkedIn data. The easiest way to do this is using the Login tag:

<script type="IN/Login"></script>

This tag automatically generates a Sign In with LinkedIn button.
When a user clicks it, the framework handles all the details of displaying a window which allows the user to: authenticate with LinkedIn and grant your app permission. Once you've granted permission, the popup window fetches an OAuth token which is then posted back to the parent window. The JavaScript API framework running in the parent window receives the token and immediately updates by triggering an "auth" event.Inside the login button tag, you can include an optional template that will fill in placeholders with the member's profile information. In other words, after the user has authorized we'll hide the login button and, if you've specified a template, we'll render the template with some basic profile fields. For the login button tag, five profile fields are supported: member id (id), their first and last name (firstName, lastName), their profile headline (headline, usually something like "JavaScript Ninja at LinkedIn"), and a URL to their profile photo, sized 80x80 (pictureUrl).Print them using this syntax. For example:

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

Or:

<script type="IN/Login">
<img alt="<?js= headline ?>" src="<?js= pictureUrl ?>"></img>
</script>

Running JavaScriptFill-in-the-blanks templating is useful, but sometimes you need logic. For example, not all LinkedIn members have a profile photo. To run JavaScript code, wrap it inside of <?js ... ?> tags:

<script type="IN/Login">
<?js if (pictureUrl) { ?>
  <img src="<?js= pictureUrl ?>"></img>
<?js } else { ?>
  <p>Upload a photo, so we can see what you look like.</p>
<?js } ?>
</script>

Share TagAllowing a visitor to share a link from your site lets them spread your content across their LinkedIn network and beyond. The share tag makes it easy for you to embed a popup window that does just that.

<script type="IN/Share" data-url="http://developer.linkedin.com/"></script>

This produces a LinkedIn Share button. When the member clicks on it, they're given a box letting them share your article along with a comment.
MemberData TagNow that you can print data and execute JavaScript, let's see how you can display member data in places without needing to also display a Sign In image.Don't forget, you still need to include a IN/Login tag somewhere else on your page to let the member sign in, or otherwise have access to ways to identify a member, but this lets you decouple the Sign In image from the displayed content.

<script type="IN/MemberData" data-ids="me">
<?js if ($("me").pictureUrl) { ?>
  <img src="<?js= $("me").pictureUrl ?>"></img>
<?js } else { ?>
  <p>Upload a photo, so we can see what you look like.</p>
<?js } ?>
</script>

This does the exact same thing as the previous code, but there are a few changes. First, the script type is now IN/MemberData. This is a general template for retrieving member information.Before, the template always gave you the signed-in member. This template is more flexible, letting you view information about any LinkedIn member. The trick is knowing how to refer to that person. There are two ways:

  1. For the signed-in member, use the keyword "me". This is the person who is viewing your page.
  2. Use a member id, such as "4KoRHzE6GO". These ids can be gathered by your backend either via an AJAX call using the JavaScript API or through usage of the REST API.
  3. Use a public profile URL, such as "http://www.linkedin.com/in/jakobheuser". When you use this value prepend url=.

Regardless of the way you want to use, put it as a value for the data-ids attribute. In the example above, it's data-ids="me". You can also do data-ids="url=http://www.linkedin.com/in/jakobheuser".Finally, instead of firstName, you do $([KEY]).firstName, where [KEY] is the value you put in data-ids. In this example, it's $("me").firstName, but it could also be $("http://www.linkedin.com/in/jakobheuser"), or any other value. This lets the JavaScript API know which person you're referring to.Multiple MembersAs 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 FieldsUnless 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.Next StepsCongratulations on completing the Tags and Templates Tutorial. If you have questions about any feature, read the Tags and Template Reference.Now, unlock the full power of the JavaScript API with the JavaScript API Tutorial.