ReTweet数を表示できるTopsyブログパーツをAmebloに張ってみたよ

2010.08.26 追記

Twitter公式ツイートボタンを設置することでも、リツイート数を表示することはできます。詳細は、「Amebloに設置していたツイートボタンをTwitter公式のものに変えました」を参照してください。

「Amebaブログに「Twitterへ投稿ボタン」を設置してみたよ」の続き。

珍しく評判が良かったこのエントリですが、単にTwitterへの投稿ボタンを設置するだけでなく、自分の記事がどれくらいTwitterへ投稿されたか、その数を確認できるTopsy のブログパーツを貼り付けてみました。

前回のエントリで投稿ボタンを貼り付けた方、すいません・・・。

シンプルな構成にしたい場合は、前回の方法のほうが組み込みも楽でよいかと思います。

で、Topsyの方ですが特にTwitter専門サービスと言うよりは、検索エンジンを提供するサービスになっています。

ただ、検索結果がTwitter検索と連動しており、集計されたTwitterへの投稿数を閲覧したり、ブログパーツとしてエントリ内に貼り付けられたりします。

こんな感じ。

※ 表示スタイルを「big」に指定した場合で、今回タイトル下に設置している形式とは異なる表示方法です。（後述）

タイトルの下に表示した場合は、こんな感じに。

前回同様に、記事一覧画面でも表示されるようになっています。

TopsyをAmebaブログに設置する方法

と言うことで本題。

詳細な設置方法に関しては、TopsyのReTweetボタンをWebサイトへを貼り付けるための解説ページも参照。

前回同様に、jQueryを利用してタイトル下にTopsyで作られるDIV要素を埋め込む形式をとってます。

が、前回と違ってテーマすぐ脇にはうまく組み込めなかったため（後述）、右寄せしてはてブボタンと合わせて表示しています。

<script>
$(document).ready(function(){
    var page_url = location.href;
    if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
        var entries = $(".newentrytitle a");
        var classname = ".updatetime";
        var flg = 0;
    } else {
        var entries = $(".foot a:contains('記事URL')");
        var classname = "div.entry .theme";
        var flg = 1;
    }
    for (i = 0; i < entries.length; i++) {
        var url = entries[i];
        if (flg == 0) {
            title = entries.eq(i).text();
        } else {
            title = $("div.entry h3.title").eq(i).text();
        }
        var hatena_btn = '<a href="http://b.hatena.ne.jp/append?' + url + '" target="_blank"><img height="12" width="16" border="0" alt="はてなブックマークに追加" src="http://b.hatena.ne.jp/images/append.gif " /></a> <a href="http://b.hatena.ne.jp/entry/' + url + '" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/' + url + '" /></a>';

        var topsy_btn = '<div class="topsy_widget_data"><!--{"url": "' + url + '", "theme": "blue"}--></div>';

        $(classname).eq(i).after('&nbsp;&nbsp;<div class="my_toolbar">&nbsp;' + topsy_btn + '&nbsp;<div class="hatena_btn">' + hatena_btn + '&nbsp;</div></div>');
    }

    $.getScript("http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator", function(){
        topsy_core_init();
    });
})
</script>

※ はてブボタンはイラネって人はhatena_btnの箇所を削り取ってください。

Topsyの動作原理は、クラスtopsy_widget_dataとして埋め込んだDIV要素内のJSON形式のデータを読み取って、TopsyのJavaScriptがReTweetボタンやReTweet数の画像を表示するようです。

urlの箇所には、エントリごとのパーマネントリンクが自動で挿入されます。

themeは、ReTweetボタンのテーマで、今回はデフォルトのblueを設定していますが、その他のカラーも設定可能です。（指定できるテーマは、TopsyのReTweetボタンをWebサイトへを貼り付けるための解説ページを参照）

また、style要素でbigを指定すれば、先ほどこのエントリ内で表示しているような大きいサイズのReTweetボタンを表示することも出来ます。（デフォルトは小さいサイズ）

var topsy_btn = '<div class="topsy_widget_data"><!--{"url": "' + url + '", "theme": "blue", "style": "big"}--></div>';

