SNSソーシャルボタン「Twitter/Facebook/LINE/はてブ/pocket」のつくりかた

本ページではSNSソーシャルボタンのつくりかたを解説します。

  • WordPressに設置する方法(他のサイトでもできる)
  • プラグイン無し
  • Font Awesome」で無料利用で好きなアイコンを選ぶ
  • ソーシャルボタンは「Twitter/Facebook/LINE/はてブ/pocket」
  • Twitterボタンは「いま開いているページのタイトルとアドレスが入力済み」

Font Awesomeを利用登録する

Font Awesome」はWEBサイトなどでつかえるアイコンキットサービスです。ここからアイコン用に使うコードを入手します。

利用登録後、アイコンページからキーワード検索してほしいアイコンを探します。例えば「twitter」で検索すればTwitter用ボタンとして使えそうなアイコンが出てきます。

必要なコードは下記のように<i>から始まるアイコン用HTMLコードです。

<i class="fa-brands fa-twitter"></i>

コードを貼り付ける

jQueryを<head>内に貼り付ける

本ページで紹介するやりかたはJavaScriptをつかうので、下記、「jQuery」のコードを<head>内に貼り付けてください。位置は</head>の直前あたりで大丈夫です。
既に他の作業で導入済みの方はやる必要ないです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

ソーシャルボタン用HTMLコードを設置したいところに貼り付ける

下記のコードをコピペして、ソーシャルボタンを配置したいところに貼り付けてください。

<p style="text-align:center;">

<!-- Twitter -->
<a class="js-sns-link" href="//twitter.com/intent/tweet?text=&{title}=&url=" target="_blank" rel="nofollow noopener noreferrer">Twitterアイコン用HTMLコード</a>
<!-- Facebook -->
<a class="js-sns-link" href="//www.facebook.com/sharer/sharer.php?u=&t=" target="_blank" rel="nofollow noopener noreferrer">Facebookアイコン用HTMLコード</a>
<!-- LINE -->
<a class="js-sns-link" href="//timeline.line.me/social-plugin/share?url=&text=" target="_blank" rel="nofollow noopener noreferrer">LINEアイコン用HTMLコード</a>
<!-- はてなブログ -->
<a class="js-sns-link" href="//b.hatena.ne.jp/add?mode=confirm&url=&title=" target="_blank" rel="nofollow noopener noreferrer">はてぶアイコン用HTMLコード</a>
<!-- pocket -->
<a class="js-sns-link" href="//getpocket.com/edit?url=" target="_blank" rel="nofollow noopener noreferrer">pocketアイコン用HTMLコード</a>
</p>

<script>
let url = location.href
let title = document.title
let snsLinks=$(".js-sns-link")
for(let i=0; i<snsLinks.length; i++){
let href=snsLinks.eq(i).attr('href');
   //シェアページのURL上書き
href=href.replace("u=","u="+url) //facebook
href=href.replace("url=","url="+encodeURIComponent(url)) //twitter,LINE,はてなブログ,pocket
href=href.replace("{title}=","title="+encodeURIComponent(title)) //Twitter記事タイトル
snsLinks.eq(i).attr('href',href);
}
</script>

上記のコードは下記のサイトで解説されていたコードを組み合わせて作成しました。

 

 

 

」様のサイトではTwitterのシェアボタンに「ページタイトル」を入力済みにする機能がなかったので、「にしし ふぁくとりー」様で解説されていたコードを参考にして、組み合わせて完成させたという経緯です。(※2022/8/21 追記
22〜23行目のurlとtitleに「encodeURIComponent」を加えてエンコードされるようにしました)

なお、pocketのシェア用アドレスは他のサイトで使われていたものをとってきました。シェア用アドレスはどこでも同じなので問題ありません。

FontAwesomeのアイコン用HTMLコードを挿入する

前項のソーシャルボタン用HTMLコードの右の方に「◯◯◯アイコン用HTMLコード」という部分があります。そこをFontAwesomeでとってきたアイコンコードに差し替えてください。<i>から始まるやつです。


おわりに

必要な作業は以上となります。

参考までに下記、当サイトのシェアボタンのコードを掲載しておきます。

アイコン用コードのところにある「fa-fw」とか「 fa-2x」という記述はアイコン同士の間隔やサイズを調整するFontAwesome専用のパラメータです。

<p style="text-align:center;">
<!-- Twitter -->
<a class="js-sns-link" href="//twitter.com/intent/tweet?text=&{title}=&url=" target="_blank" rel="nofollow noopener noreferrer"><i class="fa-brands fa-twitter fa-fw fa-2x"></i></a>
<!-- Facebook -->
<a class="js-sns-link" href="//www.facebook.com/sharer/sharer.php?u=&t=" target="_blank" rel="nofollow noopener noreferrer"><i class="fa-brands fa-facebook-f fa-fw fa-2x"></i></a>
<!-- LINE -->
<a class="js-sns-link" href="//timeline.line.me/social-plugin/share?url=&text=" target="_blank" rel="nofollow noopener noreferrer"><i class="fa-brands fa-line fa-fw fa-2x"></i></a>
<!-- はてなブログ -->
<a class="js-sns-link" href="//b.hatena.ne.jp/add?mode=confirm&url=&title=" target="_blank" rel="nofollow noopener noreferrer"><i class="fa-solid fa-b fa-fw fa-2x"></i></a>
<!-- pocket -->
<a class="js-sns-link" href="//getpocket.com/edit?url=" target="_blank" rel="nofollow noopener noreferrer"><i class="fa-brands fa-get-pocket fa-fw fa-2x"></i></a>
</p>

<script>
let url = location.href
let title = document.title
let snsLinks=$(".js-sns-link")
for(let i=0; i<snsLinks.length; i++){
let href=snsLinks.eq(i).attr('href');
   //シェアページのURL上書き
href=href.replace("u=","u="+url) //facebook
href=href.replace("url=","url="+encodeURIComponent(url)) //twitter,LINE,はてなブログ,pocket
href=href.replace("{title}=","title="+encodeURIComponent(title)) //Twitter記事タイトル
snsLinks.eq(i).attr('href',href);
}
</script>

Copyright (C) 2016 "HYOGOKURUMI" All Rights Reserved./「来未炳吾・平極ルミ・HYOGOKURUMI」の発達障害考察を主とした全ての発信は、相互不干渉など特別な約束をした者達を除き、どなたでもご活用できます。ただし著作権は放棄しておりません。あしからずご了承ください。詳細は著作権に関するガイドラインをご一読ください。/「HYOGOKURUMI.site」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。