開いている記事のタイトルと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に応じたクラスを設定する。
SNS class X(旧Twitter) nnb-x-sbtn facebook nnb-fb-sbtn はてなブックマーク nnb-hb-sbtn LINE nnb-line-sbtn Threads nnb-th-sbtn Bluesky nnb-bs-sbtn pocket nnb-gp-sbtn Pinterest nnb-pr-sbtn
実際に作成したボタンが以下になります。
方法2:画像を使用する

- 適当なURLを設定する
※JavaScriptで置き換えるので何でもよいです。値が設定されていることが重要。 - シェアしたいSNSに応じたクラスを設定する。
※クラス一覧はこちら。
実際に作成したボタンが以下になります。
URLコピーボタンを作成する

クラスを「nnb-cp-sbtn」に設定します。
※URLの設定は不要です。
nnb-cp-sbtn
実際に作成したボタンが以下になります。


