TopsyでTwitterのRT数とretweetボタンを表示する

TopsyでTwitterのRT数とretweetボタンを表示する

Posted at June 14,2010 1:55 AM
Tag:[Topsy, Twitter]

Twitterの検索エンジン、Topsyが提供するTopsy Retweet Button for Web Sitesを使って、ブログなどの記事にRT数とretweetボタン(Topsy Retweet Button)を表示する方法を紹介します。

Topsy Retweet Button

このブログでも各記事ページの右上に表示しています(2010年6月現在)。

1.Topsy Retweet Buttonの機能

数字の部分をクリックすれば、記事のRT一覧を表示します。

RT一覧

「retweet」をクリックすれば、その記事のretweet用の記事タイトル・URLをTwitterのページに表示します。

Twitterのページ

以下、一般的な設定方法と、Movable Typeに設置する場合の設定例の2つを紹介します。

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>

このような表示になります。

Topsy Retweet Button

3.RTをクリックしたときのユーザ名を変更する

2項で設定したボタンの「retweet」をクリックすると、Twitterに次のようなRTが表示されます。

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>

とします。これで次のような表示に変更されます。

RT(変更後)

4.ボタンのスタイルを変更する

ボタンを大きくする場合は、JSONデータに「style」を追加します。値は「big」です。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザ名",
        "style": "big"
    }
--></div>

これで次のようなスタイルに変更されます。

ボタンのスタイルを変更

5.ボタンのテーマを変更する

ボタンのテーマ(配色)を変更するには、JSONデータに「theme」を追加します。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザ名",
        "style": "big",
        "theme": "テーマ名"
    }
--></div>

テーマ名は「Topsy Retweet Button for Web Sites」にある次の一覧を参考にしてください。

ボタンのテーマを変更

6.アーカイブページに表示する

アーカイブページなど、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>

7.注意事項

JSONデータの、途中のデータの末尾にカンマを付け忘れると正常に表示されないので注意しましょう。また、最後のデータにカンマをつけるとIEで正常に動作しません。

2010.06.17
IEで正常に動作するよう、各サンプルを修正し、7項の記述を修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

Firefoxでは出てくるのですが
ieではソースには存在するのですがブラウザ上では出てきませんでした。

[1] Posted by kaz : June 15, 2010 2:53 PM

はじめまして、creative space DiDiのDeachと申します。

私もTopsyを自己のBLOGに導入しようと、当ページを参考にさせていただきました。
誠にありがとうございます。

1点気になったのですが、
JSONの形式で
{
"url": "記事のURL",
"title": "記事タイトル",
"nick": "Twitterのユーザ名",
}

最後のカンマを取らなければIEではevalでエラーになると
思います。

実際に試したところやはりカンマがつくとエラーが発生しました。
一応ご報告までに。

[2] Posted by Deach : June 15, 2010 6:02 PM

>kazさん
こんばんは。
ご質問の件ですが、Deachさんの対処をお試し頂けますでしょうか。
それではよろしくお願い致します。

>Deachさん
こんばんは。
ご報告ありがとうございました。助かりました!
記事およびサンプルは修正致しました。

[3] Posted by yujiro logo : June 17, 2010 12:20 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)