【jQuery】全SNSシェアボタンに対応？ social-share.js を使ってみた

jQueryでSNSシェアボタンを作るライブラリ

本当に星の数ほどあってどれを選べばいいか悩むと思います。

あと良さそうなライブラリを見つけても
Twitter とか Facebook とかの少数のSNSにしか対応してなかったり・・・

そこで何かいいのないかな～と探してたら、ドンピシャなのを見つけました。

それが social-share.js というjQueryライブラリ

どうやら日本人の方が作ったみたいですが、本当にあらゆるSNSに対応しています。

そこで、この social-share.js の使い方とボタンの作り方を紹介！かなり便利です。

このページの目次

１．まずは jQuery と Bootstrap を読み込もう
- SNSアイコン表示するなら FontAwesome も必要
２．SocialShare 自体をインクルードする
３．シェアボタンの作り方＆コード例
ここまでのまとめ

１．まずは jQuery と Bootstrap を読み込もう

このライブラリは最低限 jQuery がないと動かないです。

あとボタンを表示するにはBootstrapも必要ですね。

なので、まずは jQuery と Bootstrap を読み込みしておきます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

1 2	<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

あるいは次ページから直ダウンロードも可能

jQuery　：　https://jquery.com/download/
Bootstrap　：　https://getbootstrap.com/

SNSアイコン表示するなら FontAwesome も必要

これは別に必須ではないですが・・・

もしSNSボタンにアイコン表示したいなら FontAwesome の読み込みも必要です。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

1	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

アイコンがないと、テキストだけのボタンになってしまいます。

FontAwesome にはSNSのアイコンもあるので、読み込んでおくといいかも

２．SocialShare 自体をインクルードする

そうしたら次は SocialShare 自体をページ内に読み込み

そのダウンロードはコチラ

GitHub

AyumuKasuga/SocialShare

https://github.com/AyumuKasuga/SocialShare

jQuery plugin for creating custom like buttons and like counters - AyumuKasuga/SocialShare

DLしたのを解凍したら、 SocialShare.min.js を適当な場所にコピーしてください。

そしてページ内の head タグ内か body タグ内で読み込み

<script src="lib/SocialShare.min.js"></script>

1	<script src="lib/SocialShare.min.js"></script>

これでシェアボタンを作る準備完了です。

３．シェアボタンの作り方＆コード例

それではシェアボタンの設置方法について

具体的なコード例を出すなら次の通りです。

まずシェアボタン全体のラッパー要素を作成

例えば次みたいに Twitter と Facebook 用に２つの要素を作ってみました。（一部Bootsrap使用）

<button class="btn btn-primary share-btn s_twitter mr-3">
  <i class="fa fa-twitter"></i> Twitter
</button>
<button class="btn btn-primary share-btn s_facebook">
  <i class="fa fa-facebook"></i> Facebook
</button>

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

</button>

<i class="fa fa-facebook"></i> Facebook

</button>

このポイントは次の３つ

必ず共通のクラスを持たせること
この場合だと share-btn というクラス名。これは任意のものに置き換え可能
各SNS用アイコンの表示
Twitterだったら fa-twitter 、 FaceBook なら fa-facebook とかで参照できる。ただしSNSによってはアイコンがないことあるので注意
SNS専用のクラス名をつける
Twitterだったら s_twitter 、Facebook なら s_facebook みたいに、、、

最後のポイントが一番大事です。

Twitterのシェアボタンを作るなら s_twitter みたいなクラス名を必ず付与しときましょう。

ちなみに各SNSのクラス名（ s_*** ）は公式GitHubから確認できます。

そうしたら最後に、次のJSコードを追加

window.addEventListener('load', function(){
  $('.share-btn').ShareLink({
    title: 'Pisuke-Code',
    text: 'Web開発のこととかアレコレ書いてるブログ',
    url: 'https://pisuke-code.com',
    class_prefix: 's_'
  });
});