こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ブログやLP、キャンペーンページなどでよく見かける「このページをシェアしよう」ボタン。
Twitter（X）やFacebook、LINEなど、SNSごとにURLを用意してリンクを貼る…それももちろんOKですが、
- 「ページ数が増えると、毎回URLを直書きするのが大変」
- 「記事テンプレートでURLを自動で反映させたい」
そんなときに便利なのが、JavaScriptで現在のページURLを取得して、SNSシェアボタンを動的に生成する方法です！
今回はそのやり方を、コピペで使える形でわかりやすくご紹介します！
SNSシェアリンクの基本構造を知ろう
SNSにシェアする際は、それぞれのSNSの「シェアURL」にパラメータを付与してリンク化するのが基本です。
- Twitter（X）：https://twitter.com/intent/tweet?url=〇〇&text=△△
- Facebook：https://www.facebook.com/sharer/sharer.php?u=〇〇
- LINE：https://social-plugins.line.me/lineit/share?url=〇〇
この 〇〇 の部分に、JavaScriptで現在のURLを取得して埋め込むというわけですね。
実際のコード
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
HTML：シェアボタンの配置
あらかじめ、ボタンを置くための要素だけ用意しておきます。
<div id="snsShare" class="sns-share"></div>ここにJavaScriptで各SNSのシェアリンクを動的に追加していきます。
CSS：ボタンの見た目（例）
.sns-share a {
display: inline-block;
margin: 0.5em;
padding: 0.5em 1em;
border-radius: 5px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
.sns-share .twitter { background: #1da1f2; }
.sns-share .facebook { background: #3b5998; }
.sns-share .line { background: #00c300; }
もちろんアイコンフォントやSVGと組み合わせてデザインを強化することも可能です！
JavaScript：現在のURLを使ってリンクを生成
const pageUrl = encodeURIComponent(window.location.href);
const pageTitle = encodeURIComponent(document.title);
const snsLinks = `
<a href="https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}" class="twitter" target="_blank" rel="noopener">Twitterでシェア</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=${pageUrl}" class="facebook" target="_blank" rel="noopener">Facebookでシェア</a>
<a href="https://social-plugins.line.me/lineit/share?url=${pageUrl}" class="line" target="_blank" rel="noopener">LINEでシェア</a>
`;
document.getElementById('snsShare').innerHTML = snsLinks;
応用：特定のURLやカスタムテキストを使いたい場合
「必ず特定のURLをシェアさせたい」
「タイトルは別に指定したい」
そんなときは、直接文字列を指定するだけでOKです。
const pageUrl = encodeURIComponent("https://example.com/special-campaign");
const pageTitle = encodeURIComponent("限定キャンペーン開催中！");テンプレートの中で「今だけこのURLを拡散したい！」というケースにも柔軟に対応できます。
まとめ：動的生成で効率＆柔軟なシェア対応を
SNSシェアボタンは、サイトの拡散力を高めるための重要な導線です。
でも毎回URLやタイトルを手入力していては、管理が大変…。
だからこそ、JavaScriptで動的に「今のページの情報」を読み取り、自動でリンクを作るという方法はとても便利。
テンプレート化にも向いているので、CMSや静的サイトでも簡単に導入できます。
ぜひあなたのWebサイトにも、シンプルで柔軟なSNSシェアボタンを導入してみてください！
satokotadesignキャンペーン実施中！
