「Twitter」プラグインの使い方

ウェブサイトに「Twitter」ウィジェットを追加するスクリプトです。「Twitter.com」の自分のアカウント上のメッセージがサイトに表示されます。

javascript

スクリプトを正常に動作させるためにウィジェットを含むhtmlファイルに以下のように記述し、jquery.twitter.search.jsと、blogger.js、jQueryのフレームワークを参照させます。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/jquery.twitter.search.js"></script>
<script type="text/javascript" src="js/blogger.js"></script>

<head>タグ内にはスクリプトの機能を基本の値で初期化するため以下のような記述が含まれています。

$j(document).ready(function(){
    ($j(&quot;#twitter&quot;).getTwitter({
        userName: &quot;lorem_ipsum_dol&quot;,
        numTweets: 1,
        loaderText: &quot;Loading tweets...&quot;,
        slideIn: true,
        showHeading: true,
        headingText: &quot;Latest Tweets&quot;,
        showProfileLink: true
    });
})

スクリプトを「twitter」のidの<div>要素で初期化しています。上記のスクリプトの属性は以下のような値を定義しています。

  • userName – Twitterのアカウント名;
  • numTweets – ウィジェット上に表示するメッセージの数;
  • loaderText – ウィジェット読み込み時に表示するテキスト;
  • slideIn – メッセージをスライドして表示する切り替え効果のon/off;
  • showHeading – 見出しの表示の有無;
  • headingText – 見出しのテキスト;
  • showProfileLink – Twitterアカウントへのリンクの表示の有無

html

以下にhtmlの記述例を示します。

&lt;/pre&gt;
&lt;div class=&quot;twitter&quot; id=&quot;twitter&quot;&gt;&lt;/div&gt;
&lt;pre&gt;

上記のように、ウィジェットは「twitter」というidとクラスの両方を持った<div>タグひとつで構成されています。

css

メインとなる「style.css」には以下のようにスクリプトに関連したスタイルが記述されています。以下のスタイルを変更します。

div#twitter {
    width: 20em;
    margin-bottom: 2em;
    border: 1px solid #888;
}
div#twitter h2 {
    margin: 0;
    padding: 0.4em 1em;
    font-size: 1.1em;
    color: #fff;
    background-color: #888;
}
p#preloader {
    margin: 0;
    padding: 1em 1em 1em 3em;
}
ul#twitter_update_list {
    margin: 0;
    padding: 0 1em 0.5em 1em;
    list-style-type: none;
}
ul#twitter_update_list li {
    margin: 0;
    padding: 0.8em 0 1em 0;
    border-bottom: 1px solid #ccc;
}
ul#twitter_update_list li a {
    /*投稿日時の文字色*/
    color: #f00;
}
ul#twitter_update_list li span {
    display: block;
}
ul#twitter_update_list li span a {
    /*ツイート内のリンクの文字色*/
    color: #00f;
}
ul#twitter_update_list li.firstTweet {
}
ul#twitter_update_list li.lastTweet {
    border-bottom: none;
}
a#profileLink {
    display: block;
    padding: 0.3em 1em;
    color: #fff;
    background-color: #888;
}

Comments are closed.