Twitterのウィジェットを Movable Type に貼り付けるチュートリアル

trash-area.com ≫ blog ≫ Movable Type ≫ Twitterのウィジェットを Movable Type に貼り付けるチュートリアル

2009年03月20日 0

ここ最近のぼくのマイブームなおねーさんが困ってるそうなので
Movable Type に twitter のウィジェットを貼り付けるチュートリアルを作ってみました。

MTは 4.23 を入れてみました。 4系ならたぶんおんなじような感じじゃないでしょうか。

流れ的には
ウィジェットのコードの取得
 ウィジェットテンプレートの作成
 ウィジェットセットのカスタマイズ
と進みます。

ウィジェットのコードの取得

まずは http://twitter.com/widgets にアクセス。

「その他」をクリックして「続く」をクリックします。

flush と HTML(+javascript)の２パターンあります。
ちなみに twitter を非公開つぶやきにしてると flush バージョンだと認証を求めるダイアログが表示されます。HTML バージョンだと何も表示されません。

フラッシュ版の説明として、「フラッシュウィジェット」をクリックして「続く」をクリック。

選べるタイプが2種類ありますが、まずは Interactive widget を試してみます。

Interactive widget ではスタイルと大きさを選択できますので、ここでは「Revo」の「縦長」に変更してみました。

デザインを決めたらテキストボックスの中身をすべて選択してコピーします。
コピーした後はメモ帳にでも貼り付けておきましょう。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0" width="290" height="350" id="TwitterWidget" align="middle">
	<param name="allowScriptAccess" value="always" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#000000" />
	<param name="FlashVars" value="userID=xxxxx&styleURL=http://static.twitter.com/flash/widgets/profile/revo.xml">
	<embed src="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" quality="high" bgcolor="#000000" width="290" height="350" name="TwitterWidget" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="userID=xxxxx&styleURL=http://static.twitter.com/flash/widgets/profile/revo.xml"/>
</object>

次は、もう一個の Display-only widget を試してみます。

左下の方の Badge Color の色がついた箱をクリックすると全体的な色を変更できます。
ここでは青っぽい色にしてみました。

こちらは右の箱の中身をすべて選択してコピーします。

<div style="width:176px;text-align:center">
<embed src="http://twitter.com/flash/twitter_badge.swf"  flashvars="color1=13311&type=user&id=20071962"  quality="high" width="176" height="176" name="twitter_badge" align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br>
<a style="font-size: 10px; color: #0033FF; text-decoration: none" href="http://twitter.com/monicchi">follow monicchi at http://twitter.com</a>
</div>

つづいて、HTMLウィジェットの説明です。

HTMLウィジェットでは大まかに「つぶやき数」と「タイトル」の指定が可能です。
（※CSSを使用すればもう少しカスタマイズ可能です)

ここでは「つぶやき数」を 2、「タイトル」をついった！と変更しました。

で、ここも同じくテキストボックスの中身をコピーしておきます。

<div id="twitter_div">
<h2 class="sidebar-title">ついった！</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/monicchi" 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/monicchi.json?callback=twitterCallback2&amp;count=2"></script>

ウィジェットテンプレートの作成

ここからは MT の説明です。

ダッシュボード？から、　デザイン－ウィジェット　と進みます。

ウィジェットページが開きます。

ページ中断のウィジェットテンプレートの作成をクリックすると、「ウィジェットを作成」という画面になります。

最初のテキストボックスはウィジェットのタイトルになるのであとでわかりやすい名前をつけておきましょう。
その下のテキストボックスにはコピーしといたコードを貼り付けて「保存」をクリックします。

ここではサンプルなのでもうひとつ同じことをしています。

さて、HTML版を使うと心に決めた場合はここまでの手順に少しプラスします。

「ウィジェットの一覧」から「最近のブログ記事」等をクリックして中身を表示させてあげます。

* テンプレートとして登録されているコード

<mt:IfNonZero tag="BlogEntryCount">
    <mt:Entries lastn="10">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">最近のブログ記事</h3>
    <div class="widget-content">
        <ul class="widget-list">
        </mt:EntriesHeader>
            <li class="widget-list-item"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:IfNonZero>

* twitter が自動生成したコード

<div id="twitter_div">
    <h2 class="sidebar-title">ついった！</h2>
    <ul id="twitter_update_list"></ul>
    <a href="http://twitter.com/monicchi" 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/monicchi.json?callback=twitterCallback2&amp;count=2"></script>

比較するとなんとなくわかると思いますが、タイトルタグが h3 と h2 で異なっていたり、 CSSが　widget-header と sidebar-title だったり細々とずれがあるので、誤差を修正します。

* 修正後

<div id="twitter_div widget">
    <h3 class="sidebar-title widget-header">ついった！</h3>
    <div class="widget-content">
        <ul id="twitter_update_list" class="widget-list"></ul>
        <a href="http://twitter.com/monicchi" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
    </div>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/monicchi.json?callback=twitterCallback2&amp;count=2"></script>

このコードを修正する手順は飛ばしてもかまいませんが、やはりフラッシュ版と同じように「新規作成」からタイトルとコードの貼り付けをして「保存」します。