【ChatGPTで0からホームページ作成】記事にシェアボタンを追加する（FontAwesomeでかっこよく！）

ホームページの記事ページに、SNSでシェアできるボタンを設置してみました！
今回は、Twitter（X）、Facebook、LINE、はてなブックマーク、Pinterest に加えて、「リンクをコピー」機能まで搭載しています。

✅ どうやって実装したか？

記事ページ（index.php）には、以下のように情報が自動取得される仕組みにしています。

主カテゴリ名、サブカテゴリ名、記事フォルダ名 → パスから取得
記事タイトル → フォルダ名を変換して自動生成
URL → 構成を組み立てて生成

この情報をもとに、SNSシェア用のURLをPHPで生成し、FontAwesomeアイコン付きでボタン表示させます。

✅ 表示されるボタン（アイコン）

SNS・機能	説明
🐦 Twitter (X)	記事タイトル＋URLを投稿画面に展開
📘 Facebook	Facebookでリンクをシェア
💬 LINE	LINEで友達にURLを送る（スマホ向け）
🔖 はてブ	はてなブックマークに追加（ブロガー向け）
📌 Pinterest	画像と一緒にシェア（海外勢向け）
🔗 リンクコピー	ワンクリックで記事URLをクリップボードに

✅ 使用した技術

PHP：記事情報の取得＆シェアURL生成
FontAwesome：SNSアイコンを表示（CDN使用）
JavaScript（Clipboard API）：リンクコピー機能の実装

✅ 実装コード例（抜粋）

<a href="https://twitter.com/intent/tweet?url=<?= $encoded_url ?>&text=<?= $encoded_title ?>" target="_blank">
  <i class="fab fa-x-twitter"></i>
</a>

<a href="#" onclick="copyToClipboard('<?= $share_url ?>'); return false;">
  <i class="fas fa-link"></i>
</a>

function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(function () {
    alert("リンクをコピーしました！");
  });
}

✅ 実装後の感想

シェアボタンを付けただけで、見た目が一気に「ちゃんとしたサイト」感！
FontAwesomeで表示するだけでもかっこいいし、コピー機能も簡単で便利。
「この記事よかったらシェアしてね」の気持ちも伝えられます。

✅ キーワード

シェアボタン、PHP、FontAwesome、Twitter、Facebook、LINE、リンクコピー、SNSシェア、シェア機能、ホームページに追加、初心者でもできる、記事に共有ボタン、簡単設置、コード付き解説、シンプルなSNS連携