※2013年6月25日、TwitterのAPI1.0の廃止に伴い、最新ツイート一覧を表示するツールの提供を終了しました。
以降はTwitter公式の埋め込みタイムラインのご利用をおすすめいたします。
ウイジェットの作成と管理>「新規作成」>「検索ウィジェットを作成する」より、「検索クエリ」をブログタイトルなどに設定してご利用ください。
ウィジェット-Twitter
※現在のTwitterの仕様上、検索クエリをページごとに変えることはできません。


記事について言及されたツイート(記事のURLを含むツイート)の一覧を表示するツールを設置することができます。ツイートは最大40件表示され、それ以上のツイートがある場合はTwitter検索へのリンクが表示されます。

Twitterの仕様により、表示されるツイートは最近6~9日分に限られます。

設置イメージ

設置イメージ

設置方法

マイページ」から「ブログ設定」へ進み、「PC」の「カスタマイズ」で「個別記事ページ」のテンプレート内で、以下のコードを設置したい場所に貼り付けます。
<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/official/tweets/tweets.js" charset="UTF-8"></script>

詳しい解説

HTML構造は以下の通りです。
<div id="tweetlist">
<div id="tl-title">
<h3>最新ツイート</h3>
<a href="(ツイート用URL)" class="tl-button" target="_blank">ツイートする</a>
</div>
<div id="tl-content">
<ul>
<li>
<div class="tl-info">
<a href="(ユーザページURL)" target="_blank">
<img src="(プロフィール画像)" width="48" height="48" />
<span class="tl-name">(ユーザ名)</span>
<span class="tl-nick">@(ユーザID)</span>
</a>
<a href="ツイートURL" target="_blank">
<span class="tl-time">(ツイート日時)</span>
</a>
</div>
<div class="tl-tweet">(ツイート内容)</div>
</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<div id="tl-more">
<a href="(検索ページURL)" target="_blank">
<img src="http://parts.blog.livedoor.jp/js/official/tweets/more.gif" width="87" height="17" alt="もっと見る" />
</a>
</div>
</div>

カスタマイズ例

CSSで横幅を調整する
#tweetlist{ width:600px; margin:0 20px; }
ツイート表示領域を調整する
#tl-content ul { max-height:600px !important; }

補足

  • 表示するツイートがなかった場合は<div id="tl-content"></div>内は「<div class="tl-notweet">ツイートはありません</div>」に差し替わります。
  • ツイート内容にブログタイトル、記事タイトル、URLが含まれる場合は、「<span class="low"></span>」で囲われ、初期状態では灰色で表示されます。
  • CSSは以下のものを読み込んでいます。カスタムする際に参考にしてください。
    http://parts.blog.livedoor.jp/js/official/tweets/tweets.css