blog | roughtab

Webディレクター/デザイナーtakasyiのウェブログ。日々の出来事や関心ごと・映画・写真・フットボール・Mac・Webデザインなどを中心に日本の片隅から細々と絶賛配信中。

Twitter Trackbacks Widgetで関連するツイートを表示

Twitter Trackbacks Widget

たまには技術的なTwitterのWidgetネタでも。たまにはっつうか、初めてですがw。

Twitterにて任意のURLが含まれるツイートを表示させるTopsyのAPIを利用したjQueryのPlugin、Twitter Trackbacks Widgetを設置してみました。記事の下の方とかでよく見かけるアレですね。

簡単3ステップで設置完了

  1. javascriptを設置する。コチラのデモページのような格好で直接読みに行くか、Project Hosting on Google CodeからコードをDLしてきて自分のサーバにアップしてもいいと思います。すでにjQuery本体を使っている場合は「jquery.twittertrackbacks-1.0.min.js」だけでOKですね。
  2. 表示させたいページに組み込む。主にブログ記事のアーカイブページになるでしょうか。Movable Typeだとアーカイブテンプレートのブログ記事にコードを追加して再構築。
  3. 記事に関連したツイートやRTなどを眺めてニヤニヤする。

という具合の、ステキな簡単スリーステップで設置完了です。

Demo 3: Fixed List

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('div.my-trackbacks').twitterTrackbacks({
			url:'http://www.moretechtips.net/2009/11/twitter-trackbacks-widget-jquery-plugin.html'
			,n:8
			,show_n:0
			,inf_tip:1
		});
	});
</script>

Movable Typeの場合は上記コードのurlの部分にMTEntryPermalinkタグをぶりっと仕込めばいいわけですね。

CSSでの見た目のカスタマイズはソースを表示させてもマークアップは確認できないので、FirefoxのFirebugのような開発ツールなどで出力結果を見ながら行うと楽ちんです。基本的なマークアップは以下のような感じになります。

<div class="my-trackbacks">
<ul class="ttw-inner">
<li class="ttw-inf-0"><span class="ttw-author-img"><a href="http://twitter.com/takasyi" title="takasyi | roughtab [influence level: 0/10]"><img src="http://a0.twimg.com/profile_images/1137236056/takasyi-twitter_normal.gif" border="0" height="48" width="48"></a></span><span class="ttw-body"><span class="ttw-content">roughtab.comリニューアル ver.4.01 - blog | roughtab ›› <a class="ttw-link" href="http://bit.ly/bgdb35">http://bit.ly/bgdb35</a></span><span class="ttw-meta"><a class="ttw-date" href="http://twitter.com/takasyi/status/27845189384">2 days ago</a> - <a class="ttw-reply" href="http://twitter.com/home?status=@takasyi%20&amp;in_reply_to_status_id=27845189384&amp;in_reply_to=takasyi">reply</a> - <a class="ttw-retweet" href="http://twitter.com/home?status=RT%20%40takasyi%20roughtab.com%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%20ver.4.01%20-%20blog%20%7C%20roughtab%20%E2%80%BA%E2%80%BA%20http%3A%2F%2Fbit.ly%2Fbgdb35">retweet</a> - <a class="ttw-info" title="get Twitter Trackbacks Widget!" target="_blank" href="http://www.moretechtips.net/">.i</a></span></span></li>
</ul>
</div>

category

WebDesign

share

related articles

comments