(Sample)
新人エンジニア向けHTML+JavaScriptの実用解説
新人エンジニアの方向けに「Webサイト上のコンテンツをX(旧Twitter)、Facebook、LINEなどのSNSに共有する機能の作り方」を解説します。
HTMLとJavaScriptを中心にした実装ですので、基礎知識があればすぐに応用できますよ!
h2. このコードでできること
あなたがWeb記事や商品ページを作ったとします。そのページの内容をSNSで拡散してもらうには「共有ボタン」が必要です。このサンプルでは以下のようなことが実現できます。
- X(旧Twitter)でモーダルウィンドウを使って投稿確認
- Facebookで共有ウィンドウを開く
- LINEで共有リンクを送る
- クリップボードにタイトル+URLをコピー
つまり、「今見てるこのページ、SNSでみんなにシェアしたい!」という動きをサポートする機能です。
h2. HTMLの基本構造
h3. <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が記事を紹介するときの「名刺」のようなものです。
h2. 見た目を整える: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; }
これで見た目もバッチリ整います。
h2. JavaScriptによる共有の仕組み
h3. 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」にセットしています。
h3. Facebookで共有
const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}"e=${encodeURIComponent(title)}`;
quote
パラメータでタイトルなどを事前入力可能。
h3. LINEで共有
const lineUrl = `https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`;
LINEはtextとurlを一緒に送信する形です。
h2. クリップボードにコピー
「共有まではしないけど、URLを誰かに送るときにコピーしたい」そんなときのために、JavaScriptの navigator.clipboard.writeText()
を使ってコピー機能をつけています。
navigator.clipboard.writeText(`${title}\n\n${url}`).then(
() => alert("クリップボードにコピーしました。"),
() => alert("コピーに失敗しました。")
);
これは非同期処理(=終わるまでに時間がかかる処理)なので、.then()
で成功/失敗を分岐させています。
h2. モーダルって何?
モーダルとは、ページ上にポップアップのように出る小さなウィンドウのことです。
Twitter用に使っているこの部分がそれです:
<div class="modal fade" id="twitterModal">
これはBootstrapの機能で、ユーザーの注意を引いて確実に共有内容を確認させるときに便利です。
h2. SNS共有に必要な最低限の知識まとめ
SNS名 | 共有URL | カスタマイズ可能パラメータ |
---|---|---|
X(旧Twitter) | https://twitter.com/intent/tweet | text |
https://www.facebook.com/sharer/sharer.php | u , quote | |
LINE | https://social-plugins.line.me/lineit/share | url , text |
このように、各サービスが提供する共有リンクを組み立てるだけで、SNS投稿機能が実現できます