Blogger に Twitter の つぶやく ボタンを設置

Topsy の retweet ボタン

Topsy via kwout

以前、「A-Liaison BLOG: Bloggerにretweetボタンを付ける方法」 を参考に Twitter のリツイートボタンをつけた。これに対して、”[を] Topsy はじめました” では検索エンジン TOPSY が用意している retweet ボタンが紹介されていた。今回はこちらを試してみることに。

ところで Topsy と言えば、

Topsyは普通の検索エンジンだ。しかしこのサービスは検索結果を得るのに根本的に新しいターゲットを利用している。Twitterユーザーだ。

3 千万のTwitterユーザーは全体として巨大なコンテンツ発見マシンとして機能する。

(Twitter検索エンジン、Topsyがローンチ―重要性の尺度はTwitterでReTweetされた回数 より)

という記事ではじめて知った。Topsy を使って site 検索をして、ブログに対してつぶやかれた内容を見ることに使える。 ( ex. site:jutememo.blogspot.com – Topsy )

 

ボタンの設定

以下のように、茶色で小さく 「つぶやく」 と表示させたいとする。

まずは、Blogger のダッシュボードよりテンプレートを編集できる状態にする。

“Topsy Labs » Topsy Retweet Button for Web Sites” の説明に従い、head 要素内に

• ボタンの設定情報
• retweet ボタンを表示するための JavaScript ライブラリ

を読み込むコードを挿入。

<script type="text/javascript">
     var topsy_nick = "Twitterのユーザ名";
     var topsy_theme = "色";
     var topsy_style = "small";
     var topsy_order = "retweet,count,badge";
     var topsy_tweet_text = "つぶやく";
     var topsy_retweet_text = "つぶやく";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>

色の指定は以下から選ぶ。

Topsy Labs » Topsy Retweet Button for Web Sites via kwout

ボタンを大きなサイズにしたければ、topsy_style を big に。

デフォルトではリツイートされてない記事の場合、ボタンには`tweet’ と表示され、リツイートされたものは `retweet’ と表示される。日本語でどちらも 「つぶやく」と表示したいので、

• topsy_tweet_text
• topsy_retweet_text

を 「つぶやく」 とそれぞれ設定。

 

ボタンの表示

次にボタンを表示したい位置に以下のコードを貼り付ける。

<div class="topsy_widget_data">&lt;!--
    {
        "url": "<data:post.url/>",
        "title": "<data:post.title/>"
    }
--&gt;</div>

気をつけるのは、Twitter の Follow me のバッジを付けたときと同じく、script タグ内の < > を HTML の特殊文字 に置き換えること。

url と title に設定してある data タグは Blogger に固有の設定で、レイアウト データ タグ の posts を参照。これにより、Twitter に貼り付けられる記事の URL とタイトルが設定される。

表示の位置を微調整したい場合は、上記の div タグに style 属性を追加。例えば、ボタンを左の要素に対してやや間を空け、右に寄せて配置したい場合、

 style="float:right;margin-left:10px;"

を追加。

 

Blogger のテンプレートにおけるボタンの表示位置

ボタンを記事のタイトルの右側に表示したい場合、上記のボタン表示用のコードを

<h3 class='post-title entry-title'>

の要素の中の末尾に置く。

記事の末尾に置く場合は、

<div class='post-footer'>

の要素の中に配置。