シンプルなシェアボタン「jsSocials」を設置する方法

jQueryを利用したシェアボタン、「jsSocials」の紹介です。
海外製なのでLINEやはてなブックマークなどの国内サービスには対応していないのですが、FacebookやTwitterなどメジャーなシェアボタンを配置するのに便利です。

  1. デモ
  2. 準備
  3. 設置方法
  4. 参考サイト

1.デモ

「jsSocials」のオフィシャルサイトで表示のデモを確認することができます。
Demos -jsSocials-

2.準備

「jsSocials」はFont AwesomeのWEBアイコンサービスを利用しています。
事前にFont Awesomeで設置用のコードを入手しておいてください。
Font Awesome

2.設置方法

手順1 「jsSocials」のダウンロード

「jsSocials」の設置に必要なファイルをダウンロードします。
Download jsSocials

手順2 「jsSocials」用ファイルをサイトフォルダ内に配置

ダウンロードした圧縮ファイルを展開し、「jssocials.css」、「jssocials-theme-flat.css」をCSSフォルダ内に、「jssocials.min.js」をJSフォルダ内に配置してください。

手順3 CSS、JSファイル読み込みコードの記述

以下のコードを「jsSocials」を利用するページの<head>タグ内に記述してください。
※Font Awesomeを読み込む記述は、適宜メールで取得した自身のコードに変更してください。

<link rel="stylesheet" href="css/jssocials.css">
<link rel="stylesheet" href="css/jssocials-theme-flat.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<-- ここにFontAwesomeの記述を追加 -->
<script src="js/jssocials.min.js"></script>
<script type="text/javascript">
$(function(){
 $("#share").jsSocials({
  shares: ["twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "whatsapp"]
 });
});
</script>

手順4 <body>タグ内にシェアボタンを表示する<div>タグを挿入する

シェアボタンを表示したい箇所に、ID名を「share」と付けた<div>タグを挿入します。

<div id="share"></div>

これでシェアボタンが表示されます。

4.カスタマイズ

カスタマイズオプションを付け加えた記述を紹介します。
以下のコード部分を削除し、差し替えてください。

削除

$(function(){
 $("#share").jsSocials({
 shares: ["twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "whatsapp"]
 });
});

差し替え

$(function(){
 $("#share").jsSocials({
  showLabel: false, // アイコンのみ「false」、アイコン&ラベル「true」
  showCount: 'inside', // カウント数表示をボックス内に「'inside'」、外側に「true」、なし「false」
 shares: ["twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "whatsapp"]
 });
});

jsSocialのデモページで表示のカスタマイズ方法についての説明がありまので、詳しくはデモページを参考にしてみてください。
Demos -jsSocials