Blogger でリツイートボタン設置に挑戦

ついでに流行りに乗っておこう!というわけで。
最近よく目にする「Twitterボタン」。
これって結構便利で、気になるブログやニュースをブックマークがわりにTwitterへポストしておく、ということをよくやります。

というわけで。
このブログの内容がそれほど有用かどうかは置いといて(つ´∀`)つ□
設置できるものならやってみよう!(ただやってみたいダケ)


■Follow me ボタンは意外と簡単

まず基本的なところから。
このブログのテンプレートは、配布サイトからいただいてきたものですが、「Follow me ボタン」が付いていました。
これは意外と簡単なもので、テンプレート編集で該当部分にFollowリンクを設置するだけなのです。
たとえばキノコの「Follow me ボタン」は、

<a href="http://www.twitter.com/kinocoro">フォローしてね</a>
と書けばOKです。
え? 当たり前過ぎるって? ご、ごもっともです。


■記事を「RT」してもらうためのボタン

Follow me ボタンが簡単なんだから、記事をRTしてもらうのも簡単なんじゃない!?
で、単純にRTさせるリンクは意外と簡単に設置できました。
が、
URLが長い……。これをどうしても短縮URLにしたい。
探してみると、いくつかの方法がありました。
今回ここで紹介するサービスが一番手軽に見えたので、さっそくやってみることに!
で、やってみたところ…、思わぬところでつまずいたり……。
ともあれ、わたしが設置したものをメモしておきます。


今回利用したのは「Topsy」というサービス。
サンプルソースをテンプレにコピペするだけで利用できます。
ただ、少し重い印象があるので、そのうち違うものにするかも…。

1.Javascriptソースを~内に追加。

<script src='http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator' type='text/javascript'/> 

2.共通設定ソースを追加。

<script type='text/javascript'>
     var topsy_nick = "kinocoro"; //自分のTwitterアカウント
     var topsy_theme = "brown"; //ボタンの色
     var topsy_style = "small"; //ボタンのサイズ
     var topsy_order = "retweet,count,badge"; //ボタンに表示する文字列
     var topsy_tweet_text = "つぶやく";
     var topsy_retweet_text = "この記事をつぶやく"; //RTボタンに表示する文字列
</script>
3.ボタンを表示させたい場所に呼び出しソースを追加。
Bloggerテンプレートレイアウト編集ページからHTML編集を開き「ウィジェットテンプレートの展開」にチェックをいれて、ボタンを表示させたい場所にソースを追加します。

<div class='topsy_widget_data' style='float: right; margin-left: 5px;'><!--
       {
           "url": "<data:post.url/>",
          "title": "<data:post.title/>",
       }
--></div>
Bloggerの場合コメントタグの記述に注意が必要です。
また、ここでべた書きしたソースはウィジェットで管理することはできませんので、テンプレートを変更すると消えてしまいます
また、詳細設定についてはソース配布元(英語)を確認してください。英語ですが、なんとなくわかると思います…。
上記設定ではブログ記事のタイトルを書き出すようにしていますが、文字によっては化けてしまうようです……。解決方法をご存知の方がいらっしゃいましたら教えてください(>_<)

0 comment:

コメントを投稿