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

broker handling numerous ajax requests simultaneously

Utilizing ReactJS for Web Development with Enhanced Data Insights from Google

Azure API Management encountering Cross-Origin Resource Sharing (CORS) problem

Implementing ExpressJS with MongoDB on a MERN Development Stack

Integrating additional youngsters into the HTML DOM using Angular.js

Tips for keeping a specific key value pair as the final entry in a Typescript Object

Error on the main thread in NativeScript Angular for Android has not been caught

Transferring information to the controller and refreshing the interface (Single-page design)

What is the best way to integrate ES6 ReactJS code into an Express application?

Switching from a click event to a hover event in JavaScript

Tips for accessing and adjusting an ngModel that is populated by an attribute assigned via ngFor

Comparison of getComputedStyle() and cssText functionality between Internet Explorer and Firefox

Show the chosen option when the textarea is no longer in focus

"Triggering ngClick causes ngSrc to update, however, the keydown event handler does not have

generate a customized synopsis for users without storing any data in the database

Enhance your checkbox and radio components with React Higher Order Components (H

Tips for choosing a single row in a table using a checkbox

What is the best way to handle parsing JSON with special characters in JavaScript?

The Rails base file contains a function, let's call it function A, which calls another function, function C. However, function C is defined in two separate JavaScript files

Learn how to showcase a modal pop-up in AngularJS by utilizing the ng-if directive