近年、多くのウェブサイトでSNSシェアボタンが導入され、コンテンツの拡散に貢献しています。この記事では、JavaScriptでSNSのシェアボタンを実装する基本方法から、応用テクニックやUX向上の工夫までを解説します。
1. SNSシェアボタンの仕組みとは？
SNSシェアボタンは、ユーザーが閲覧しているページをSNSに投稿・共有できる仕組みです。主に以下のSNSで利用されます。
- X（旧Twitter）
- LINE
- はてなブックマーク
多くのSNSはURLにクエリパラメータを渡すことでシェア投稿を行うため、JavaScriptで簡単に実装可能です。
2. JavaScriptでSNSシェアボタンを実装する方法
2-1. HTML構造
<div class="sns-share">
<button onclick="shareToX()">Xでシェア</button>
<button onclick="shareToFacebook()">Facebookでシェア</button>
<button onclick="shareToLine()">LINEで送る</button>
</div>2-2. JavaScript関数
function getShareUrl() {
return encodeURIComponent(window.location.href);
}
function getPageTitle() {
return encodeURIComponent(document.title);
}
function shareToX() {
const url = `https://twitter.com/intent/tweet?url=${getShareUrl()}&text=${getPageTitle()}`;
window.open(url, '_blank', 'width=600,height=400');
}
function shareToFacebook() {
const url = `https://www.facebook.com/sharer/sharer.php?u=${getShareUrl()}`;
window.open(url, '_blank', 'width=600,height=400');
}
function shareToLine() {
const url = `https://social-plugins.line.me/lineit/share?url=${getShareUrl()}`;
window.open(url, '_blank', 'width=600,height=400');
}3. 応用テクニック
3-1. 各SNS用にカスタムメッセージを追加する
const xText = encodeURIComponent("この記事おすすめ！");
const xUrl = `https://twitter.com/intent/tweet?url=${getShareUrl()}&text=${xText}`;3-2. アイコン付きシェアボタンのデザイン（Font Awesome利用）
<!-- CDNをheadに追加 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<button onclick="shareToX()">
<i class="fab fa-x-twitter"></i> シェア
</button>3-3. シェア数の表示（外部APIを使用）
Facebookやはてなブックマークでは、API経由でシェア数を取得できます（※現在は制限が多く、使用には注意が必要です）。
4. モバイル対応とUX向上の工夫
- モバイルでは
navigator.share()（Web Share API）を使えばネイティブ共有も可能です。
if (navigator.share) {
navigator.share({
title: document.title,
url: window.location.href
}).then(() => {
console.log('共有されました');
}).catch(console.error);
}- ホバー時にツールチップ表示
- SNSアイコンを色別で統一感を出す
- シェア完了後にメッセージ表示
5. まとめ
SNSシェアボタンは、JavaScriptを使えば自前で軽量に実装できます。基本的なURLの組み立てに加え、UX向上やデザインの工夫を取り入れることで、より多くのユーザーに拡散してもらえる導線を作れます。
チェックリスト
- SNSごとのURL構造を理解する
- JavaScriptで現在のページURLやタイトルを取得する
- Web Share APIやデザイン調整も検討する
おまけ：簡単に使える共通関数（再利用向け）
function openShareWindow(baseUrl, params) {
const query = new URLSearchParams(params).toString();
const url = `${baseUrl}?${query}`;
window.open(url, '_blank', 'width=600,height=400');
}
