SNSのシェアボタンをJavaScriptで実装する方法と応用テクニック

近年、多くのウェブサイトでSNSシェアボタンが導入され、コンテンツの拡散に貢献しています。この記事では、JavaScriptでSNSのシェアボタンを実装する基本方法から、応用テクニックやUX向上の工夫までを解説します。

1. SNSシェアボタンの仕組みとは？

SNSシェアボタンは、ユーザーが閲覧しているページをSNSに投稿・共有できる仕組みです。主に以下のSNSで利用されます。

  • X（旧Twitter）
  • Facebook
  • LINE
  • LinkedIn
  • はてなブックマーク

多くの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>
JavaScript

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');}
JavaScript

3. 応用テクニック

3-1. 各SNS用にカスタムメッセージを追加する

const xText = encodeURIComponent("この記事おすすめ！");const xUrl = `https://twitter.com/intent/tweet?url=${getShareUrl()}&text=${xText}`;
JavaScript

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>
HTML

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);}
JavaScript
  • ホバー時にツールチップ表示
  • 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');}
JavaScript

read next