TopTwitter > 2010年6月
2010年6月14日

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

June 14,2010 1:55 AM
Tag:[, ]
Permalink

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項の記述を修正しました。

Comments [3] | Trackbacks [0]
2010年6月 3日

Twitterの1日分のツイートをブログに投稿してくれるloudtwitter

June 3,2010 1:55 AM
Tag:[, ]
Permalink

Twitterの1日分のツイートをブログに投稿してくれる、loudtwitterの紹介です。以下、設定方法です。設定内容は後で変更することができます。

loudtwitterのページにアクセスし、ブログのURLを入力して、「Yes, this is my blog」をクリックします。

loudtwitterのページ

文章の右下にある「signup!」のリンクをクリックします。

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サービスパスワード」が該当します。

Atom APIのエンドポイントURI

「Twitter name:」に投稿したいTwitterのユーザー名を入力します。

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でログインする場合の設定画面です。入力は必須ではありません。

OpenIDでログインする場合の設定

設定したメールアドレスに確認メールが届くので、そこに記述されたactivation codeを次の画面に入力するか、メールに表示されたURLをクリックします。

確認メール

これで設定完了です。「Try it out, now」のリンクをクリックすれば、テスト投稿を行う画面に遷移するので、すぐに確認することができるようです。

設定完了

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3