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

2009年03月20日 0

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

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

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

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

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

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

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

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

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

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

ws000006

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

<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 を試してみます。
ws000007

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

ws000008

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

<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ウィジェットの説明です。

ws000010

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

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

ws000012

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

<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 の説明です。

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

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

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

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

ws000016

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

ws000017

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

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

ws000018

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

<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>

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

ws000019

さて、ここまでやると「ウィジェットテンプレート」の一覧に追加したものが表示されていると思います。

ws000020

ウィジェットセットのカスタマイズ


とりあえずウィジェットをサイドバーに表示してみます。
ウィジェットセットの一覧から、対象とするセットをクリックします。

ws000021

ウィジェットテンプレートの作成で作成したものが選べるようになっているのでドラッグアンドドロップで左に移動していきます。

ws000050

ws000051

最後に「変更を保存」してから「再構築」をしてください。
サイドバーに表示されるようになると思います。

ws000026

ソーシャルブックマーク
はてな Livedoor del.icio.us
関連してそうな記事
同じカテゴリーの別の記事
タグ
,
トラックバックURL
コメント

コメントをどうぞ

*反映されるまでに時間がかかることがあります。
*メールアドレスはアバターの使用に使います。