[JS]ソーシャルメディアの不揃いなボタンを統一した美しいデザインでブログに設置するスクリプト -Koottam

サイト構築 -JavaScript

Post on:2012年5月2日

Koottamの主な特徴

Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。
7種類のテーマがあり、CSSベースでカスタマイズも可。
カウントの表示はスタティック・アニメーションに対応。
カラーは簡単に変更できます。
より大きいカウント用に省略表記も対応。
MITライセンスのため、あらゆるブログ・サイトに使用しても無料！

Koottamのデモ

デモページ

デモではKoottamのさまざまな機能を楽しめます。

[ad#ad-2]

id: id/usernameを設定するだけで、簡単設置。

対応サービス: さまざまなソーシャルメディアに対応しています。

カウントの表示: 数は省略表記にも対応。

スタイル: 上から、イメージ+カウント、ロゴ+カウント、イメージ+ロゴ+カウント、イメージ+id+カウント

カラー: カラーの適用は2進法、上から111、101、001。

サイズ: 上：デフォルト、下：ビッグ

Koottamの使い方

外部ファイル

「jquery.js」と当スクリプト、当スタイルシートを外部ファイルとして記述します。

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.koottam.js"></script>
<link href="koottam/css/koottam.css" rel="stylesheet"/>

HTML

Facebookのボタンを作成する例です。
テキストリンクで、Facebookへアンカーを設定します。

<a href="http://facebook.com/jobysblog" class="fb">Facebook</a>

JavaScript

適用するエレメントをjQueryのセレクタで指定し、Facebook用のオプションを設定します。

<script type="text/javascript">
    $(document).ready(function(){
        $('.fb').koottam({
            'id'            : 'jobysblog',
            'method'        : 'api',
            'count_style'   : 'animate',
            'theme'         : 'facebook-blue',
            'icon_url'      : 'koottam/img/facebook.png'
        });
    });
</script>