各記事のTwitterの反応を表示するTwitter Trackbacks Widgetを導入

2012/09/20
Written by: EISUKE
Category: IT

NewImage
今や、ソーシャルでの反応がアクセス数を左右している時代。
そんな中、ZenBackのようにTwitterの反応を表示したいなぁ、と思ったんです。でもZenBackは何か嫌いなので使いたくはない。そして見つけたのがTwitter Trackbacks Widgetというもの。

とりあえずこんな感じ

導入した感じはこんな感じ!TOPSYのAPIを使ってるみたいなのでZENBACKと同じですね!この投稿がTweetされてれば下の方で確認できます!
NewImage
アイコンとTweetを表示できます。反映も早いのでいいですよ!

導入方法

WordPressの場合は以下のコードを埋め込みたい所に入れるだけ。

<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:'<?php the_permalink() ?>'
      ,n:10 //表示するTweet数//
      ,show_n:0
,stay_time:8000
   ,inf_tip:1
   });
});
</script>

設定はこんな感じで出来る。

url ツイートを表示するURLを指定する。
n 表示する全件数。
show_n 一度に表示する件数。0(ゼロ)にすると表示の切り替えを停止。
stay_time 表示を切り替える秒数(ミリ秒)。
上記例だと、8秒ごと(stay_time:8000)に3件(show_n:3)ずつ順に表示し、全9件(n:9)表示する。
animate アニメーション方法。widthにすると横方向になる。
inf_only Topsyにおけるインフルエンサー(影響力のある人)のツイートの表示。1はインフルエンサーのみ、0はインフルエンサー以外も表示。
inf_tip インフルエンスレベルの表示。1は表示、0は非表示。
画像(アイコン)にマウスカーソルを合わせると influence level が10段階で表示される。

via : Twitterのツイートをページ上に表示する Twitter Trackbacks Widget、Topsy API 設置方法・仕様

表示する件数を多くしたりアニメーションで切り替えたりすると重くなるので10くらいが丁度いいと思います!
そしてCSSに以下を適用してあげる

&lt;style type=&quot;text/css&quot;&gt;
/* container */
div.twitter-trackbacks{ }
/* ul list */
ul.ttw-inner{
	padding:0;
	margin-bottom:20px;
}
ul.ttw-inner li{
	border-bottom:silver 1px dotted;
	margin:1px 0 1px 0;
	padding:5px 2px 7px 2px;
	list-style-type:none;
	position:relative;
	height:48px;
	overflow:hidden;
	width:100%;
	font-size:12px;
}
/* author img */
ul.ttw-inner span.ttw-author-img{
	display:block;
	width:48px;
	height:48px;
	margin:0 5px 0 2px;
	overflow:hidden;
	left:0;
	position:absolute;
}
/* author name */
ul.ttw-inner strong a{
	margin-right:5px;
}
/* tweet body */
ul.ttw-inner span.ttw-body {
	display:block;
	margin-left:55px;
}
/* tweet content */
ul.ttw-inner span.ttw-content{}

/* tweet meta : date, reply, retweet line */
ul.ttw-inner span.ttw-meta {
	color:#999999;
	display:block;
	font-size:0.9em;
}
ul.ttw-inner span.ttw-meta a{
	color:#999999;
	text-decoration:none;
}
ul.ttw-inner span.ttw-meta a:hover{
	text-decoration:underline;
}

div.topsy_all {
	position: relative;
	width: 750px;
}

div.topsy_text {
	position: relative;
	left: 60px;
	top: 0px;
	width: 700px;
}

img.topsy_image {
	position: absolute;
}
&lt;/style&gt;

どうですか?良い感じでしょ!
このコードは以下のサイトを参考に若干の変更を加えました。

via : Twitterのツイートをページ上に表示する Twitter Trackbacks Widget、Topsy API 設置方法・仕様


Back To Top