SNSシェアーボタンaタグ用 別ウィンドウでいい感じのサイズで表示する

aタグで自作のシェアーリンクを作るとき、外部リンクで設定すると思います。
それを、シェアーするにはちょうどいいサイズの別ウィンドウにする方法を紹介します。

普段私はBabelを通してjsを書いてるので、そのソースコードでの説明になります。

リンクを別ウィンドウで表示する方法

JavaScriptクラスファイルの作成

/js/modules/OpenSns.js

/**
 * OpenSns
 *
 * .js-open-sns を付与したリンクを
 * 別ウィンドウでSNSシェアーでちょうどいいサイズの
 * ウィンドウで開く
 */
export default class OpenSns {
	constructor() {
		this.setEvent();
	}

	setEvent() {
		this.shareButton = document.querySelectorAll('.js-open-sns');
		for (let num = 0; num < this.shareButton.length; num++) {
			this.shareButton[num].addEventListener('click', (event) => {
				event.preventDefault();
				let fbWindow = window.open('', 'sns', 'width=600, height=450, menubar=no, toolbar=no, scrollbars=no');

				// noopener効果
				fbWindow.opener = null;
				fbWindow.location = this.shareButton[num].href;
			}, false);
		}
	}
}

ソースコードの詳細説明

『window.open()』の『width』『height』設定することで別ウィンドウのサイズを指定していい感じのシェアーウィンドウ表示にしています。

ただし、注意が必要で
『window.open(‘https://hoge.fuga’, ‘sns’, ‘noopener’)』とすると、
問題なく ‘noopener’設定になりますが、
『window.open()』のオプションで、『width』『 height』 設定と、
『noopener』 を組み合わせると、 サイズ指定が効かないので、
今回の紹介したような記述方法になります。
コメントアウトで、『// noopener効果』とした部分です。

これで、遷移先からのwindow.opener()からの操作を阻止することができます。

JavaScript実行するファイル

/js/app.js

import OpenSns from './modules/OpenSns';
new OpenSns();

HTMLファイル

index.html

<a class="js-open-sns" href="http://twitter.com/share">ツイート</a>

モバイル環境では？

この別ウィンドウの方法は、
スマホでは特に変わらず別タブで開かれる動きになります。

よって、この方法はPC向けということになります。

まとめ

今回、別ウィンドウでそのウィンドウサイズを変更する方法を紹介しました。

疑似的に、noopenerの効果をする対策で紹介しましたが、
セキュリティー的に若干不安なので、有名SNSへのシェアーリンクで使う分にはいいのかなと思っています。

使いどころを見極めて、使ってみてください。