ブログパーツ / クチコミ情報提供サービス

igosso API / Webサービスを参考にすれば、細かく設定できます。
<style type="text/css"> 
<!--
#ig_list{
 width:250px;
 padding: 1px;
 background: #51A127;
 -moz-border-radius: 8px; /* for Fx */
 -webkit-border-radius: 8px; /* for Safari */
}
.ig_title{
 padding: 10px;
 color:#FFF;
 font-size:14px;
}
.ig_igosso{
 padding: 5px 10px;
 color:#FFF;
 font-size:12px;
}
.ig_igosso a{
 color:#FFF;
}

.ig_inbody{
 height:350px;
 background: #FFF;
 overflow:auto;
 font-size:12px;
 line-height:1.5;
 padding: 10px 0 0 10px;
}
.ig_buzzlistmin{
 margin: 0 0 10px 0;
 padding: 0 0 10px 0;
 border-bottom: 1px dotted #CCC;
}
.ig_avatarareamin{
 float:left;
 width:55px;
}
.ig_buzzareamin{
 float:left;
 width:155px;
}
.ig_agree{
 color: #008000;
}
.freset {
 clear: both;
 height:1px;
}
-->
</style> 
<div id="ig_list"></div>
<script language="JavaScript">
<!--
function igossocallback(json) {
	var items = json["ResultSet"]["Result"]["comments"];
 
	var html = '<div class="ig_title">www.igosso.jpへの口コミ</div><div class="ig_inbody">';
	for(var i = 0; i < items.length; i++) {
		var elem = items[i];
		var text = '<div class="ig_buzzlistmin"><div class="ig_avatarareamin"><a href="http://www.igosso.jp/u/' + elem["uid"] + '/"><img src="' + elem["avatar_image_url"] + '" width="50" height="50" alt=""></a></div><div class="ig_buzzareamin"><a href="http://www.igosso.jp/u/' + elem["uid"] + '/"><b>' + elem["firstname"] + '</b></a></div><br class="freset"><div class="ig_body">' + elem["body"] + '<div class="ig_agree">参考になった(' + elem["approval"] + ')</div></div></div>';
 		html += text;
	}
	html += '</div><div class="ig_igosso">Powerd by <a href="http://www.igosso.jp/">igosso</a></div>';
 
	document.getElementById("ig_list").innerHTML = html;
}
//-->
</script>
<script type="text/javascript" src="http://www.igossoapi.com/urljsonp/4/5/0/igossocallback/http://www.igosso.jp"></script>
(C)AbiStudio.com