デザインが可愛い!最新のツイートを表示する「ClassyTwitter」

「ClassyTwitter」はツイートボックスを実装するjQueryプラグインです。特筆すべきはそのデザインのかわいらしさです。

ClassyTwitter

screenshot216

シンプルなデザインでかわいいですね。僕のフォロワー数の低さは。。。ですが。カラーはデフォルトで3種類用意されています。カスタマイズして自分の好きな色にするのもよいですね。

screenshot217

 

 

「ClassyTwitter」の実装方法はとても簡単です。まずはjQueryと2つの外部ファイルを読み込みます。

<script src="jquery.min.js"></script>
<script src="jquery.classytwitter.js"></script>
<link rel="stylesheet" href="jquery.classytwitter.default.css" />

 

HTMLはツイートボックスを配置したい箇所に以下の1行をマークアップしましょう。

<div class="twitterBox"></div>

 

JSは以下のようにコーディングします。それぞれオプションの説明をコメントでつけました。

$(document).ready(function() {
  $('.twitterBox').ClassyTwitter({
    'screenName': 'akiok_jp', //アカウント名
    'showTweets': true,       //ツイートを表示するか否か
    'perPage': 3,             //1ページあたり何ツイート表示するか
    'count': 15,              //ページ間計で何ツイート表示するか
    'auto': true,             //ページの切り替えを自動で行うか否か
    'duration': 5000          //ページの切り替えを行うスピード
  });
});

 

ブログに置くとよいアクセントになってくれるでしょう。僕はまずフォロワーを増やすところから始めてみようと思います。。。

 

Home > JavaScript > デザインが可愛い!最新のツイートを表示する「ClassyTwitter」

Return to page top