TopsyでTwitterのRT数とretweetボタンを表示する
Twitterの検索エンジン、Topsyが提供するTopsy Retweet Button for Web Sitesを使って、ブログなどの記事にRT数とretweetボタン（Topsy Retweet Button）を表示する方法を紹介します。
このブログでも各記事ページの右上に表示しています（2010年6月現在）。
１．Topsy Retweet Buttonの機能
数字の部分をクリックすれば、記事のRT一覧を表示します。
「retweet」をクリックすれば、その記事のretweet用の記事タイトル・URLをTwitterのページに表示します。
以下、一般的な設定方法と、Movable Typeに設置する場合の設定例の2つを紹介します。
２．基本設定
まず、次のスクリプトを、<head>～</head>の間に設定します。
<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>次に、各記事ページの任意の位置に以下のスクリプトを設定します。class名が「topsy_widget_data」のdiv要素の中にHTMLコメントをつけたJSONデータ形式で、url（記事のURL）とtitle（記事のタイトル）を設定します。
<div class="topsy_widget_data"><!--
{
"url": "記事のURL",
"title": "記事のタイトル"
}
--></div>Movable Type の場合は、ブログ記事アーカイブテンプレートに次の内容で設定します。
<div class="topsy_widget_data"><!--
{
"url": "<mt:EntryPermalink />",
"title": "<mt:EntryTitle />"
}
--></div>このような表示になります。
３．RTをクリックしたときのユーザ名を変更する
２項で設定したボタンの「retweet」をクリックすると、Twitterに次のようなRTが表示されます。
ただし、これではユーザー名が「@TopsyRT」になっているので、これを自ユーザー名に変更します。ユーザー名を変更するには、JSONデータに「nick」を追加します。
<div class="topsy_widget_data"><!--
{
"url": "記事のURL",
"title": "記事タイトル",
"nick": "Twitterのユーザ名"
}
--></div>「@yujiro」を表示させたい場合は
<div class="topsy_widget_data"><!--
{
"url": "記事のURL",
"title": "記事タイトル",
"nick": "yujiro"
}
--></div>とします。これで次のような表示に変更されます。
４．ボタンのスタイルを変更する
ボタンを大きくする場合は、JSONデータに「style」を追加します。値は「big」です。
<div class="topsy_widget_data"><!--
{
"url": "記事のURL",
"title": "記事タイトル",
"nick": "Twitterのユーザ名",
"style": "big"
}
--></div>これで次のようなスタイルに変更されます。
５．ボタンのテーマを変更する
ボタンのテーマ（配色）を変更するには、JSONデータに「theme」を追加します。
<div class="topsy_widget_data"><!--
{
"url": "記事のURL",
"title": "記事タイトル",
"nick": "Twitterのユーザ名",
"style": "big",
"theme": "テーマ名"
}
--></div>テーマ名は「Topsy Retweet Button for Web Sites」にある次の一覧を参考にしてください。
６．アーカイブページに表示する
アーカイブページなど、1つのページに複数の記事があり、その記事ごとにボタンを表示する場合、<head>～</head>の間に次のように記述することで、nick、style、themeをひとまとめに定義することができます。変数名は変更しないでそのまま使ってください。
<script type="text/javascript" id="topsy_global_settings">
var topsy_theme = "テーマ名";
var topsy_style = "big";
var topsy_nick = "Twitterのユーザ名";
</script>こうしておけば、記事別の設定は次の内容だけでOKです。
<div class="topsy_widget_data"><!--
{
"url": "記事のURL",
"title": "記事タイトル"
}
--></div>７．注意事項
JSONデータの、途中のデータの末尾にカンマを付け忘れると正常に表示されないので注意しましょう。また、最後のデータにカンマをつけるとIEで正常に動作しません。
2010.06.17
IEで正常に動作するよう、各サンプルを修正し、７項の記述を修正しました。
Twitterの1日分のツイートをブログに投稿してくれるloudtwitter
Twitterの1日分のツイートをブログに投稿してくれる、loudtwitterの紹介です。以下、設定方法です。設定内容は後で変更することができます。
loudtwitterのページにアクセスし、ブログのURLを入力して、「Yes, this is my blog」をクリックします。
文章の右下にある「signup!」のリンクをクリックします。
「Atom API endpoint url:」にAtom APIのエンドポイントURIを入力します。Movable Typeであれば、
http://user-domain/mt/mt-atom.cgi/weblog/blog_id=1のようになります。キャプチャ画面は「weblog」の部分が「1.0」になっていますがWSSE認証が必要となるので、レガシーなエンドポイントの「weblog」の方がよいかもしれません。
また、数字の部分はブログIDになるので、投稿したいブログのブログIDを設定します。「Username」「Password」は、Atom APIを利用するユーザーとパスワードを設定します。Movable Typeであれば、パスワードは、ユーザー情報編集画面にある「Webサービスパスワード」が該当します。
「Twitter name:」に投稿したいTwitterのユーザー名を入力します。
各種情報を設定します。設定項目の意味は次の通りです。
- your name: 名前を入力します（必須ではありません）。
- post time: Twitterのツイートをブログに投稿する時間を設定します。
- post title: 投稿時のブログ記事タイトルを設定します。
- Style of post: 投稿したときのツイートのスタイルです。「Bullet list」はul要素/li要素、「Paragraph」はp要素で投稿します。チェックボックスで各情報の表示・非表示を決めます。
- text to add at the beginning of the post: ブログ記事の先頭に挿入するテキストがあれば設定します。
- text to add at the end of the post: ブログ記事の最後に挿入するテキストがあれば設定します。
メールアドレスとログイン時のパスワードを入力します。OpenIDでログインしたい場合は、右側の「click-here」をクリックします。
OpenIDでログインする場合の設定画面です。入力は必須ではありません。
設定したメールアドレスに確認メールが届くので、そこに記述されたactivation codeを次の画面に入力するか、メールに表示されたURLをクリックします。
これで設定完了です。「Try it out, now」のリンクをクリックすれば、テスト投稿を行う画面に遷移するので、すぐに確認することができるようです。
