BloggerにTwitterでの反応を表示する Part.2

前回の記事「BloggerにTwitterでの反応を表示する」で、ブログの各記事に対するTwitter上でのつぶやきを表示する方法を書きました。しかし、前回の方法だとソースコードに直接記述しなければならないことと、カスタマイズし辛いという2点の問題がありました。

なので前回の記事で紹介したコードを、jQueryプラグイン方式にして、ソースを一部改良しました。

設置方法

まずjQueryのCoreファイルをロードするためのコードをテンプレートに追加します。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

次に、筆者が作成したjQueryプラグイン"Backtweet"をロードするためのコードを追加します。以下のファイルをダウンロードして保存し、WEBから参照可能な場所にアップロードしてください。

http://zerippe.appspot.com/libs/backtweet/1.0/backtweet.js

<script src="backtweet.js"></script>

さらに、以下のプラグインの動作設定と、ツイートを表示するDL要素をテンプレートに追加します。

<script type='text/javascript'>$(function(){$.backtweet('#backtweet').load(document.URL);});</script>
<dl id='backtweet'/>

最後に、CSSを追加します。以下のコードは最低限必要なコードですので、詳細な装飾は各自で施して下さい。

#backtweet dt{float:left;}

注意点として、CSSのFloatを制御するコードである"clearfix"を利用しているので、必ずCSSに追加しておいてください。これを忘れるとレイアウトが著しく崩れる可能性があります。

生成されるコードの形式

<dl id="backtweet">
...
<dt>
<a href="TwitterAccountURL" target="_blank">
<img src="TwitterAccountIcon" alt="TwitterAccountScreenName" width="48" height="48"/>
</a>
</dt>
<dd class="clearfix">
<p class="backtweet-header">
<span class="backtweet-author">
<a href="TwitterAccountURL" target="_blank">TwitterAccountScreenName</a>
</span>
<span class="backtweet-info">TwitterAccountName, YY/mm/dd</span>
</p>
<p class="backtweet-content">Tweet</p>
</dd>
...
...
...
</dl>