(Sample)

新人エンジニア向けHTML＋JavaScriptの実用解説

新人エンジニアの方向けに「Webサイト上のコンテンツをX（旧Twitter）、Facebook、LINEなどのSNSに共有する機能の作り方」を解説します。

HTMLとJavaScriptを中心にした実装ですので、基礎知識があればすぐに応用できますよ！

このコードでできること

あなたがWeb記事や商品ページを作ったとします。そのページの内容をSNSで拡散してもらうには「共有ボタン」が必要です。このサンプルでは以下のようなことが実現できます。

X（旧Twitter）でモーダルウィンドウを使って投稿確認
Facebookで共有ウィンドウを開く
LINEで共有リンクを送る
クリップボードにタイトル＋URLをコピー

つまり、「今見てるこのページ、SNSでみんなにシェアしたい！」という動きをサポートする機能です。

HTMLの基本構造

`<head>` 内の設定：SNS共有に必要なOGPタグ

OGP（Open Graph Protocol）はSNSに正しく情報を渡すためのタグ群です。FacebookやXがページを「どんな内容か」理解できるようにします。

<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の説明" />
<meta property="og:type" content="article" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像URL" />

例えるなら：これはSNSが記事を紹介するときの「名刺」のようなものです。

見た目を整える：CSSとBootstrap

このコードではCSSフレームワークの「Bootstrap」を使っています。ボタンの色やサイズを簡単にカスタマイズできる便利なツールです。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

さらに、色別のカスタムボタンをCSSで設定：

.btn-twitter { background-color: #1da1f2; color: white; }
.btn-facebook { background-color: #1877f2; color: white; }
.btn-line { background-color: #00b900; color: white; }

これで見た目もバッチリ整います。

JavaScriptによる共有の仕組み

Twitterで共有（モーダル付き）

const title = document.getElementById("article-title").textContent;
const content = document.getElementById("article-content").textContent;
const tweetText = encodeURIComponent(`${title}\n\n${content}\n\n${url}`);
const twitterUrl = `https://twitter.com/intent/tweet?text=${tweetText}`;

これは、文字列をURLに埋め込める形に変換（＝エンコード）して、Twitterの「intent URL」にセットしています。

Facebookで共有

const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}"e=${encodeURIComponent(title)}`;

quote パラメータでタイトルなどを事前入力可能。

LINEで共有

const lineUrl = `https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`;

LINEはtextとurlを一緒に送信する形です。

クリップボードにコピー

「共有まではしないけど、URLを誰かに送るときにコピーしたい」そんなときのために、JavaScriptの navigator.clipboard.writeText() を使ってコピー機能をつけています。

navigator.clipboard.writeText(`${title}\n\n${url}`).then(
  () => alert("クリップボードにコピーしました。"),
  () => alert("コピーに失敗しました。")
);

これは非同期処理（＝終わるまでに時間がかかる処理）なので、.then() で成功／失敗を分岐させています。

モーダルって何？

モーダルとは、ページ上にポップアップのように出る小さなウィンドウのことです。

Twitter用に使っているこの部分がそれです：

<div class="modal fade" id="twitterModal">

これはBootstrapの機能で、ユーザーの注意を引いて確実に共有内容を確認させるときに便利です。

SNS共有に必要な最低限の知識まとめ

SNS名	共有URL	カスタマイズ可能パラメータ
X（旧Twitter）	`https://twitter.com/intent/tweet`	`text`
Facebook	`https://www.facebook.com/sharer/sharer.php`	`u`, `quote`
LINE	`https://social-plugins.line.me/lineit/share`	`url`, `text`

このように、各サービスが提供する共有リンクを組み立てるだけで、SNS投稿機能が実現できます

SNS共有機能を実装しよう！