【WordPress】SNSシェアボタンとURLコピーボタンを作成する

開いている記事のタイトルとURLをさまざまなSNSでシェアするためのボタンを作成します。

やりかた

リンクの<a>タグにSNSごとのクラスを設定し、リンクURLをJavaScriptで置き換える形で実装します。

ボタン、画像の2つの実装方法をご紹介しますが、他の要素でも実装することが可能です。

準備:javascript.jsにコードを追記する

WordPressの管理画面から「外観 > テーマファイルエディター > javascript.js」を選択し、以下のコードを追記してください。

const target = location.href;
const title = document.title;
const encoded = encodeURI(title);
const ogImageMeta = document.querySelector('meta[property="og:image"]');
const imageUrl = ogImageMeta ? ogImageMeta.content : '';
const snsButtons = [
    { selector: '.nnb-x-sbtn', url: `https://twitter.com/intent/tweet?url=${target}&text=${encoded}` },
    { selector: '.nnb-fb-sbtn', url: `https://www.facebook.com/share.php?u=${target}&t=${encoded}` },
    { selector: '.nnb-hb-sbtn', url: `https://b.hatena.ne.jp/add?mode=confirm&url=${target}&title=${encoded}` },
    { selector: '.nnb-line-sbtn', url: `https://line.me/R/msg/text/?${encoded}%0a${target}` },
    { selector: '.nnb-th-sbtn', url: `https://www.threads.net/intent/post?text=${encoded}%20${target}` },
    { selector: '.nnb-bs-sbtn', url: `https://bsky.app/intent/compose?text=${encoded}%20${target}` },
    { selector: '.nnb-gp-sbtn', url: `https://getpocket.com/edit?url=${target}&title=${encoded}` },
    { selector: '.nnb-pr-sbtn', url: `https://pinterest.com/pin/create/button/?url=${target}&media=${imageUrl}&description=${encoded}` }
];
snsButtons.forEach(btn => {
    const elements = document.querySelectorAll(btn.selector);
    elements.forEach(element => {
        if (element.tagName === 'A') {
            element.href = btn.url;
        } else {
            const linkElement = element.querySelector('a');
            if (linkElement) {
                linkElement.href = btn.url;
            }
        }
    });
});
document.addEventListener('click', (event) => {
    const copyElement = event.target.closest('.nnb-cp-sbtn');
    if (copyElement) {
        event.preventDefault();
        
        navigator.clipboard.writeText(target)
            .then(() => {
                showToast('URLをコピーしました');
            })
            .catch(err => {
                console.error('コピーに失敗しました: ', err);
                showToast('コピーに失敗しました', 'error');
            });
    }
});
function showToast(message, type = 'success') {
    const existingToast = document.querySelector('.copy-toast');
    if (existingToast) {
        existingToast.remove();
    }
    const toast = document.createElement('div');
    toast.className = `copy-toast ${type}`;
    toast.textContent = message;
    toast.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #808080;
        background: #808080;
        color: white;
        padding: 16px 32px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 9999;
        font-size: 16px;
        font-weight: 900;
        opacity: 0;
        transition: opacity 0.3s ease;
    `;
    if (!document.querySelector('#toast-animation')) {
        const style = document.createElement('style');
        style.id = 'toast-animation';
        style.textContent = `
            .copy-toast.show {
                opacity: 1 !important;
            }
        `;
        document.head.appendChild(style);
    }
    
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.classList.add('show');
    }, 10);
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
    }, 2000);
}
Code language: JavaScript (javascript)

SNSシェアボタンを作成する

方法1:ボタンブロックを使用する

ここではテーマ「Cocoon」のボタンブロックを使用します。
他のテーマのボタンブロックでもリンクURLとCSSクラスを設定することが出来れば実装できます。

  • STEP1

    適当なURLを設定する
    ※JavaScriptで置き換えるので何でもよいです。値が設定されていることが重要。

  • STEP2

    シェアしたいSNSに応じたクラスを設定する。

    SNSclass
    X(旧Twitter)nnb-x-sbtn
    facebooknnb-fb-sbtn
    はてなブックマークnnb-hb-sbtn
    LINEnnb-line-sbtn
    Threadsnnb-th-sbtn
    Blueskynnb-bs-sbtn
    pocketnnb-gp-sbtn
    Pinterestnnb-pr-sbtn

実際に作成したボタンが以下になります。

方法2:画像を使用する

  1. 適当なURLを設定する
    ※JavaScriptで置き換えるので何でもよいです。値が設定されていることが重要。
  2. シェアしたいSNSに応じたクラスを設定する。
    ※クラス一覧はこちら

実際に作成したボタンが以下になります。

URLコピーボタンを作成する

クラスを「nnb-cp-sbtn」に設定します。
※URLの設定は不要です。

nnb-cp-sbtn

実際に作成したボタンが以下になります。

結果

関連記事