Loading mulitple LinkedIn share buttons dynamically and asynchronously

I have a page showing thumbnails of posts. The posts are fetched via AJAX and a filter allows for different posts to be fetched. When a thumbnail is clicked, a carousel opens centered on the clicked post. Each post in the carousel has a LinkedIn share button.

Linked share buttons don't work properly if loaded into an invisible element and then loaded later. So we must load them at the time of opening the carousel. I do this using the following code:

$.getScript('http://platform.linkedin.com/in.js', function() { 
  $('.li-box-1').append('<script type="IN/Share" data-counter="right"></script>');
});

Now, if I close the carousel and select a filter, thereby fetching a different set of posts, and then click on one of them, the carousel displays without the LinkedIn share button, and we get this warning in the console:

duplicate in.js loaded, any parameters will be ignored

This is because we've already loaded LinkedIn's in.js. Does anyone know how to get around this?

This is the code that calls in the required linked in .js library. We check to see if the library has been loaded previously by checking if the variable IN is undefined. And based on that we load the library for the first time, or ignore it.
This code you will put somewhere in your <header> tag, after the <body> tag, or right before the </body>, dont know your situation.

<script>
if (typeof (IN) !== 'undefined') {
  // IN.parse(); // old but still supports
  IN.init();  // reinitiating linkedin button  
} else {
  $.getScript("http://platform.linkedin.com/in.js");
}   
</script>

or alternatively you could do this:

<script>
  delete IN;
  $.getScript("http://platform.linkedin.com/in.js")
</script>

And now this code you will place with your specific carousel, or carousel items.

<script type="IN/Share" 
        data-url=" **code to generate your url** " 
        data-counter="right">
</script>

If you look at the script you're running, you'll see that the results of the .getScript isn't being loaded into the script tag or anything like that, but rather you're essentially performing two seperate actions: loading the script and then creating the tag with type="IN/Share". The initial action, loading the script, only needs to be run once, as you've discovered, so you just need to run that .append line to create whatever dynamic buttons you want and then call IN.parse() to link the script to the newly created elements.

来源：https://stackoverflow.com/questions/28560907/loading-mulitple-linkedin-share-buttons-dynamically-and-asynchronously

标签

javascript

ajax