SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何らかのプラグインで実装できるが、そうじゃない場合はアイコン画像を設置したりURLを設定したり等、やや面倒な作業が必要になる。この辺り何とかならないか調べたところ「jsSocials」プラグインで解決できそう。以下に利用方法をメモ。
jsSocials
公式サイト
GitHub
https://github.com/tabalinas/jssocials
CDN
CDNで使う場合は以下を記述する。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials-theme-flat.min.css">
jQueryプラグインなのでjQueryも読み込むこと。また、アイコンを利用する際はFont AwesomeのCSSも必要となる上、v5やv6だと正常に表示されない点に注意する。
サンプル
https://taitan916.info/sample/jsSocials/
利用方法
ソースコード
<div id="share"></div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsSocials/1.5.0/jssocials-theme-flat.min.css"> <script> $("#share").jsSocials({ url: `シェアしたいURL`, text: `シェアしたいテキスト`, showLabel: false, //ボタンのテキスト(twitter等) showCount: false, //シェア数(いいね数等) shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "pocket", "whatsapp", "viber", "messenger", "vkontakte", "telegram", "line", "rss"], }); </script>
オプション項目について
各オプション項目についてはこちらのドキュメントページを参照すること。
関連記事
-
-
jQuery UIを用いた日付及び時間のピッカーの利用方法
jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...
-
-
FullCalendarでラベルごとに表示・非表示を切り替える方法
Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...
-
-
jQuery Nice Selectを特定ページのみ無効にする方法
bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...
-
-
jQueryにて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかっ ...
-
-
要素の点滅
やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...