はじめに

いいねボタン（シェアボタン）、Twitterツイートボタン、LINEボタン、Google+ +1ボタンをJSだけで読み込む方法を試行錯誤しました。

基本的には、

各SNSのボタン設置用スクリプトを動的に読み込み
ページのロードのタイミングで公式の設置コードをHTMLに埋め込み
各SNSの動的更新コマンドを実行

という流れです。

ソース

雛形のHTMLはこんな感じです。OGPを仕込んで自前のCSS・JSを読み込む以外は、何の変哲もないソースです。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>JS share button</title>

  <meta property="og:title" content="XHTML like">
  <meta property="og:type" content="website">
  <meta property="og:url" content="http://example.com/">
  <meta property="og:image" content="http://example.com/ogp.png">

  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="wrapper">
    <ul class="list-share">
      <li class="item facebook"></li>
      <li class="item twitter"></li>
      <li class="item line"></li>
      <li class="item gplus"></li>
    </ul>
  </div>

  <script type="text/javascript" src="js/script.js"></script>
</body>

</html>

JSはそれぞれ小分けして記載しています。（上記で js/script.js としているところを適宜書き換えてください。）
※ FacebookのappIdは2箇所各自埋め込んでください。

like-button.js

(function likeButton() {
  var likeElm = document.createElement('div');
  likeElm.innerHTML = '<div class="fb-like" data-action="like" data-href="http://example.com/" data-layout="button_count" data-share="false" data-size="small"></div>';

  window.addEventListener('load', function() {
    document.querySelector('.facebook').appendChild(likeElm);

    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'XXXXXXXX',
        xfbml      : true,
        version    : 'v2.8'
      });
    };

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8&appId=XXXXXXXX";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  });
})();

tweet-button.js

(function tweetButton() {
  window.addEventListener('load', function() {
    var tweetElm = document.createElement('div');
    tweetElm.innerHTML = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com" data-text="JS share button" data-lang="ja">ツイート</a>';

    document.querySelector('.twitter').appendChild(tweetElm);

    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
  });
})();

line-button.js

(function lineButton() {
  var scriptElm = document.createElement('script');
  scriptElm.src = '//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js';
  document.body.appendChild(scriptElm);

  window.addEventListener('load', function() {
    var lineElm = document.createElement('div');
    lineElm.innerHTML = '<div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja" ></div>';

    document.querySelector('.line').appendChild(lineElm);

    LineIt.loadButton();
  });
})();

plusone-button.js

(function plusoneButton() {
  var scriptElm = document.createElement('script');
  scriptElm.src = 'https://apis.google.com/js/platform.js';
  scriptElm.innerHTML = "{lang: 'ja', parsetags: 'explicit'}";
  document.body.appendChild(scriptElm);

  window.addEventListener('load', function() {
    var gplusElm = document.createElement('div');
    gplusElm.innerHTML = '<div class="g-plusone" data-size="medium"></div>';

    document.querySelector('.gplus').appendChild(gplusElm);

    gapi.plusone.go();
  });
})();

注意事項

本プログラムは2016年11月8日現在のものです。
ソーシャルボタンの仕様はよく変わるので、そのときに応じた公式のボタン設置コードに準ずるようにしましょう。

まとめ

HTMLに手を入れることなくJavaScriptだけでソーシャルボタンを設置する方法を提示しました。
設置するコード自体は元々HTMLに埋め込むものと変わりないですが、
全てをJavaScriptで賄うことができるのでパッケージ化は楽になるかと思われます。
また、PugやSlimなどが使えない環境で、シェア文言などを書き換える必要があるとき、
変数を使って文字列を書き換えるのにも便利だと思います。

JSだけでソーシャルボタン設置

はじめに

ソース

注意事項

まとめ