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

Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。

サイトのキャプチャ

Koottam Social jQuery Plugin

Koottamの主な特徴

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

Koottamのデモ

デモのキャプチャ

デモページ

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

デモのキャプチャ
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>

top of page

©2016 coliss
o