ブログを見ると、よく「この記事についてツイートされている数」を示すカウンタが付いていることがあります。この数を見ることで、ある記事が Twitter 上でどの程度関心を持たれているか測定することができます。例えば下の写真のようなカウンタです。
このブログでは、今まで左の「TweetMeme」を使っていたのですが、今日から真ん中の「Topsy」に変えました。理由はいくつかあります。
実は Topsy に変える前に、画像の一番右の Teetbuzz も試してみました。
これはデザイン的には「はてなブックマーク」のカウンタと似ているので、はてブのカウンタと並べるときれいです。しかしツイートの拾い漏れが目立ったのと、あまりに広告が多いので止めました。
ただし、Topsy は「リツイート」ボタンを押すと Twitter に記事タイトルなどを渡すのですが、私が使っている Livedoor ブログでは文字化けを起こしてしまいます。あと、最初にツイートした人の短縮 URL が自動的に入る（まさに「リツイート」）など、やや使い勝手が悪い部分もあるので、いくつかカスタマイズしました。
Topsy のカウンタ+ボタンの設置方法の説明はこちらにあります。
Topsy Retweet Button for Web Sites
http://labs.topsy.com/button/retweet-button/
ただ英語なので、簡単に解説を書きます。
◆手順 1： JavaScript ライブラリをインクルードする
head タグのセクションに、script タグの要素を置きます。実際の要素は上記のリンク先からコピーしてください。
◆手順 2： ボタンを設定する
div タグの要素をブログに置きます。こちらも実際の要素は上記のリンク先からコピーしてください。デフォルトで、ボタンは小サイズの方です。
ここで指定が必須となるのは、記事の URL です。注意が必要なのは、恐らくほとんどのブログで、記事 URL は変数を使って取得することになる点です。例えば Livedoor ブログでは、記事の URL は「http://blog.nishinos.com/archives/2842760.html」のような生の URL ではなく、「<$ArticlePermalink$>」のような変数を使います。
◆手順 3： カスタマイズする
Topsy は次の形式で設定を変更できます：
"設定項目": "設定内容"
上記のように、必須なのは記事の URL だけです。これ以外はオプションで、次の設定項目があります。
title
ツイート時のタイトル。ただし日本語は文字化けする可能性あり。
shorturl
誰かがすでに短縮 URL を作成している場合はそれが入るが、ここでそれを上書きできる。
theme
テーマというか、デザイン。「silver」や「red」など複数あるので、Topsy のサイトを確認すること。
nick
ツイート時にデフォルトで「TopsyRT」と挿入されるが、それを上書きできる。@ を除いた Twitter 名（つまりニックネーム）を入れるのが普通か。
style
デフォルトは小サイズのボタンだが「big」とすることで大きなボタンになる。
order
ボタン、ツイート数、バッジ（トップ100など）の表示順を指定。デフォルトは「count,retweet,badge」なので、これを入れ替える
tweet_text
誰もツイートしていないときのボタン表示。デフォルトは「tweet」なので、好みでこれを「ツイート」などとする（この機能は動作してない？）。
retweet_text
リツイートボタンの表示。デフォルトは「retweet」なので、「リツイート」など好きな文字で上書きする。
streaming
カウンターを自動的に更新する。デフォルトは「off」なので必要なら「on」にする。
shorturl_service
短縮 URL サービスを使う場合に指定。現在は「bit.ly」のみ。以下の 2 項目も設定する。
shorturl_user
使う短縮 URL サービスのユーザー名。
shorturl_auth
使う短縮 URL サービスのパスワード（セキュリティには十分気をつけてください）。
私はいろいろとカスタマイズして、以下のようにしました。あえて何も設定しない項目には半角スペースを入れてあります。また、$ マークの変数は Livedoor ブログのものなので、ご使用のブログに適したものを使ってください。
誰かが私のブログ記事で「リツイート」ボタンを押すと、Twitter でこのように表示されます。つまり、記事 URL のみが挿入されます。
注：この情報は記事執筆時点のものです。またカスタマイズはご自身の責任で行なってください。特にパスワードなどがかかわる部分については注意してください。
このブログでは、今まで左の「TweetMeme」を使っていたのですが、今日から真ん中の「Topsy」に変えました。理由はいくつかあります。
- TweetMeme は 8 日以上前のツイートを収集しない
- TweetMeme は 要素（ボタンやカウンタ）の配置やデザインを変えられない
- TweetMeme は自動翻訳がおかしい（ボタン上にマウスを置くと「リツイートこの」と出る。「Tweet this」の機械翻訳らしい）
- Topsy は広告がなくてすっきりしている
実は Topsy に変える前に、画像の一番右の Teetbuzz も試してみました。
これはデザイン的には「はてなブックマーク」のカウンタと似ているので、はてブのカウンタと並べるときれいです。しかしツイートの拾い漏れが目立ったのと、あまりに広告が多いので止めました。
ただし、Topsy は「リツイート」ボタンを押すと Twitter に記事タイトルなどを渡すのですが、私が使っている Livedoor ブログでは文字化けを起こしてしまいます。あと、最初にツイートした人の短縮 URL が自動的に入る（まさに「リツイート」）など、やや使い勝手が悪い部分もあるので、いくつかカスタマイズしました。
Topsy のカウンタ+ボタンの設置方法の説明はこちらにあります。
Topsy Retweet Button for Web Sites
http://labs.topsy.com/button/retweet-button/
ただ英語なので、簡単に解説を書きます。
◆手順 1： JavaScript ライブラリをインクルードする
head タグのセクションに、script タグの要素を置きます。実際の要素は上記のリンク先からコピーしてください。
◆手順 2： ボタンを設定する
div タグの要素をブログに置きます。こちらも実際の要素は上記のリンク先からコピーしてください。デフォルトで、ボタンは小サイズの方です。
ここで指定が必須となるのは、記事の URL です。注意が必要なのは、恐らくほとんどのブログで、記事 URL は変数を使って取得することになる点です。例えば Livedoor ブログでは、記事の URL は「http://blog.nishinos.com/archives/2842760.html」のような生の URL ではなく、「<$ArticlePermalink$>」のような変数を使います。
◆手順 3： カスタマイズする
Topsy は次の形式で設定を変更できます：
"設定項目": "設定内容"
上記のように、必須なのは記事の URL だけです。これ以外はオプションで、次の設定項目があります。
title
ツイート時のタイトル。ただし日本語は文字化けする可能性あり。
shorturl
誰かがすでに短縮 URL を作成している場合はそれが入るが、ここでそれを上書きできる。
theme
テーマというか、デザイン。「silver」や「red」など複数あるので、Topsy のサイトを確認すること。
nick
ツイート時にデフォルトで「TopsyRT」と挿入されるが、それを上書きできる。@ を除いた Twitter 名（つまりニックネーム）を入れるのが普通か。
style
デフォルトは小サイズのボタンだが「big」とすることで大きなボタンになる。
order
ボタン、ツイート数、バッジ（トップ100など）の表示順を指定。デフォルトは「count,retweet,badge」なので、これを入れ替える
tweet_text
誰もツイートしていないときのボタン表示。デフォルトは「tweet」なので、好みでこれを「ツイート」などとする（この機能は動作してない？）。
retweet_text
リツイートボタンの表示。デフォルトは「retweet」なので、「リツイート」など好きな文字で上書きする。
streaming
カウンターを自動的に更新する。デフォルトは「off」なので必要なら「on」にする。
shorturl_service
短縮 URL サービスを使う場合に指定。現在は「bit.ly」のみ。以下の 2 項目も設定する。
shorturl_user
使う短縮 URL サービスのユーザー名。
shorturl_auth
使う短縮 URL サービスのパスワード（セキュリティには十分気をつけてください）。
私はいろいろとカスタマイズして、以下のようにしました。あえて何も設定しない項目には半角スペースを入れてあります。また、$ マークの変数は Livedoor ブログのものなので、ご使用のブログに適したものを使ってください。
<div class="topsy_widget_data" style="float: right;"><!-- {
"url": "<$ArticlePermalink$>",
"title": "<$ArticlePermalink$>",
"shorturl": " ",
"nick": " ",
"order": "retweet,count,badge",
"theme": "light-blue",
"retweet_text": "リツイート"
} --></div>
誰かが私のブログ記事で「リツイート」ボタンを押すと、Twitter でこのように表示されます。つまり、記事 URL のみが挿入されます。
注：この情報は記事執筆時点のものです。またカスタマイズはご自身の責任で行なってください。特にパスワードなどがかかわる部分については注意してください。
Comment
コメントする