JavaScript

シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box Widget」

とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twitter Follow Box Widget」を使ってみました。公式ウィジェットもいいんですが、もう少しシンプルにしたいと言う人にはピッタリかと思います。FacebookのLikebox風な感じのフォローボックスになります。ということで以下使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインファイルを読み込みます。

<link href="followbox/followbox.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="followbox/jquery.followbox.min.js"></script>

自分のツイッターアカウントをセットします。

<script type="text/javascript">
$(document).ready(function(){
    $('#sample').followbox({
        'user': '自分のTwitterアカウント'
    });
});
</script>

あとはウィジェットを表示させるために指定したセレクタを記述しておきます。

<div id="sample"></div>

これだけでシンプルなウィジェットを簡単に表示させることができます。こんな感じでテーマが3種類あり、左から順に ‘light’、’dark’、’custom’になっています。’custom’は背景色やボーダーを自分で自由に設定することができます。

Twitter Follow Box Widget

<script type="text/javascript">
$(document).ready(function(){
    // light
    $('#sample1').followbox({
        'user': '自分のTwitterアカウント'
    });

    // dark
    $('#sample2').followbox({
        'user': '自分のTwitterアカウント',
        'theme': 'dark'
    });

    // custom
    $('#sample3').followbox({
        'user': '自分のTwitterアカウント',
        'width': 292,
        'height': 252,
        'theme': 'custom',
        'border_color': '#c6ecff',
        'bg_color': '#eaf8ff',
        'bg_image': '',
        'title_color': '#3B5998',
        'total_count_color': '#333',
        'follower_name_color': '#3B5998'
    });
});
</script>

ということで、FacebookのLikeboxと一緒に表示させたりすると統一感もでていい感じになりそうですね。以下からダウンロードできます。

関連記事

  1. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  2. ClickSpark.js

    JavaScript

    美しいパーティクルエフェクトを実装できる「ClickSpark.js」

    ClickSpark.jsは画像を用いたたくさんの粒子が放出されるよう…

  3. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  4. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP