こちらの記事を参考に設置しています。
Topsy API を使ってブログに「つぶやかれ数」を自由にレイアウトする [C!].
ヤガーさんのサイトは、いつも為になっていて楽しいです。他にもamazoの広告を張る時もヤガーさんのjavascriptを使って作成しています。
ただ、この記事のソース一部上手くいかないところがあったので、ちょっとだけソースを変更して貼り付けています。
ソースのカスタマイズなどは、ヤガーさんの記事を見てね。
僕が入れているソース
まずフッターからtopsy APIから呼び出す。
<!-- topsy --> <script type="text/javascript"> function topsyCallback(json) { res = json.response; if ( !res.total ) { return false; } html = '<span style="color:orange;">（' + res.total + ' tweets）</span>'; if ( document.getElementById('topsy_counter') ) { document.getElementById('topsy_counter').innerHTML = html; } html = '<ul style="list-style:none;margin:0 0 5px 0;padding:0;">'; for ( var i=0; i<res.list.length; i++ ) { tweet = res.list[i]; thumb = tweet.author.photo_url.replace(/(normal)\.([a-z]{3,4})$/i,'mini.$2'); author_id = tweet.author.url.replace('http://twitter.com/',''); html += '<li style="margin:0;padding:1px;font:11px/16px sans-serif;color:#333;white-space:pre;overflow:hidden;">' + '<a href="'+tweet.author.url+'" target="_blank">' + '<img src="'+thumb+'" alt="'+tweet.author.name+'"style="border:0;vertical-align:middle;width:24px;height:24px;" />' + '</a> ' + '<a href="'+tweet.author.url+'" target="_blank" style="color:#0084B4;">' + author_id + '</a> ' + tweet.content.replace(/(\r\n|\r|\n)/g,'') + '</li>'; } html += '</ul>'; if ( res.total > 10 ) { html += '<div>' + '<a href="'+res.topsy_trackback_url+'" target="_blank" style="display:inline-block;margin:0;padding:5px;font:14px/16px sans-serif;color:#0084B4;text-decoration:none;border:1px solid #CCC;background:#EEE;-moz-border-radius:5px;-webkit-border-radius:5px;">' + 'もっと読む' + '</a>' + '</div>'; } if ( document.getElementById('topsy_trackbacks') ) { document.getElementById('topsy_trackbacks').innerHTML = html; } } script = document.createElement('script'); script.type = 'text/javascript'; script.src ='http://otter.topsy.com/trackbacks.js?callback=topsyCallback&url='+encodeURIComponent(document.URL); document.getElementsByTagName('head')[0].appendChild(script); </script> <!-- topsy --> |
表示したい部分には、
<h5>この記事へのつぶやき内容</h5> <div style="margin:0 0 30px 0;padding:10px;border:1px solid #C49891;background:#FFF0ED;-moz-border-radius:10px;-webkit-border-radius:10px;"> <h4 style="margin:0 0 5px 0;padding:0;">Twitterでのつぶやかれた内容<span id="topsy_counter"></span></h4> <div id="topsy_trackbacks"></div> </div> |
このようにしています。
topsyは、以前は遅いな。。。って感じでしたが、最近は、そんなに遅くないですね。 それよりFacebookさん….（ｒｙ
参考になったでしょうか？
zenbacukも同じように出来るけど独自のものがいいよね！ってひとは、参考にどうぞ