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のタイムラインを表示させる方法
- TwitterのAPI 1.1で取得したユーザーのJSONデータからAtomフィードを作成する
- ブログ記事に対するTwitterの全ツイートを一発で見れるブックマークレット
- Twitterアプリケーションを登録する方法
- Twitterのツイートをブログに埋め込む方法
- 新しくなった公式Twitterボタン（ツイートボタン）のデザインを修正する
- Movable TypeのTwitter公式アカウントのフォロワー数が少ない件について
- TwitterユーザータイムラインフィードURL取得ツール
- Twitterの公式ツイートボタンを(X)HTML validにする方法
- WordPress/Movable Typeに公式ツイートボタンを設置する
- Twitterの1日分のツイートをブログに投稿してくれるloudtwitter
- Twitter（ツイッター）のフォロー返しのポイント
- Twitter を Google トレンドで見る
Firefoxでは出てくるのですが
ieではソースには存在するのですがブラウザ上では出てきませんでした。
はじめまして、creative space DiDiのDeachと申します。
私もTopsyを自己のBLOGに導入しようと、当ページを参考にさせていただきました。
誠にありがとうございます。
1点気になったのですが、
JSONの形式で
{
"url": "記事のURL",
"title": "記事タイトル",
"nick": "Twitterのユーザ名",
}
最後のカンマを取らなければIEではevalでエラーになると
思います。
実際に試したところやはりカンマがつくとエラーが発生しました。
一応ご報告までに。
＞kazさん
こんばんは。
ご質問の件ですが、Deachさんの対処をお試し頂けますでしょうか。
それではよろしくお願い致します。
＞Deachさん
こんばんは。
ご報告ありがとうございました。助かりました！
記事およびサンプルは修正致しました。
: June 17, 2010 12:20 AM
