(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/tweettext
Facebookhttps://www.facebook.com/sharer/sharer.phpu, quote
LINEhttps://social-plugins.line.me/lineit/shareurl, text

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