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

サイト構築 -JavaScript

Post on:2012年11月29日

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="//coliss.com/" data-counts="true">
	<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=//coliss.com/" title="Share on Facebook"><span class="count">Like</span></a></li>
	<li class="twitter"><a href="https://twitter.com/intent/tweet?text=//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=//coliss.com/" title="Share on Google Plus"><span class="count">+1</span></a></li>
</ul>