• Top
• Category
• Contact
• About

サイト構築 -JavaScript

311

sponsorsr

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

Koottam Social jQuery Plugin

[ad#ad-2]

• Koottamの主な特徴
• Koottamのデモ
• Koottamの使い方

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>

Related Posts

coliss