3

The LinkedIn share button can be added to a page with this code:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>

I would like to be able to dynamically change the data-counter to be on top of the button.

To do this, I removed the old LinkedIn button and added a new one with the following code:

addScript = function(counterPosition) {
    mainElement = document.getElementById("scripts-go-here");
    d = document.createElement("script");
    d.type="IN/Share";
    d.setAttribute("type", "IN/Share");
    d.setAttribute("data-counter", counterPosition);

    // Reset the current element, since we only want to change the layout of the button
    while(mainElement.firstChild) {
        mainElement.removeChild(mainElement.firstChild);
    }
    mainElement.appendChild(d);
    IN.parse();
}

addScript("right");
addScript("top");

The problem though, as you can see in this jsfiddle, is that a few JS errors appear shortly after:

"Uncaught TypeError: Cannot set property 'innerHTML' of null"

Why does this happen and how can I get around this ?

Is this a problem with Linkedin's jsApi ?

Fernando Carvalhosa
  • 1,098
  • 1
  • 15
  • 23
Cosmin Atanasiu
  • 2,532
  • 3
  • 21
  • 26
  • Why are you trying to add twice the button in the same element? If you comment out one of the two addScript it works fine. – floribon Jan 15 '15 at 02:29
  • I guess, but won't there be performance issues associated with having more buttons on the page ? And even if I hide one, the linkedin events are still associated with the element. I guess what I want is a way to remove all events created by the Linkedin api, so that once I hide or remove the element => no errors, no performance issues. – Cosmin Atanasiu Jan 16 '15 at 17:51
  • In the api self object(IN), it contains the old elements cache, so when you remove the original elements of button, this cause the null in the IN object inner.So i think in this case you also should refresh the IN object. – Feng Lin Jan 23 '15 at 01:57
  • Thanks for the suggestion, feel free to add this as an answer if you'd like. I want to try this, but when you say "refresh the IN object", do you mean `IN.init()` ? Because I tried using `IN.init()` in the JSFiddle above and the JS error is still there. – Cosmin Atanasiu Jan 23 '15 at 18:00
  • 1
    I debugged your fiddle and figured out, that error is raised only if you remove previous button. It looks like linked in JS API subscribes on internal function something like "getShareCount" and tries to update already removed buttons (widgets). Looks like this is a problem with linked in JS API. I did not find the way to remove share button correctly. But may be you can generate several buttons and hide unnecessary. – TSV Jan 30 '15 at 06:26
  • Tried that, but i'm not being able to add 2 `` in the HTML – Fernando Carvalhosa Jan 31 '15 at 03:14

1 Answers1

3

Seems like you are not passing the node whose contents should be parsed in the IN.parse(domNode) method

Parsing Tags

As the framework loads, it will automatically scan the document and render any LinkedIn-specific tags. Occasionally, you may dynamically change the contents of the DOM and new LinkedIn tags need to be parsed. If the platform has already loaded, you can re-parse for new IN tags with the following JavaScript:

IN.parse(domNode)

Where domNode is the node whose contents should be parsed (e.g. use document.body to trigger a re-parse of the entire page).

Tried some new things with your example and I think this +init is the cause of your error (it's different from this example)

<script type="IN/Share+init" data-counter="top"></script>

Is this happening on your application?

Fernando Carvalhosa
  • 1,098
  • 1
  • 15
  • 23
  • Thanks for your reply, but you misunderstood the question: the script works fine, but if you open the inspector window you get errors on the 2nd call of `addScript`. That is the error I'm trying to fix, the fact that I can't change linkedIn buttons dynamically (multiple times) without having JS errors from LinkedIn's API – Cosmin Atanasiu Jan 30 '15 at 22:04
  • Sorry, now i got it. Have you read the `IN.parse(domNode)` doc? Seems like you are not passing the node whose contents should be parsed. Reference: https://developer.linkedin.com/documents/inauth-inevent-and-inui – Fernando Carvalhosa Jan 30 '15 at 23:48
  • Is this error showing up when you run it in your application or just on JSFiddle? – Fernando Carvalhosa Jan 30 '15 at 23:50
  • It's showing up in both, and I was passing in the proper node. Even in your example, the Javascript error still appears when removing LinkedIn elements and adding new ones. – Cosmin Atanasiu Feb 02 '15 at 23:01