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

    JavaScript

    レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

    elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装す…

  2. Stretchy

    JavaScript

    入力した文字数に合わせて可変するフォーム実装「Stretchy」

    Stretchyは入力した文字数に合わせてボックスが伸び縮みするフォー…

  3. Switch

    JavaScript

    iOSスタイルのシンプルなチェックボックスを実装できる「Switch」

    Switchは、シンプルでパワフルなiOSスタイルのチェックボックスを…

  4. jQuery Star Flashing Effect
  5. Babylon Grid
  6. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

コメント

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

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

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP