シェアボタンを押した時に小窓で開くようにする方法
記事下などにある SNS のシェアボタンを押した時に、別タブではなく小窓で開くようにする方法です。JavaScript を使って実装します。小窓というのは小さなウィンドウのことです。
小窓（小さなウィンドウ）で開くメリット
小窓で開くことのメリットは色々ありますが、それぞれのシェアボタンの移動先が小窓で開くことが前提になっている SNS もあるので、そのまま別タブで開くと表示が崩れる SNS もあります。facebook や Google+ がそうですね。
小窓で開かない場合
別タブで開くことになるので、余白が多く左によってしまい不格好です。
小窓で開く場合
小さなウィンドウで開くので余白がほとんどありません。
また、小窓で開くことで別タブに行ってしまうことがないので、ページに留まってもらいやすいとかいうことがあるかもしれませんし、ないかもしれません。
以下スクリプトコードの解説です。
シェアボタンに class 名がついている場合
まずは a タグの class 名がわかっている場合です。class 名とは、例えば HTML が、
<ul>
<li><a class="share" target="_blank" href="・・">facebook</a></li>
<li><a class="share" target="_blank" href="・・">Twitter</a></li>
<li><a class="share" target="_blank" href="・・">G+</a></li>
<li><a class="share" target="_blank" href="・・">B!</a></li>
<li><a class="share" target="_blank" href="・・">pocket</a></li>
</ul>であれば、赤い部分が class 名です。class 名はテーマやプラグインなどによって違うので各自で調べてください。
JavaScript
<script>
(function() {
var shareButton = document.getElementsByClassName("share");
for (var i = 0; i < shareButton.length; i++) {
shareButton[i].addEventListener("click", function(e) {
e.preventDefault();
window.open(this.href, "SNS_window", "width=600, height=500, menubar=no, toolbar=no, scrollbars=yes");
}, false);
}
})()
</script>class 名は「.share」という CSS のセレクタの形ではなく「share」と「.」がない形です。注意してください。
getElementsByClassName で取得して回していきます。width 値、height 値はそれぞれ小窓の幅と高さを指定できます。各自ベストだと思われる大きさを指定してください。
シェアボタンに class 名がついていない場合
a タグに class 名がついていない場合は、querySelectorAll でシェアボタンの要素を取得します。例えば、
<ul id="share-button">
<li><a target="_blank" href="・・">facebook</a></li>
<li><a target="_blank" href="・・">Twitter</a></li>
<li><a target="_blank" href="・・">G+</a></li>
<li><a target="_blank" href="・・">B!</a></li>
<li><a target="_blank" href="・・">pocket</a></li>
</ul>のような場合は、以下のようにします。
JavaScript
<script>
(function() {
var shareButton = document.querySelectorAll("#share-button a");
for (var i = 0; i < shareButton.length; i++) {
shareButton[i].addEventListener("click", function(e) {
e.preventDefault();
window.open(this.href, "SNS_window", "width=600, height=500, menubar=no, toolbar=no, scrollbars=yes");
}, false);
}
})()
</script>こちらの場合は CSS のセレクタを入れてあげれば OK です。シェアボタンだけを指すようにセレクタを指定してあげてください。
同様に width 値、height 値を変更できます。
注意事項
この方法だとシェアボタン全てが小窓で開くようになってしまいます。いろいろ調査したところ、共有リンクの形式によってはハテブは小窓で開かない方が良いということがわかりました。もし、ハテブなど小窓で開きたくない SNS がある場合は querySelectorAll の方で :not() など除外セレクタを使ってハテブのみ抜くか、小窓で開きたい SNS のみに専用の class 名を付けて対応してください。
スクリプトコードを貼る場所はどちらの場合も、WordPress であれば single.php などシェアボタンが存在する PHP ファイルの body の一番下です。head に貼った状態では動きません。WordPress 以外でも body 下に追加できれば実装可能です。
モバイル環境では小窓で開くという動作はないので、通常通り別タブで開きます。
プラグインによっては上手く動きません。特に iframe 形式でシェアボタンを追加するタイプはこの方法では小窓表示に変更はできません。
まとめ
インラインで onclick からの実装も可能ですが、最近はインラインで JS を起動させるのは余りよろしくないことになっています。ですので、この形がベストだと思われます。インラインで実装する方法が何故か多いようですが、こちらのほうが良いと思います。
head に貼るのではなく body 下に貼ることで読み込み遅延もありません。小窓で開くことはシェアボタン以外にも、もしかしたら利用価値があるかもしれません。
当ブログも、同じ方法で小窓で開くようにしています。ハテブと feedly は除外して別タブで開くようになってますので、もしよければ押してあげてください↓↓