Getting Started with the JavaScript API

In this tutorial, we walk you through the basics of adding a Sign in with LinkedIn button to your site. This allows you to use a person's LinkedIn identity and data on your site to personalize the experience. You can even let them sign up using their LinkedIn accounts.

When you're finished reading this, you will have installed our JS API framework, embedded a button that lets people authenticate, and printed out a member's first and last name. From there, you can make access our entire set of Profile, Connection, and Network Update information.

Here we go. It's only 5 steps:

1. Find your domain name

For security reasons, you must inform LinkedIn of the domain name you'll be using with each API key. So, your first step is to decide what domain name you'll use to host your LinkedIn-powered application. During development, 'localhost' works!

You must specify the complete fully-qualified domain as we don't do subdomain wildcards or substring matching. For example, http://www.example.com is okay, but *.example.com is not. If you're using a non-standard port (anything other than 80 for http and 443 for https) you must include this, too: http://www.example.com:8080. If you have multiple domains, add them all, and separate them with a comma (,).

2. Get an API key

Now that you've picked your domain, register an API key using API Keys Form. This is the same process you may have used for our normal, OAuth 1 RESTful API keys (in fact, you can use the same key for both OAuth1 REST and the JavaScript API simultaneously). When you register for a key, be sure to specify the domain you picked above for the field "JavaScript API Domain" as in this screenshot:

Once you've completed the key registration form, save your API Key (it will look something like 9apre6gnyK080MpTIoIS4f38AleG08Y0kLM0DH2xeNQATIfDMuoisCMO_). Don't worry about the API Secret - you don't need for most JavaScript API calls.

3. Add our framework to your page

You're now ready to import our JavaScript framework into your app. Create a new HTML file (or reuse an existing file if you have one handy) and add the following script tag to the <head> of your document:

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

Be sure to specify the key from the form, not the one above. Now, try loading this page in your browser (remember to access it via a URL that includes the domain name you specified above). Voila - nothing happens! At least nothing you can see - but behind the scenes, this script tag imported our complete JS framework and verified that your API key is good to go. Check the browser's JS Console to make sure that there are no errors.

4. Add a Sign in with LinkedIn button

Add the following HTML to the body of your document:

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

Now reload the page and you should see a rendered button that looks like the image below. Click the button - it should popup an authorization window asking you to Sign In to LinkedIn and grant API permission to your application. After you agree, the authorization window will close and the underlying web page (your HTML app) will immediately update. The Sign In button will disappear and, instead, our framework will render "Hello, [your first name] [your last name]" in its place!

5. Fetch authorization automatically

Now that our app is finished, test it by reloading the page a few times. Notice that the login button reappears every time, even though you have already logged into the app and granted permission. By default, our framework will only fetch an OAuth token if the user explicitly clicks a Sign In button. You can override this to auto-login signed in users. Set the option authorize: true, and the framework will automatically fetch an OAuth token if one is available (i.e. if the user has previously authorized your application). Configure the authorize parameter in the framework script tag:

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

Congratulations!

That's it. You've gotten the JavaScript API up and running. For next steps, check out our Tutorials and Sample Code.

Help! That didn't work.

If this didn't work, here's a list of things to check:

  • Verify that your API key, copied directly from the key details page linked above, is specified in the framework script tag.
  • Verify that the full domain name you are using to access the html file is specified in the key's configuration details.
  • Check your JavaScript Console for any framework errors.
  • If you are using Firebug or WebKit's Developer Tools, check to make sure that the following files were loaded automatically:
    • in.js (our platform bootstrap loader)
    • userspace.js (live configuration and session info, including the user's oauth_token if available)
    • framework.js (our full framework)

If you're still having problems, please post in our forum and we'll be happy to help!