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. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  3. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  4. jQuery Flip-Quote
  5. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  6. no-image

    JavaScript

    シンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」

    umodalはスッキリしたシンプルで美しいモーダルウィンドウを実装でき…

コメント

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

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

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP