SWELLの投稿記事では、標準機能のSNSシェアボタンを利用できます。一方、LPでは投稿記事と同じようにシェアボタンを表示できません。
最初はシェアボタン用のプラグインを使いましたが、設置するのは数件のLPだけです。そのためにプラグインを使い続ける必要はないと考え、カスタムHTMLブロックへ貼り付けるシェアボタンを作成しました。
Facebook、X、はてなブックマーク、LINE、URLコピーに対応しています。複数のページで使う場合は、WordPressの同期パターンに登録すれば一括管理も可能です。
目次
LPに設置するシェアボタンのコード
以下のコードを、LP内でシェアボタンを表示したい場所の「カスタムHTML」ブロックへ貼り付けます。現在開いているページのURLとタイトルを自動で取得するため、LPごとの書き換えは不要です。
このコードは、貼り付けた場所にだけシェアボタンを表示します。サイト全体の記事へ自動表示するものではありません。
<div class="mkt-share-box" data-mkt-share-box>
<div class="mkt-share-buttons">
<a class="mkt-share-btn mkt-share-facebook" data-mkt-share="facebook" href="#" target="_blank" rel="noopener noreferrer" aria-label="Facebookでシェア">
<span class="mkt-share-icon" aria-hidden="true">f</span>
</a>
<a class="mkt-share-btn mkt-share-x" data-mkt-share="x" href="#" target="_blank" rel="noopener noreferrer" aria-label="Xでシェア">
<span class="mkt-share-icon" aria-hidden="true">X</span>
</a>
<a class="mkt-share-btn mkt-share-hatena" data-mkt-share="hatena" href="#" target="_blank" rel="noopener noreferrer" aria-label="はてなブックマークでシェア">
<span class="mkt-share-icon" aria-hidden="true">B!</span>
</a>
<a class="mkt-share-btn mkt-share-line" data-mkt-share="line" href="#" target="_blank" rel="noopener noreferrer" aria-label="LINEでシェア">
<span class="mkt-share-icon mkt-share-icon-line" aria-hidden="true">LINE</span>
</a>
<button class="mkt-share-btn mkt-share-copy" type="button" data-mkt-share-copy aria-label="URLをコピー">
<span class="mkt-share-copy-icon" aria-hidden="true">📋</span>
<span class="mkt-share-copy-text">コピー</span>
</button>
</div>
<p class="mkt-share-message" data-mkt-share-message aria-live="polite"></p>
</div>
<style>
.mkt-share-box {
width: min(720px, 100%);
margin: 2rem auto;
}
.mkt-share-buttons {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(110px, 1.15fr);
gap: 10px;
align-items: stretch;
}
.mkt-share-btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 20px;
padding: 0.6em 1em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: none;
text-decoration: none;
color: #222;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
opacity 0.2s ease;
min-width: 0;
white-space: nowrap;
}
.mkt-share-btn:hover {
text-decoration: none;
}
.mkt-share-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
line-height: 1;
}
.mkt-share-facebook {
border-color: #4267b2;
}
.mkt-share-facebook .mkt-share-icon {
color: #4267b2;
font-family: Arial, sans-serif;
font-size: 1.35rem;
}
.mkt-share-facebook:hover {
background: #4267b2;
border-color: #4267b2;
}
.mkt-share-facebook:hover .mkt-share-icon {
color: #fff;
}
.mkt-share-x {
border-color: #222;
}
.mkt-share-x .mkt-share-icon {
color: #111;
font-size: 1.2rem;
}
.mkt-share-x:hover {
background: #222;
border-color: #222;
}
.mkt-share-x:hover .mkt-share-icon {
color: #fff;
}
.mkt-share-hatena {
border-color: #00a4de;
}
.mkt-share-hatena .mkt-share-icon {
color: #00a4de;
font-size: 1.2rem;
}
.mkt-share-hatena:hover {
background: #00a4de;
border-color: #00a4de;
}
.mkt-share-hatena:hover .mkt-share-icon {
color: #fff;
}
.mkt-share-line {
border-color: #00c300;
}
.mkt-share-line .mkt-share-icon {
color: #00c300;
font-size: 0.75rem;
letter-spacing: 0;
}
.mkt-share-line:hover {
background: #00c300;
border-color: #00c300;
}
.mkt-share-line:hover .mkt-share-icon {
color: #fff;
}
.mkt-share-copy {
gap: 0.45em;
border-color: #999;
}
.mkt-share-copy-icon {
font-size: 1rem;
line-height: 1;
}
.mkt-share-copy-text {
font-size: 0.9rem;
font-weight: 700;
color: #333;
}
.mkt-share-copy:hover {
background: #333;
border-color: #333;
}
.mkt-share-copy:hover .mkt-share-copy-icon,
.mkt-share-copy:hover .mkt-share-copy-text {
color: #fff;
}
.mkt-share-message {
margin: 0.8rem 0 0;
text-align: center;
font-size: 0.85rem;
color: #555;
}
@media (max-width: 767px) {
.mkt-share-box {
width: 100%;
margin: 1.5rem auto;
}
.mkt-share-buttons {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
.mkt-share-btn {
min-height: 34px;
padding: 0.45em 0.4em;
font-size: 12px;
}
.mkt-share-facebook .mkt-share-icon {
font-size: 1.15rem;
}
.mkt-share-x .mkt-share-icon,
.mkt-share-hatena .mkt-share-icon {
font-size: 1rem;
}
.mkt-share-line .mkt-share-icon {
font-size: 0.65rem;
}
.mkt-share-copy {
gap: 0.2em;
}
.mkt-share-copy-icon {
font-size: 0.85rem;
}
.mkt-share-copy-text {
font-size: 0.75rem;
}
}
</style>
<script>
(function() {
const shareBoxes = document.querySelectorAll('[data-mkt-share-box]');
if (!shareBoxes.length) return;
shareBoxes.forEach(function(box) {
const rawUrl = location.href;
const pageUrl = encodeURIComponent(rawUrl);
const pageTitle = encodeURIComponent(document.title);
const shareUrls = {
x: 'https://twitter.com/intent/tweet?url=' + pageUrl + '&text=' + pageTitle,
facebook: 'https://www.facebook.com/sharer/sharer.php?u=' + pageUrl,
line: 'https://social-plugins.line.me/lineit/share?url=' + pageUrl,
hatena: 'https://b.hatena.ne.jp/entry/s/' + rawUrl.replace(/^https?:\/\//, '')
};
box.querySelectorAll('[data-mkt-share]').forEach(function(link) {
const service = link.dataset.mktShare;
if (shareUrls[service]) {
link.href = shareUrls[service];
}
});
const copyButton = box.querySelector('[data-mkt-share-copy]');
const message = box.querySelector('[data-mkt-share-message]');
if (copyButton) {
copyButton.addEventListener('click', function() {
navigator.clipboard.writeText(rawUrl).then(function() {
if (message) {
message.textContent = 'URLをコピーしました。';
}
}).catch(function() {
if (message) {
message.textContent = 'コピーできませんでした。URLを選択してコピーしてください。';
}
});
});
}
});
})();
</script>カスタムHTMLブロックへの設置方法
- LPの編集画面を開く
- シェアボタンを表示したい場所に「カスタムHTML」ブロックを追加する
- 先ほどのコードを貼り付けてページを更新する
- 公開ページで各ボタンとURLコピーを確認する
HTML、CSS、JavaScriptを一つのブロックにまとめているので、追加のファイルは必要ありません。専用のクラス名とdata属性を使い、このシェアボタン内だけを処理するようにしています。
編集画面ではボタンが縦並びになったり、表示が簡略化されたりすることがあります。公開ページで横並びに表示され、各ボタンが動作すれば問題ありません。
複数ページで使うなら同期パターンに登録する
一度しか使わない場合は、LP内へ直接貼り付けるだけで十分です。複数のLPで共通のシェアボタンを使う場合は、同期パターンに登録しておくと管理が楽になります。
- WordPress管理画面の「外観」から「パターン」を開く
- 新しいパターンを追加し、「同期」をオンにする
- カスタムHTMLブロックを追加してシェアボタンのコードを貼り付ける
- 「SNSシェアボタン」など、判別しやすい名前を付けて保存する
保存したパターンは、LPの編集画面から通常のブロックと同じように呼び出せます。検索欄へ登録名の一部を入力し、該当するパターンを選択してください。
同期パターンのコードを編集すると、配置済みのページにも変更が反映されます。ボタンの色や文言、表示するSNSをあとから変更するときに、各ページを一つずつ修正する必要がありません。
標準機能・コード・プラグインの選び方
| 方法 | 向いている用途 | 特徴 |
|---|---|---|
| SWELLの標準機能 | 通常の投稿記事に表示したい | コードやプラグインが不要 |
| 今回のコード | 数件のLPにだけ表示したい | 必要なLPだけで使用できる |
| シェアボタン用プラグイン | 多くのページで使いたい、多数のSNSへ対応したい | 管理画面から設定しやすい |
数件のLPにシェアボタンを追加するだけなら、今回のコードで目的を満たせます。一方、多くのページへの表示や多数のSNSへの対応が必要なら、AddToAny Share Buttonsなどのプラグインを使う方が管理しやすくなります。
この方法の注意点
- シェアボタンはコードまたは同期パターンを配置したページにだけ表示される
- Facebook、X、はてなブックマーク、LINE、URLコピー以外を追加する場合はコードの修正が必要
- 「コピー」ボタンは、現在開いているページのURLをクリップボードへコピーします。原則としてHTTPSのページで動作し、ブラウザの権限や利用環境によってはコピーに失敗することがあります。
- 同期をオフにしたパターンは、配置後に各ページの独立したブロックになる
ページごとにデザインや表示項目を変えるなら同期オフ、すべて同じ内容で一括管理するなら同期オンが適しています。
実際に設置したシェアボタン
この記事にも、紹介した同期パターンを使ってシェアボタンを設置しています。実際の表示は以下のとおりです。
まとめ
SWELLのLPにシェアボタンを置くなら、カスタムHTMLブロックへコードを貼り付ける方法で対応できます。数件のLPだけで使う場合は、専用プラグインの追加やPHPファイルの編集も必要ありません。
複数のLPで同じボタンを使う場合は、同期パターンに登録しておけば一か所の編集でまとめて変更できます。投稿記事にはSWELLの標準機能、多くのページで使うならプラグイン、数件のLPだけなら今回のコードと、用途に応じて選び分けられます。
コメント