SNS投稿ボタン設置【上級者用】

Home » 上級者用 » SNS投稿ボタン設置【上級者用】

ホームページへSNSの投稿ボタンを設置したい際は以下のコードをお試しください。

HTML

以下のHTMLコードを表示させたい箇所の「テキスト」タブに貼り付けてください。

<div class="sns-share">
	<a id="share-x" href="" target="_blank" rel="nofollow noopener">Xでシェア</a>
	<a id="share-fb" href="" target="_blank" rel="nofollow noopener">Facebookでシェア</a>
	<a id="share-line" href="" target="_blank" rel="nofollow noopener">LINEで送る</a>
</div>

XのシェアURL・FacebookのシェアURL・LINEのシェアURL部分にはそれぞれのシェアURLをペーストしてください。

JavaScript

以下のコードを「共通コード・ショートコード」の新規コンテンツにペーストし、公開してください。

<script type="text/javascript">

	$(function(){
	// 1. 現在のページのURLとタイトルを取得
	const currentUrl = encodeURIComponent(window.location.href);
	const pageTitle = encodeURIComponent(document.title);

	// 2. 各SNSのシェアURLを生成してhrefに代入
	// X (Twitter)
	document.getElementById('share-x').href = `https://twitter.com/share?url=${currentUrl}&text=${pageTitle}`;

	// Facebook
	document.getElementById('share-fb').href = `https://www.facebook.com/sharer/sharer.php?u=${currentUrl}`;

	// LINE
	document.getElementById('share-line').href = `https://social-plugins.line.me/lineit/share?url=${currentUrl}`;
	});

</script>

新規コンテンツを公開したら……

「以下のショートコードをコピーしてください。」という表示の下に、
[wv_script id=’●●●●●●’] のようなショートコードが生成されます。

このショートコードをコピーしておいてください。

コピーしたショートコードをトップページに設置する

共通タグ・トップページコンテンツで新規コンテンツを追加。

  1. ページのタイトルを表示しないに✓を入れる
  2. 上記でコピーしたショートコードを「テキスト」タブに張り付け。
  3. 表示位置を「<head>内（全ページ）」にして作成
  4. 「公開」ボタンをクリック

設置完了です