はじめに
いいねボタン（シェアボタン）、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などが使えない環境で、シェア文言などを書き換える必要があるとき、
変数を使って文字列を書き換えるのにも便利だと思います。