Apply with LinkedIn Plugin - Language Support

Question

First of all I am disappointed that the plugin itself is only in English. If the user clicks the Apply with LinkedIn button and logs into a French profile, for example, it displays correctly. Only to return to a page with the plugin displaying "Already Applied" in English.

To get around this I wrote some javascript to replace the "Apply with LinkedIn" and "Share" text with French equivalents after the buttons load. The issue I now have is with the "Already Applied" version of the button. It appears that it loads asynchronously to the actual plugin meaning that it overrides my French text in some cases, but other cases it does not.

I know that I can harness the onsuccess event when an application is submitted. However when that LinkedIn user revisits the page the "Already Applied" text does not always appear in the correct language.

Question 1: Has anyone had luck with any techniques to achieve the desired results?

Question 2: When oh when will LinkedIn finally properly support this?

Any help or direction is much appreciated.

Thanks!

UPDATE:

I can confirm that Igor F.'s solution to use the setInterval function and check every 100ms for a change was the best option and worked flawlessly in all tested browsers.

Thanks for all the help and suggestions!

score 2 · Accepted Answer · edited May 23 '17 at 12:20

The plugin seems to receive its information asynchronously from the server and act upon it, i.e. change the content of the page. Have you tried listening to DOM mutation events?

Here is an example how they work when the user causes a change in the web page:

<html>
  <!-- This is just mock-up to allow user to modify the DOM -->
  <body>
    Text to add: <input id="in1" type="text"/>
    <button onclick="addNode();">Add node</button>
    <p id="toAdd"></p>
  </body>

  <script type="text/javascript">
    function addNode() {  // adds a text node to the <p> element
      document
        .getElementById("toAdd")
        .appendChild(document
          .createTextNode(document
            .getElementById("in1")
            .value
          )
        );
    }

    ///////////////////////////////////////
    // Here comes the interesting part: !!!
    document
      .getElementById("toAdd")  // listen to modifications of the <p> element
      .addEventListener(
        "DOMSubtreeModified",   // in this case all modifications of its subtree
        function() {
          alert('Modified!');   // change this to whatever fits your purpose
        }
      );
  </script>
</html>

More about mutation events here. If you want to support IE < 9, you'll need a different approach. Maybe periodically check, e.g. every 100 ms, whether the web page contains the English button and change it into French. See setInterval(). This should be future-proof (mutation events are deprecated), but probably even more inefficient (slow).

In any case, it's a hack. Only LinkedIn can provide a clean solution, e.g. allowing for a language code parameter for the plugin.

Something like this will work, but there is a chance the user will see the English version of the button at some point before it switches. I thought of using something like this but how long is a safe window to wait for the change? I am wondering if setInterval running indefinitely will impact browser performance. — Robin, May 20 '12 at 11:45
If you check every 100 ms, I doubt anyone would notice the English text. Also, the impact on the browser performance should be negligible. Your script would stop anyway when the user navigates away from the page, so you can keep it running "indefinitely". If you want to play it safe, your script can first do browser detection and then use setInterval() solution for IE < 9, and mutation events else. — Igor F., May 20 '12 at 20:57
After reading about the draw backs of the mutation events I will probably take the setInterval route. — Robin, May 20 '12 at 22:34
This looks like the best answer. Thanks for all the feedback! — Robin, May 21 '12 at 01:22

score 0 · Answer 2 · answered May 20 '12 at 01:04

From what I gather, this is the problem you're seeing:

The button initially loads with the text "Already Applied".
You modify the button text to change the text to French.
LinkedIn modifies the button text to change it to "Already Applied".

...and it's intermittent because sometimes 3 happens before 2.

I can't think of a "good" solution to this problem, though I would like to hear if Igor's answer works. I can think of a good hack:

The asynchronous call must be targeting the button somehow, probably through its classname*. So after you've changed the text to French, change the classname to something else. This way the asynchronous call will fail, and your text will never be overridden.

The consequence is that LinkedIn will lose all access to this button, but since it's an Already Applied button, I don't think that will matter. You also risk losing CSS attributes selected using the classname, but looking at a LinkedIn button in the wild, I think the styles are all inlined anyway (and you could always duplicate them yourself under a new classname if you had to.)

Good luck!

* It's also possible that LinkedIn is storing a JavaScript reference instead of targeting via the classname. This will be harder to track down, but the same rule applies: find whatever part of the page LinkedIn uses to identify that button, and destroy it.

It is a JavaScript reference I suspect. And the LinkedIn JavaScript is difficult to navigate since it is compressed. — Robin, May 20 '12 at 11:48
@Dan: The HTML from LinkedIn contains initially no button at all, as far as I could see. JavaScript adds it dynamically. As a consequence, if you destroy the part containing the button, it can well be that LinkedIn's script will re-create it. Just speculating... — Igor F., May 20 '12 at 21:00

Apply with LinkedIn Plugin - Language Support

2 Answers2