WordPress | SNSシェアボタンとURLコピー機能を導入する方法

WordPressで記事ページにSNSのシェアボタンを追加したいと考えたことはありませんか？
今回は、X（旧Twitter）・Facebook へのシェアに加えて、URLコピー機能（トースト通知付き） を実装する方法をご紹介します。

また、記事タイトルに <br> や   などのHTMLタグやエンティティが含まれていても正しく処理できるよう、整形方法もあわせて解説します。

1. シェアボタンのHTMLを設置

まず、シェアボタンのHTML（PHPを含む）を以下のように記述します。

<?php
  $url = urlencode(get_permalink());

  // タイトルからHTMLタグ・エンティティを除去
  $raw_title = strip_tags(get_the_title());
  $clean_title = html_entity_decode($raw_title, ENT_QUOTES, 'UTF-8');

  $title = urlencode($clean_title);
?>
<ul class="share-buttons">
  <li><a href="https://twitter.com/intent/tweet?url=<?php echo $url; ?>&text=<?php echo $title; ?>" target="_blank" rel="noopener noreferrer">Xでシェア</a></li>
  <li><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $url; ?>" target="_blank" rel="noopener noreferrer">Facebookでシェア</a></li>
  <li><a href="#" class="js-copy-url">URLをコピー</a></li>
</ul>

2. URLコピー用JavaScript（トースト通知あり）

続いて、URLコピーを行うJavaScriptとトースト通知の処理を追加します。

<script>
document.addEventListener('DOMContentLoaded', function () {
  const copyBtn = document.querySelector('.js-copy-url');

  function showToast(message) {
    const toast = document.createElement('div');
    toast.textContent = message;
    toast.style.position = 'fixed';
    toast.style.bottom = '20px';
    toast.style.left = '50%';
    toast.style.transform = 'translateX(-50%)';
    toast.style.background = 'rgba(0, 0, 0, 0.8)';
    toast.style.color = '#fff';
    toast.style.padding = '10px 20px';
    toast.style.borderRadius = '6px';
    toast.style.zIndex = 9999;
    toast.style.fontSize = '14px';
    toast.style.opacity = '0';
    toast.style.transition = 'opacity 0.4s';

    document.body.appendChild(toast);
    setTimeout(() => toast.style.opacity = '1', 10);
    setTimeout(() => {
      toast.style.opacity = '0';
      setTimeout(() => toast.remove(), 400);
    }, 2000);
  }

  if (copyBtn) {
    copyBtn.addEventListener('click', function (e) {
      e.preventDefault();
      const url = window.location.href;

      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(() => {
          showToast('URLをコピーしました');
        }).catch(() => {
          fallbackCopy(url);
        });
      } else {
        fallbackCopy(url);
      }
    });
  }

  function fallbackCopy(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();
    try {
      document.execCommand('copy');
      showToast('URLをコピーしました（互換モード）');
    } catch (err) {
      showToast('コピーに失敗しました');
      console.error(err);
    }
    document.body.removeChild(textarea);
  }
});
</script>

3. タイトルにHTMLが含まれている場合の対処

記事タイトルに <br> や   などのHTML要素や文字実体参照が含まれる場合は、get_the_title() の結果を加工する必要があります。

以下のように処理することで、SNS投稿時にも正しく表示されます。

$raw_title = strip_tags(get_the_title());
$clean_title = html_entity_decode($raw_title, ENT_QUOTES, 'UTF-8');
$title = urlencode($clean_title);

まとめ

シンプルかつ拡張性のある構成なので、他のSNSやボタンデザインにも応用が可能です。