SNSボタンの設置（上級者用）

Home » 個別ページ » SNSボタンの設置（上級者用）

◆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>

◆Javascript

共通コンテンツにて表示位置を「<head>内（全ページ）」にして作成

<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>