[JS]超軽量で設置も簡単!Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount

デザインのカスタマイズも簡単で、マウス・キーボード操作だけでなく、タッチデバイスにも対応した、ソーシャルメディアのボタンを設置できるjQueryのプラグインを紹介します。

デモのキャプチャ

SocialCount
SocialCount -GitHub

SocialCountの特徴

  • Facebook, Twitter, Google+をサポート。
  • JavaScriptとCSSは3KBと超軽量!
  • あなたのデザインに合わせて簡単にカスタマイズが可能。
  • マウス、キーボード操作だけでなく、タッチデバイスにも対応。
  • 共有のリンクはスクリプトに依存していません。

SocialCountのデモ

デモではノーマルのサイズから、小さいサイズ・大きいサイズまで、さまざまなページに設置できるようバリエーションが揃っています。

デモのキャプチャ

デモページ:上からデフォルト、Facebookのおすすめ、カウント付き

デモのキャプチャ

デモページ:小さいサイズのボタン

デモのキャプチャ

デモページ:大きいサイズのボタン

デモのキャプチャ

デモページ:カウント付きで縦並び

SocialCountの使い方

使い方のステップは、2つ。
これ以上ないくらいに簡単です。

Step 1: 外部ファイル

スタイルシートとスクリプトを外部ファイルとして設置します。
まずは、スタイルシートをhead内に。

<head>
<link rel="stylesheet" href="../src/socialcount.css">
</head>

アイコンを使用する場合は、もう一つ外部ファイル(socialcount-icons.css)を加えます。

続いて、スクリプトをページの下の</body>の上に。

...
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="../src/socialcount.js"></script>
</body>

Step 2: コードの生成

HTMLはジェネレーターが用意されているので、簡単に生成できます。設置するページのURL、ボタンのサイズ、Facebookのボタン、カウントの有無を選択し、「Generate」ボタンをクリックしてください。

デモのキャプチャ

HTML Generator

コードは下記のように生成されるので、配置する箇所にコピペして利用します。

<ul class="socialcount socialcount-small" data-url="http://coliss.com/" data-counts="true">
	<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=http://coliss.com/" title="Share on Facebook"><span class="count">Like</span></a></li>
	<li class="twitter"><a href="https://twitter.com/intent/tweet?text=http://coliss.com/" title="Share on Twitter"><span class="count">Tweet</span></a></li>
	<li class="googleplus"><a href="https://plusone.google.com/_/+1/confirm?url=http://coliss.com/" title="Share on Google Plus"><span class="count">+1</span></a></li>
</ul>

top of page

©2017 coliss