ブログ記事の下に置いているシェアボタン、何年も前に設置したままになっていませんか。 Cruwの自社ブログも、以前に作った「Facebook・Twitter・Google+・はてブ・Pocket」の5つのボタンが、そのまま残っていました。Google+ も Pocket も、今はもうサービスがありません。 2026年11月にボタンを作り直したので、今どのボタンを置けばよいかの考え方と、WordPressでプラグインを使わずに設置する方法を、実際のコードとつまずいた点も含めて紹介します。
- 今置くボタンの選び方（Cruwが残したもの・外したもの・足したもの）
- X・Facebook・はてブ・URLコピーを、プラグインなしで設置するコード
- 作り直しで気をつけたこと（アイコンの重さ、ページ移動の処理とのぶつかり）
※2018年に公開した「LINE・Facebook・Twitter・Google+の各シェアボタン、現在のURL(&タイトル)の自動取得リンク設置方法」を、今のサービスにあわせて作り直した記事です。
結論：読者が使うSNSに絞り、URLコピーを足す
Cruwが作り直したあとのシェアボタンは、X・Facebook・はてなブックマーク・URLコピーの4つです。
選ぶときの考え方は、次の3つです。
- 終わったサービスのボタンは消す：押しても共有できないボタンは、サイトが手入れされていない印象を与えます
- 自分のブログの読者が使っているSNSだけを置く：ボタンは多いほど迷わせます。4〜5個までが目安です
- URLコピーを置く：Slack・Chatwork・メールなど、ボタンにない送り先はすべてこれで受け持てます
設置はプラグインを使わず、各SNSの共有用のURLへの、ふつうのリンクにしました。各SNSのスクリプトを読み込まないので、表示が速くなります。また、ボタンが押されるまでは、シェアボタンから各SNSに通信が発生しません。
古いシェアボタンで起きていたこと
作り直す前のボタンには、次の問題がありました。古いまま置いているサイトでは、同じことが起きているかもしれません。
| 問題 | 内容 |
|---|---|
| 終わったサービスのボタン | Google+ は2019年4月、Pocket は2025年7月にサービスが終了。押しても共有できない |
| 古い名前とアイコン | Twitter は X に名前が変わり、アイコンも変わった。アイコンの表示に使っていた Font Awesome（アイコンのフォント）の古い版には、X のアイコンがない |
| 共有数が出ない | プラグインで共有数を表示していたが、どのボタンも数が出ていなかった。X（旧Twitter）は2015年に共有数の提供をやめている |
| リンクが壊れていた | Twitter のリンクの中に related="Cruw_inc" と " が入っていて、そこで属性が閉じ、URLが途中で切れていた |
共有数の表示は、数が少ないと「読まれていない記事」に見えてしまい、かえって逆効果です。今回の作り直しで、表示ごとやめました。
今置くシェアボタンの選び方
Cruwが残したボタン・外したボタン
Cruwのブログを読んでいるのは、長野県・上田市周辺の会社の経営者や Web 担当者と、CSS・WordPress の記事を探しているWeb制作者・エンジニアです。この2つの読者を考えて、次のように決めました。
| ボタン | 判断 | 理由 |
|---|---|---|
| X | 残す | Web制作・マーケティング・AIの記事は、X で広まりやすい |
| 残す | 地域の会社の経営者や担当者にも、使っている人がいる | |
| はてなブックマーク | 残す | CSS・WordPress などの技術記事は、はてブから読まれることがある |
| URLコピー | 足す | Slack・Chatwork・メールなど、ほかの送り先はすべてこれで送れる |
| LINE | 置かない | 下で説明 |
| Google+・Pocket | 消す | サービス終了 |
| Threads・Bluesky・LinkedIn | 置かない | 今の読者層では使う人が少ないと考えた。必要なら URLコピーやスマートフォンの共有から送れる |
LINEのボタンを置かなかった理由
日本では LINE で記事を送る人も多いので、最初は LINE のボタンを足す案もありました。それでも置かなかったのは、次の理由です。
- 会社の中で記事を回すときは、Slack・Chatwork・メールを使うことが多い（BtoB のブログの場合）
- 仕事中にパソコンで読む人は、LINE で共有することが少ない
- スマートフォンで読んでいる人は、URLコピーやブラウザの共有から LINE に送れる
お店や暮らしに関わる記事が多いブログなど、読者が個人中心なら、LINE は置く価値が高いボタンです。「どのSNSが正解か」ではなく、「自分のブログの読者は誰か」で決めるのがおすすめです。 迷うときは、GA4 の「集客」→「トラフィック獲得」で、SNS（t.co、facebook.com、b.hatena.ne.jp、line.me など）から来ている数を見ると、判断の材料になります。
プラグインなしでシェアボタンを設置する方法（WordPress）
ここからは、Cruwのサイトのコードを、説明しやすいように整理したものです。
1. 各SNSの共有用のURL
シェアボタンの中身は、各SNSが用意している「共有の画面を開くURL」へのリンクです。
| SNS | URL | 渡せるもの |
|---|---|---|
| X | https://x.com/intent/tweet?text=タイトル&url=URL | 文章・URL。via=アカウント名 で「@アカウント名」も入る |
https://www.facebook.com/sharer/sharer.php?u=URL | URLだけ。タイトルや画像は、ページの OGP から読み取られる | |
| はてなブックマーク | https://b.hatena.ne.jp/add?mode=confirm&url=URL | URL |
| LINE（置く場合） | https://social-plugins.line.me/lineit/share?url=URL | URL・文章 |
URL やタイトルは、rawurlencode() でエンコードしてから入れます。日本語のタイトルや、& を含むURLでも崩れなくなります。
2. 記事のテンプレートにボタンを書く
記事ページのテンプレート（多くのテーマでは single.php）の、ボタンを出したい場所に書きます。
<?php
$share_url = rawurlencode( get_permalink() );
$share_title = rawurlencode( get_the_title() );
$icon_dir = get_stylesheet_directory_uri() . '/images/share';
?>
<p class="share-title">この記事をシェアする</p>
<ul class="share-btn">
<li>
<a href="https://x.com/intent/tweet?text=<?php echo $share_title; ?>&url=<?php echo $share_url; ?>" target="_blank" rel="noopener" aria-label="Xでシェア">
<img src="<?php echo esc_url( $icon_dir ); ?>/x.svg" width="40" height="40" alt="" loading="lazy">
</a>
</li>
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $share_url; ?>" target="_blank" rel="noopener" aria-label="Facebookでシェア">
<img src="<?php echo esc_url( $icon_dir ); ?>/facebook.svg" width="40" height="40" alt="" loading="lazy">
</a>
</li>
<li>
<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $share_url; ?>" target="_blank" rel="noopener" aria-label="はてなブックマークに追加">
<img src="<?php echo esc_url( $icon_dir ); ?>/hatena-bookmark.svg" width="40" height="40" alt="" loading="lazy">
</a>
</li>
<li>
<button type="button" class="share-copy" data-url="<?php echo esc_url( get_permalink() ); ?>">
<img src="<?php echo esc_url( $icon_dir ); ?>/link.svg" width="28" height="28" alt="">
<span class="sr-only" aria-live="polite">URLをコピー</span>
</button>
</li>
</ul>ポイントは次のとおりです。
- アイコンだけのボタンには
aria-labelを付ける：画面の読み上げで「Xでシェア」と読まれるようにします。アイコンの画像は飾りなのでalt=""にします - HTML の中の
&は&と書く：書かなくても動きますが、HTML としてはこれが正しい書き方です target="_blank"にはrel="noopener"を付ける：開いた先のページから、元のページを操作されないようにします
Cruwのサイトでは、パソコンで押したときに小さな別ウィンドウで開くように、window.open() を使っています。スマートフォンではどちらもほぼ同じ動きになるので、新しいタブで開く上の書き方で十分です。
3. アイコンは各社の公式の素材を SVG で使う
アイコンは、各社のブランドの素材（ガイドライン）で配られているものを、形も色も変えずに使います。Cruwでは、デザイナーがガイドラインを確認して、次のようにしました。
- X：白い背景に黒のロゴ
- Facebook：Meta の公式の丸いロゴ（青
#0866FF） - はてなブックマーク：公式のシンボルマーク。最小の大きさとまわりの余白の決まりに合わせて、40pxで表示
最初は公式の PNG 画像をそのまま使っていましたが、40px で表示するのに、元の画像は Facebook が 2084×2084px（約54KB）、はてブが 1000×1000px（約16KB）ありました。SVG にしたところ、それぞれ約1.2KB・約1.1KB になりました。 記事の下のほうに出るボタンなので、表示の速さへの影響は小さいですが、アイコンは SVG にしておくのがおすすめです。
4. CSSで並べる
.share-btn {
display: flex;
justify-content: center;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.share-btn a,
.share-btn button {
display: flex;
align-items: center;
justify-content: center;
width: 64px; /* 指で押しやすい大きさ */
height: 64px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
transition: transform .3s;
}
.share-btn a:hover,
.share-btn button:hover {
transform: translateY(-3px);
}
.share-btn a:focus-visible,
.share-btn button:focus-visible {
outline: 2px solid #0866ff;
outline-offset: 2px;
}アイコンは 40px でも、押せる範囲は 64px にしています。スマートフォンで指で押すときに、となりのボタンを押し間違えにくくなります。 :focus-visible は、キーボードで操作したときに、どのボタンを選んでいるかを見えるようにする指定です。
5. URLコピーのボタンを動かす（JavaScript）
document.querySelectorAll('.share-copy').forEach(function (button) {
var label = button.querySelector('.sr-only');
button.addEventListener('click', function () {
navigator.clipboard.writeText(button.dataset.url).then(function () {
button.classList.add('is-copied');
label.textContent = 'コピーしました';
setTimeout(function () {
button.classList.remove('is-copied');
label.textContent = 'URLをコピー';
}, 3000);
}).catch(function () {
label.textContent = 'コピーできませんでした';
});
});
});navigator.clipboard.writeText()は、https のページ（と localhost）でしか使えません。http のテスト環境ではnavigator.clipboardそのものがなく、上のコードはエラーになるので注意してくださいsr-only（画面には見せず、読み上げだけに使う文字）は Bootstrap のクラスです。使っていないテーマでは、同じ働きの CSS を用意してください- コピーできたことが目でわかるように、Cruwのサイトでは、リンクのアイコンを3秒だけチェックマーク（緑）に切り替えています（
.is-copiedのクラスで切り替え） aria-live="polite"を付けた要素の文字を変えると、画面の読み上げでも「コピーしました」と伝わります
古いブラウザにも対応したい場合は、navigator.clipboard がないときに document.execCommand('copy') でコピーする処理を足します。Cruwのサイトでは、念のため入れています。
スマートフォンの共有画面を開くボタン（任意）
navigator.share() を使うと、OS の共有画面（LINE・メール・AirDrop などが並ぶ画面）を開けます。主にスマートフォンで使える機能です。ボタンを増やさずに、いろいろな送り先に対応できる方法です。
<button type="button" class="share-native" hidden>共有</button>var shareButton = document.querySelector('.share-native');
if (shareButton && navigator.share) {
shareButton.hidden = false; // 使える端末でだけボタンを表示する
shareButton.addEventListener('click', function () {
navigator.share({ title: document.title, url: location.href }).catch(function () {});
});
}Cruwのサイトでは今回は入れていませんが、スマートフォンからの共有が多いブログなら、LINE のボタンの代わりになります。
作り直しで気をつけたこと：サイト全体のJavaScriptとのぶつかり
作り直したボタンを確認していて、シェアボタンを押すと、別ウィンドウが開いたあとに、元の記事のページまで X などに移動してしまうことに気づきました。
原因は、Cruwのサイト全体に入れている、ページを移動するときのアニメーションの処理でした。この処理は、サイトのリンクをまとめて対象にしています。
// リンクを押したら幕を下ろすアニメーションを出し、0.4秒後にページを移動する
$('a:not([href^="#"]):not([target])').on('click', function (e) { ... });シェアボタンのリンクも、この対象に入っていました。リンクに書いた onclick="...; return false;" では、jQuery で付けた処理までは止まりません。そのため、別ウィンドウが開いたあとに、元のページも移動していました。 シェアボタンを対象から外して、直しました。 なお、この記事のサンプルのように target="_blank" を付けたリンクは、:not([target]) で最初から対象外になります。
$('a:not([href^="#"]):not([target])').not('.share-btn a').on('click', function (e) { ... });ページの移動のアニメーションや、外部リンクの計測など、サイト全体のリンクに処理を付けているテーマでは、シェアボタンも巻き込まれていないかを確認しておくと安心です。設置したら、実際にボタンを押して、元のページがそのままかどうかを確かめてみてください。
よくある質問
プラグインでシェアボタンを入れるのはだめですか？
だめではありません。設定画面からボタンを選べるので、手軽です。 ただ、プラグインによっては、各SNSのスクリプトや共有数を取りにいく処理が入り、ページが重くなることがあります。また、今回の Google+ や Pocket のように、サービスが終わったボタンがプラグインの更新を待たないと消えないこともあります。ボタンが4〜5個なら、この記事のように直接書くほうが、軽くて手入れもしやすいです。
共有したときに出る画像やタイトルは、どこで決まりますか？
ページの <head> にある OGP（og:title・og:image などのタグ）で決まります。Facebook のシェアボタンにはURLしか渡せないので、OGP が設定されていないと、意図しない画像や文章で共有されてしまいます。 シェアボタンを見直すときは、OGP の画像（1200×630px が目安）が設定されているかも、あわせて確認するのがおすすめです。
共有数は表示したほうがいいですか？
おすすめしません。X（旧Twitter）は共有数を取得できなくなっていて、Facebook も取得には API の設定が必要です。数が「0」や空欄のまま並ぶと、かえって読まれていない印象になります。
まとめ
- Google+ と Pocket はサービスが終わっています。古いシェアボタンが残っていたら、まずは押しても使えないボタンを消しましょう
- 置くボタンは、自分のブログの読者が使っているSNSに絞ります。Cruwでは X・Facebook・はてブに、URLコピーを足した4つにしました
- プラグインを使わず、各SNSの共有用のURLへのリンクと、公式の SVG アイコンで作ると、軽くて手入れしやすくなります。設置したら、実際に押して動きを確かめましょう
シェアボタンのような細かい部分も、何年も手を入れないままだと、サイト全体が古く見える原因になります。Cruwでは、ホームページ制作のほか、公開後のサイトの見直しや改善を月額でお任せいただける「サイト改善おまかせパック」も行っています。「うちのサイトも古いところがないか見てほしい」という段階でも、お気軽にご相談ください。
