指定したURLを含む投稿、返信、RT等を表示するウィジェット「Twitter trackbacks widget」

2016/10/24 wordpress

シェアする

以前まではTwitterのRT等を取得するのにZENBACKを使ってましたが、読み込むまでに重かったりしたので、
なんか使い勝手のいいもの無いかな～と探してたところ、Twitter trackbacks widgetというウェジットを見つけました。

設置方法

参考サイト1に表示方法がトラック・バー、トリプル・トラック・バー、固定リストの3種類があったので、
自分は固定リストをそのまま設置（URL部分はパーマリンクを取得するようにしています）。

<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 echo the_permalink();?>'
      ,n:8
      ,show_n:0
      ,inf_tip:1
   });
});
</script>

CSSは参考サイト2を参考にしてます。

/* author img */
ul.ttw-inner span.ttw-author-img{
display:block;
width:55px;
height:55px;
margin:5px 50px 0 0;
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:25px;
}
/* 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.764em;
margin:3px 0 0;
}
ul.ttw-inner span.ttw-meta a{
color:#999999;
text-decoration:none;
}
ul.ttw-inner span.ttw-meta a:hover{
text-decoration:underline;
}
/* customize reply link */
ul.ttw-inner a.ttw-reply { }
/* customize retweet link */
ul.ttw-inner a.ttw-retweet { }
/* customize links */
ul.ttw-inner a.ttw-link { }
/* customize @user links */
ul.ttw-inner a.ttw-at { }
/* customize #hashtags links */
ul.ttw-inner a.ttw-hashtag { }
/* li's will have class that reflects users influence levels from 0 to 10 */
/* Customize tweets of users with influence levels from 0 to 10 */
li.ttw-inf-0{}
/* ...... */
li.ttw-inf-10{}
/* Customize users image with influence levels from 0 to 10 */
li.ttw-inf-0 img{}
/* ...... */
li.ttw-inf-10 img{}
/* Customize users name with influence levels from 0 to 10 */
li.ttw-inf-0 strong{}
/* ...... */
li.ttw-inf-10 strong{}

参考サイト

Twitter Trackbacks Widget – A jQuery Plugin

シェアする