これで、めでたくTopsyのReTweetボタンがエントリごとに貼り付けられるようになるのですが、このままだとTopsyが作り出すDIV要素が邪魔をして、テーマ下に縦に並んだ形で表示されてしまいます。

ということで、今度はCSSを編集（ブログを書く＞デザインの変更＞スキンCSSの編集）します。

.entry .theme{
display:block;
/* padding:0 0 5px 0; */
/* border-bottom:1px dotted #7E8984; */
font-size: 12px;
}

#recent_entries_list li{
margin:0;
/* padding:8px 0; */
/* border-bottom: 1px dotted #7E8984; */
border:none;
}

上記では、コメントアウトしている箇所（/* この部分 */）で初期設定を無効にしています。

最初のentry及びthemeのクラスは、エントリタイトル下のテーマの箇所に該当します。

paddingで余計なスペースが生まれる部分を削除し、border-bottomでテーマすぐしたの点線を出さないようにしています。

次のrecent_entries_listのIDの箇所では、同じく余分なスペースと点線を出さないようにした上で、追加でborderを無しに設定しています。（別CSSで実践を出すように書かれているため、設定を上書きしている）

そして、最後に先ほどｊQueryで埋め込んだDIV要素とTopsyによって作られるDIV要素用のCSSを追加します。

同じく、CSSの編集画面から下記を追加しておきます。

div.my_toolbar {
display:block;
border-bottom:1px dotted #7E8984;
height:15px;
padding-bottom:20px;
vertical-align:top;
}
div.hatena_btn {
float:right;
}
div.topsy_widget_data {
float:right;
}

これで、ようやくReTweet数とボタンがテーマ下の右下に表示されるようになりました。

設置にあたって四苦八苦したこと

以下、余談。（読み飛ばし可）

まず、最初にTopsyのスクリプトを組み込むにあたって、組み込みページに書いているような、SCRIPTタグを挿入するやり方ではIEで上手く動作しませんでした。

よくよく見るとHEADタグ内に書けって書いているんですけど、AmebaにJavaScriptを組み込む際には、そのようなフリーダムなことが出来ないため、ｊQueryの$.getScript()を利用することに。

そうすると、今度はFireFoxで上手く表示されません・・・。

ってことで、TopsyのJavaScriptのソースを眺めてみると、最初に呼び出される無名関数内でtopsy_core_init関数を呼び出していたので、$.getScript()内で強制的に呼び出してみるとIEとFireFox両方で上手く表示できました。

これでめでたしめでたしと思っていると、今度はIEでReTweetボタンが自動で改行されるようなデザイン上の不具合が出てしまい（FireFoxは素直に表示される）、試行錯誤を重ねましたが今までのようなテーマ横に一直線に並べると言う形式を諦め、テーマ下にDIV要素を一つ作りfloatで強制的に右寄せして設置すると言う方法をとることにしました。

ということで、前回のTwitterボタンのときは、テーマのSPAN要素内にappendしていたものを今回はafterでSPAN要素の後に追加するという手段に変更しています。

もし、もっと綺麗に表示する方法があればご報告ください・・・。全力で真似します。

[PR]お名前.comのホームページ作成ツール★誰でも簡単にWebクリエイターに

[PR]パソコンが遅い？「PCスピードスキャンプロ」で今すぐ無料診断！

[PR]ブログではじめる新しい情報発信のカタチ「Bizlog」

AmebloにGoogle+1ボタンを設置してみたよ

Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ

Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ

AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ

Amebloに設置していたツイートボタンをTwitter公式のものに変えました

Amebaブログに「Twitterへ投稿ボタン」を設置してみたよ

GO2WEB20のTwitterバッチをAmebloにつけてみた。と、IE対策方法

Amebaで任意の位置に自動でタグを挿入するブログパーツ書いたよ

 Twitterのお気に入りをTumblrへ投稿するプログラム書いたよ

A Day In The Boy's Life

とあるエンジニアのとある1日のつぶやき。

ReTweet数を表示できるTopsyブログパーツをAmebloに張ってみたよ

TopsyをAmebaブログに設置する方法

設置にあたって四苦八苦したこと