How can I load the LinkedIn Javascript API library with a script loader?

Question

The LinkedIn Api suggests you load their javascript library like this:

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

I want to know how I can load this using a script loader (eg. RequireJS or LABJS). It seems the library extracts the api key from within the script tags. This seems like a pretty weird way of doing it in my opinion!

I would prefer to load the library using a script loader, but can't seem to find out how to insert the api_key without using the suggested method.

The official instructions are here

Anyone have any ideas?

Kimball

Answer 1

From: https://developer.linkedin.com/documents/general-methods

Async Loading

To avoid encountering race conditions in your page, you can load the framework asynchronously.

If your page uses JQuery, the following code will work:

$(document).ready(function() {
    $.getScript("http://platform.linkedin.com/in.js?async=true", function success() {
        IN.init({
            onLoad: "myOnloadFunction"
        });
    });
});

Otherwise, you need something like this:

<script type="text/javascript" src="http://platform.linkedin.com/in.js?async=true"></script>
<script type="text/javascript">
    IN.init({
        onLoad: "myOnloadFunction"
        // any other parameters you'd normally put beneath the script element would be here
    });
</script>

Streptomycin

In the IN.init() section (where it says "any other parameters you'd normally put beneath the script element would go here") so you'd add api_key: your_api_key_goes_here as a parameter to that function call – Nonunionism

After you initialise the api_key, do you still need to run IN.parse()? As in: $.getScript(me.linkedInScript, function() { IN.init({ api_key: me.linkedInApiKey }); IN.parse(); }) – Valence

As has been mentioned, the links to /general-methods are broken now. – Declass

Adding ?async=true solved it for me. Then call IN.UI.Authorize().place(); – Flats

Answer 2

Check this out

 if(typeof IN === 'undefined'){ //if it is already included don't include that
            $.getScript('//platform.linkedin.com/in.js', function(data, textStatus){
                 IN.init({
                    api_key: 'YOUR_API_KEY',
                    onLoad: function(){
                        alert("Fully Loaded");
                    }
                });
            });
        }

Strata

Answer 3

As noted by @AdamTrachtenberg you need to use the async version of the API: http://platform.linkedin.com/in.js?async=true

next you will have to call the In.init() upon load of the API JS.
You should do so in the callback function of you script loader.

You may provide your API Key as a param to In.init()

Note: that you do not need to pass a callback function onLoad to In.init()
a post i wrote about the same

Autrey