本ページではSNSソーシャルボタンのつくりかたを解説します。
- WordPressに設置する方法（他のサイトでもできる）
- プラグイン無し
- 「Font Awesome」で無料利用で好きなアイコンを選ぶ
- ソーシャルボタンは「Twitter／Facebook／LINE／はてブ／pocket」
- Twitterボタンは「いま開いているページのタイトルとアドレスが入力済み」
Font Awesomeを利用登録する
「Font Awesome」はWEBサイトなどでつかえるアイコンキットサービスです。ここからアイコン用に使うコードを入手します。
利用登録後、アイコンページからキーワード検索してほしいアイコンを探します。例えば「twitter」で検索すればTwitter用ボタンとして使えそうなアイコンが出てきます。
必要なコードは下記のように ｉタグから始まるアイコン用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でとってきたアイコンコードに差し替えてください。 ｉタグから始まるやつです。
おわりに
必要な作業は以上となります。
参考までに下記、当サイトのシェアボタンのコードを掲載しておきます。
アイコン用コードのところにある「fa-fw」とか「 fa-2x」という記述はアイコン同士の間隔やサイズを調整するFontAwesome専用のパラメータです。
