Twitter

ブログにTwitterの公式HTML版ウィジェットを設置する方法

ブログにTwitterの公式HTML版ウィジェットを設置する方法

最近、Twitterが流行ってますねー。相性が抜群なiPhoneが登場した頃位からユーザー数が一気に増えたように感じます。
そして私もその一人だったりします。笑
また、ブログ等に直近のつぶやきをリアルタイムに表示したいという方も多いのではないでしょうか。

様々なブログバーツが配布されていますが、デザインが好みじゃなかったりFlashが重かったり…。
そんな方には公式に配布されているHTML版ウィジェットがオススメです。
デザインもブログに合わせ変更できて読み込みも非常に軽いです。

コードを生成してくれるので導入は非常に簡単なのですが、メモとして以下にログを残しておきます。

まずTwitterにログイン後、http://twitter.com/badges/よりコードを入手しましょう。
上の写真のようにウィジェットの設置場所を聞かれるので、ここに項目のない人はOtherを選択して次に進みましょう。
次の画面ではFlash版かHTML版のウィジェットを選択できるので、勿論HTML版をチョイス。
表示する数とタイトルを決めたら、Get the Code内のテキストエリア内に生成されたコードをコピーし、表示したい場所に貼り付けて…以上です。実際に表示されるか確認してみましょう。

あまりに簡単で、これでは紹介するまでもないので、次はデザインの変更やカスタムのためコードを少し解説してみます。デザインの変更には少しCSSの知識が必要ですが、そのまま使うなら上記の手順だけでも問題はないですよ。

さて、受け取ったコードはこのようになっています。

<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/_atsuki" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/_atsuki.json?callback=twitterCallback2&amp;count=5"></script>

すでにid及びclassが振り分けられているので、これを利用してCSSでスタイルを整えましょう。
まあ、なんてことのない短いコードなのですがあまり詳しくない方のためにコメントを入れておきます。

<div id="twitter_div"><!-- 表示領域の大枠となるボックス -->
<h2 class="sidebar-title">Twitter Updates</h2><!-- タイトル / 削除やタグの変更可 -->
<ul id="twitter_update_list"><!-- リストが来て、ここにつぶやきが表示されます --></ul>
<a href="http://twitter.com/●●●●●" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a><!-- Twitterプロフィールページへのリンク(なぜかインラインスタイル) -->
</div><!-- ここまで表示領域の大枠となるボックス -->

<!-- 以下は処理実行用のjavascriptなので消さないように -->
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/●●●●●.json?callback=twitterCallback2&amp;count=●"></script>

因みに、4行目と9行目の最初の●●●●●には表示するユーザー名が、後半の●には表示数が入ります。
設置の手順はこれだけなので、特につまずく所はないと思います。
設置するブログのデザインに合うように細かいところはCSSでカスタムしてみてください。


2件のコメント»

  1. このブログパーツを使いたく検索でこちらにたどりつきました。
    わかりやすく、すぐに貼りつけることができました。
    どうもありがとうございました。

    コメント by shina_kuko — 2011/03/03 @ 09:18
  2. >shina_kukoさん
    Reply遅くなりましたが、コメントありがとうございました!

    コメント by 管理人 — 2011/04/24 @ 17:53

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2018 2GRAVITY All Rights Reserved. | powered by WordPress

Page top