Dynamically create "Line it!" share button

Question

We have a Line it! share button on our page, it is blocking loading of our own resources with is causing a big performance issue.

With the implementation of the Line Share button proposed by line.me their line-button.js script needs to be included in the middle of the page, where ever the button should be shown. The button replaces the <script> element from where it's initiated:

<script type="text/javascript">
    new media_line_me.LineButton({"pc":false,"lang":"en","type":"b"});
</script>

I can add the line-button.js script to the page after our own have completed:

function includeLine(callback) {
    var script = document.createElement('script');

    script.async = true;

    script.onload = callback;

    script.src = "//media.line.me/js/line-button.js?v=20140411";

    document.body.appendChild(script);
}

Then I can inject the script element like this:

function initLine() {
    var 
        script = document.createElement('script'),
        line = ['new media_line_me.LineButton({"pc":false,"lang":"'];

    line.push(util.getLang());
    line.push('","type":"b"});');

    script.text = line.join('');

    publ.$elements.shareLine.append(script);
};

But in line-button.js media_line_me.LineButton attaches a listener to the window.onload event, which by this time has already happened.

I really want to make sure that everything else is done before any social media widgets start to load. But right now I'm kind of out of ideas.

Is there another solution to this that's not loading the JS file as text, rewriting it in our script and then eval() it?

Check the readyState, like this: http://stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has-loaded-ie-7-firefox-3 — lipp, Apr 19 '16 at 15:11
@lipp The event listener is in a third party script. I need to have it run last but still before window.onload. — pstenstrm, Apr 19 '16 at 21:25

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Here is your perfect answer

dynamic LINE share button

Github -- naver LINE dynamic share button

Dynamic share button adds:

css class for both <a> and <img>
All options are now meta properties
loads async, no interaction needed!!

Example usage

<!doctype html>
<html xmlns:og="http://ogp.me/ns#">
    <head>
        <meta name="naver-line-selector" content="" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:url"    content="http://www.google.com" />
        <meta property="og:title" content="Dynamic Share button 0" />
        <script src="jquery.js"></script>
        <script>
            jQuery(document).ready(function() {
                $('meta[property="og\\:url"]').attr('content', 'https://www.google.com');
                $('meta[property="og\\:title"]').attr('content', 'Lets exchange LINE');
                $('meta[property="og\\:locale"]').attr('content', 'en_US');
                $('meta[name="naver-line-selector"]').attr('content', '#after-this');
               (function(d) {
                   var po = d.createElement('script');
                   po.type = 'text/javascript'; po.async = true;
                   po.src = 'naver-LINE-share-button.js?v=20140411';
                   var s = d.getElementsByTagName('script')[0];
                   s.parentNode.insertBefore(po, s);
              })(document);
          });
        </script>
    </head>
    <body>
        <div id="after-this"></div>
    </body>
</html>

Please note, implementation is pure javascript. jQuery $.ready used only on html for convenience

Call to action

Could use the following

A glossy button with rounded corners
spreading this javascript library far and wide

Dynamically create "Line it!" share button

1 Answers1

dynamic LINE share button

Dynamic share button adds:

Example usage

Call to action