[jQuery]SNSシェアボタンの自作について

Reading Time: < 1 minute

アドオン使えないとか、各サービスのを使うとサイズが統一できないから自分でやりたいとか、そういうときの。

Contents

1 前提
2 中身
3 解説
4 まとめ

前提

とりあえずTwitter、Facebook、Line、はてな、Pocketでやる。
開いてるページのURL、ページタイトルを投稿する。

中身

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
</head>
<body>
<script>
$(function(){
		var pageUrl = $(location).attr('href');
		var pageTtl = $('title').html();
		var hrefTwitter = 'https://twitter.com/intent/tweet?url='+pageUrl+'&text='+pageTtl;
		var hrefFacebook = 'https://www.facebook.com/sharer.php?src=bm&u='+pageUrl+'&t='+pageTtl;
		var hrefLine = 'https://line.me/R/msg/text/?'+pageTtl+'%0A'+pageUrl;
		var hrefHatena = 'https://b.hatena.ne.jp/add?mode=confirm&url='+pageUrl;
		var hrefPocket = 'https://getpocket.com/edit?url='+pageUrl+'&title='+pageTtl;
		$('ul li.twitter a').attr('href',hrefTwitter);
		$('ul li.facebook a').attr('href',hrefFacebook);
		$('ul li.line a').attr('href',hrefLine);
		$('ul li.hatena a').attr('href',hrefHatena);
		$('ul li.pocket a').attr('href',hrefPocket);

});
</script>
<ul>
	<li class="twitter"><a href="https://twitter.com/intent/tweet?url=https://www.google.com/&text=Google" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">twitter</a></li>
	<li class="facebook"><a href="https://www.facebook.com/sharer.php?src=bm&u=https://www.google.com/&t=Google" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">facebook</a></li>
	<li class="line"><a href="https://line.me/R/msg/text/?Google%0Ahttps://www.google.com/" target="_blank" rel="noopener noreferrer">LINE</a></li>
	<li class="hatena"><a href="https://b.hatena.ne.jp/add?mode=confirm&url=https://www.google.com/" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;" title="はてなブックマークに登録">はてな</a></li>
	<li class="pocket"><a href="https://getpocket.com/edit?url=https://www.google.com/&title=Google" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">Pocket</a></li>
</ul>

</body>
</html>

<!doctype html>

<html>

<head>

<title>無題ドキュメント</title>

</head>

<body>

$(function(){

var pageUrl = $(location).attr('href');

var pageTtl = $('title').html();

var hrefTwitter = 'https://twitter.com/intent/tweet?url='+pageUrl+'&text='+pageTtl;

var hrefFacebook = 'https://www.facebook.com/sharer.php?src=bm&u='+pageUrl+'&t='+pageTtl;

var hrefLine = 'https://line.me/R/msg/text/?'+pageTtl+'%0A'+pageUrl;

var hrefHatena = 'https://b.hatena.ne.jp/add?mode=confirm&url='+pageUrl;

var hrefPocket = 'https://getpocket.com/edit?url='+pageUrl+'&title='+pageTtl;

$('ul li.twitter a').attr('href',hrefTwitter);

$('ul li.facebook a').attr('href',hrefFacebook);

$('ul li.line a').attr('href',hrefLine);

$('ul li.hatena a').attr('href',hrefHatena);

$('ul li.pocket a').attr('href',hrefPocket);

});

</script>

<ul>

<li class="twitter"><a href="https://twitter.com/intent/tweet?url=https://www.google.com/&text=Google" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">twitter</a></li>

<li class="facebook"><a href="https://www.facebook.com/sharer.php?src=bm&u=https://www.google.com/&t=Google" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">facebook</a></li>

<li class="pocket"><a href="https://getpocket.com/edit?url=https://www.google.com/&title=Google" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">Pocket</a></li>

</ul>

</body>

</html>

解説

要はaタグでシェアできるんで、各サービスに合ったパラメータをjQuery上で生成して上書きしてる。
jsが死んでる場合に対応するためにhtml上でもトップページ情報くらいは打っとけばまあいいのかなみたいな（サンプルではGoogleに飛ぶようにしてる）。
jsじゃなくても例えばphpとか、要素を引っ張ってこれる言語が使えるならそれで作れる。

まとめ

WPならアドオンでいいんだけどさ。
そればっかりの案件じゃないので考えとかんとね。

あとまあこれに限ってはjsで制御してるんで、Adblockとかに引っかかる可能性もあるっちゃある。
あんまり安心できないな