BloggerにTwitterでの反応を表示する : たき備忘録

まだ日本では、ブログ記事に対するコメントをつけることにためらいを持つ方が多い中、Twitterの登場で記事に対して手軽に発言できるようになりました。

最近では、Twitter上でつぶやかれた各ブログ記事へのつぶやきを表示するのが流行っているようなのでこのブログも表示できるようにしてみました。以下のページを参考にさせていただきました。この場を借りてお礼申し上げます。

jQueryで言及(トラックバック)されているツイートを表示する。 http://www.webopixel.net/javascript/176.html

どうやらTopsyというサービスのAPIを利用することで実現しているようです。では実際に設置する方法を説明します。

設置方法

まず、JQueryを使う必要があるのでテンプレートの<head></head>の中に以下を記述します。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

具体的な場所は、<title>…</title>の下辺りで大丈夫です。

次に、上記参照サイト様のコードを少し変更します。変更したコードを以下に記述します。Bloggerの場合、直接Javascriptを記述するとパースエラーが発生するので//<![CDATA[//]]>でラップしてあげてください。

<script type='text/javascript'>
//<![CDATA[
<!--
(function($) {
 $(function() {
  $.getJSON("http://otter.topsy.com/trackbacks.js?url=" + document.URL + "&callback=?", function(data){ 
   var res = data.response.list;
   if(res.length == 0) {
    $("#tweet").append("<dt>つぶやきがありません。</dt>");
   } else {
    for(var i in res) {
     $("#tweet").append(
      "<dt><a href='" + res[i].author.url + "' target='_blank'><img src=" + res[i].author.photo_url+ " width='32' height='32' /> " + res[i].author.name + "</a> " + res[i].date_alpha + "</dt>" + "<dd>" + res[i].content + "</dd>"
     );
    }
   }
  });
 });
})(jQuery);
//-->
//]]>
</script>
<dl id='tweet'></dl>

最後にテンプレートから下記の記述を見つけ、その直後に上のコードを挿入します。

<div class='comments' id='comments'>

以上で設置方法は終了です。CSSでの装飾はDL要素に対して行えば反映されます。詳しくはこの記事のソースコードなどを参照してただくか、コメントを頂ければ可能な限りお答えします。

2011/8/19 追記

上のコードを挿入した場合、Bloggerのウィジェットが表示されない不具合が見つかりました。恐らくJavascriptが干渉している模様です。対処方法はDL要素以外のJavascriptの部分を”</body>”の直前に移動することによって干渉を回避できます。

たき備忘録