• かちびと.net

    見た目がFacebookのLikeboxっぽいTwitterウィジェットを作成出来るjQueryプラグイン・Twitter Follow Boxのご紹介。デザインも変更可能です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

見た目がFacebookのLikeboxっぽいTwitterウィジェットを作成出来るjQueryプラグイン・Twitter Follow Box

スポンサーリンク

使いそうだったので備忘録。Facebook
で恐らく最も利用されてると思われる
ソーシャルプラグインのLikeboxと似た
ようなものを、Twitterアカウントで
作成するjQueryプラグインです。デザ
イン的にもバランスが取れるので覚え
ておいて損は無いのでは。

と言うわけでLikeboxライクなTwitterウィジェットです。自身のアカウント、フォローボタンと、フォロワーさんのアイコンを表示する事が出来ます。

Twitter Follow Box


よく見かけるアレのTwitter版です。以下サンプル。

Sample


一部日本語に変えました。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="jquery.followbox.min.js" type="text/javascript"></script>

本体とプラグインを読み込みます。

$('#foo').followbox({
    'user' : 'kachibito'
});

で、セッティングして

<div id="foo"></div>

空のボックスとかをマークアップすればOK。

$('#bar').followbox({
            'user'   : 'kachibito',
            'width'  : 500,
            'height' : 354,
            'theme'  : 'light',
            'border_color' : '#AAA',
            'bg_color' : '#fff',
            'bg_image' : '',
            'title_color' : '#3B5998',
            'total_count_color' : '#333',
            'follower_name_color' : '#BBB'
});

上記は全設定項目です。大体分かると思います。背景に画像を指定、なんてのも出来るみたいですね。

尚、アカウントの表示数ですが、ボックスのサイズを変えれば表示されるフォロワーさんのアイコン数もそのサイズに納まるだけ便宜表示してくれます。


このように、ボックスのサイズに関係なく、全てのアイコンを表示している、とかではなく、指定したサイズに応じて表示数を調整してくれるので、無駄な負荷がかかる心配のないよう配慮してくれています。

ライセンスはMITです。ご利用は以下よりどうぞ。

Twitter Follow Box

URL :
TRB :

Ads

Posts

Contact

Services