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

今や、ソーシャルでの反応がアクセス数を左右している時代。

そんな中、ZenBackのようにTwitterの反応を表示したいなぁ、と思ったんです。でもZenBackは何か嫌いなので使いたくはない。そして見つけたのがTwitter Trackbacks Widgetというもの。

とりあえずこんな感じ

導入した感じはこんな感じ！TOPSYのAPIを使ってるみたいなのでZENBACKと同じですね！この投稿がTweetされてれば下の方で確認できます！



アイコンと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>

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

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

表示する件数を多くしたりアニメーションで切り替えたりすると重くなるので１０くらいが丁度いいと思います！

そしてCSSに以下を適用してあげる

<style type="text/css">
/* 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;
}
</style>

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

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

JavaScript & jQueryレッスンブック―最新jQuery対応

posted with カエレバ

大津 真 ソシム 2011-12

Amazon

楽天市場

• 
• ツイート
•