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と一緒に表示させたりすると統一感もでていい感じになりそうですね。以下からダウンロードできます。

Photoshopで範囲を選択する時に中心から範囲を指定するやり方前のページ

ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた次のページ

関連記事

  1. uploadHBR

    JavaScript

    複数の画像選択に対応したjQueryファイルアップローダー「uploadHBR」

    uploadHBRは複数の画像選択に対応したファイルアップローダーを実…

  2. no-image

    JavaScript

    レスポンシブ対応の超軽量なjQueryイメージスライダー「tinyslide」

    tinyslideはレスポンシブに対応した超軽量なイメージスライダーを…

  3. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  4. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  5. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  6. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

コメント

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

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

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP