Dynamically and asynchronously loading numerous LinkedIn share buttons on a page

Question

Dynamically and asynchronously loading numerous LinkedIn share buttons on a page

On my page, I have a grid of post thumbnails that are fetched via AJAX and can be filtered. When a user clicks on a thumbnail, a carousel opens with the selected post centered. In this carousel, each post has a LinkedIn share button integrated.

The issue arises when trying to load the LinkedIn share buttons into an invisible element initially and then making it visible later. This causes the buttons not to work properly. To solve this problem, I use the code snippet below:

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

However, if I close the carousel, filter the posts, select a different one, and open the carousel again, the LinkedIn share button is missing. Additionally, a warning appears in the console stating:

duplicate in.js loaded, any parameters will be ignored

This warning occurs because LinkedIn's in.js script has already been loaded previously. Does anyone have a solution for this issue?

javascript ajax linkedin-api

Answer 1

Answer №1

Below is the snippet of code that will include the mandatory linked in .js library. We first check if the library has been loaded before by verifying if the variable IN is undefined. Depending on this condition, we either load the library for the first time or skip the process.
This piece of code should be placed within your <header> section, following the <body> tag, or just before the closing </body>, depending on your specific case.

<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>

Alternatively, you can also utilize the following method:

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

Now, place this code alongside your custom carousel or carousel items.

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

Answer 2

Below is the snippet of code that will include the mandatory linked in .js library. We first check if the library has been loaded before by verifying if the variable IN is undefined. Depending on this condition, we either load the library for the first time or skip the process.
This piece of code should be placed within your <header> section, following the <body> tag, or just before the closing </body>, depending on your specific case.

<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>

Alternatively, you can also utilize the following method:

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

Now, place this code alongside your custom carousel or carousel items.

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

Answer 3

Answer №2

Upon examining the script being executed, one can observe that the output of the .getScript function is not directly injected into the script tag itself; rather, two distinct actions are taking place: loading the script and then generating the tag with type="IN/Share". The initial step of loading the script only needs to be performed once, as previously noted, hence it suffices to execute the .append command to create any desired dynamic buttons and subsequently invoke IN.parse() to establish a connection between the script and the freshly generated elements.

Answer 4

Upon examining the script being executed, one can observe that the output of the .getScript function is not directly injected into the script tag itself; rather, two distinct actions are taking place: loading the script and then generating the tag with type="IN/Share". The initial step of loading the script only needs to be performed once, as previously noted, hence it suffices to execute the .append command to create any desired dynamic buttons and subsequently invoke IN.parse() to establish a connection between the script and the freshly generated elements.

Answer 5

Answer №3

It seems like you're utilizing some advanced coding techniques just to share a link on LinkedIn. Have you considered trying a simpler method?

https://www.linkedin.com/sharing/share-offsite/?url={url}

This way, you'll have the flexibility to hyperlink anything you desire, customize it with CSS and JS, and more.

Source: Microsoft LinkedIn Share URL Documentation.

Here's an example that works for me:

It functions perfectly:

Answer 6

It seems like you're utilizing some advanced coding techniques just to share a link on LinkedIn. Have you considered trying a simpler method?

https://www.linkedin.com/sharing/share-offsite/?url={url}

This way, you'll have the flexibility to hyperlink anything you desire, customize it with CSS and JS, and more.

Source: Microsoft LinkedIn Share URL Documentation.

Here's an example that works for me:

It functions perfectly:

Dynamically and asynchronously loading numerous LinkedIn share buttons on a page

Answer №1

Answer №2

Answer №3

Similar questions

byte sequence displays as binary data (angular + express)

Exploring the world of data manipulation in AngularJS

Redux accesses the store data after a brief delay

What is the method for obtaining a unique exception message in the ajaxError event of jQuery?

What are the steps to integrate and utilize DefinePlugin within your webpack configuration?

Unusual marking on the navigation bar

Suggestions for relocating this function call from my HTML code

Transfer the controller of the parent directive to a directive controller, similar to how it is executed in the "link" function

What could be the reason for the sudden lack of content from the Blogger API?

Persistent change issue with JQuery CSS function

Node.js encountered an error due to a self-signed certificate within the certificate chain

In which location can one find the compiled TypeScript files within an Angular 2 project?

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

Tips for manipulating the DOM: Pushing existing elements when new ones are dynamically created with JavaScript

What is the best way to convert my JSON data to HTML using JavaScript?

I am unable to correctly fetch the data string using Jquery Ajax from the server

What is the best way to iterate through a designated key in every object within a JSON dataset and store it in a variable called `data` for use with

Trouble with Loading Google Place Autocomplete API in HTML

Issue: Module 'xml2json' not found

What is the procedure to change a matter body's isStatic property to false in matter.js upon pressing a key?