ツイッターウィジェット
この間からツイッターの最新ツイート3件を
エントリートップに表示していますが
表示する為のhtmlソースがjsファイル読み込みに依存しており
liタグ等を強制的に使用しなければならない等
レイアウトに関しては使い勝手が悪い為に
試行錯誤を重ねて、レイアウトを公式っぽくしてみた。
具体的には、普通使っているhtmlソースでは○分前という表示ではなく英文に
その英文もツイートの後ろにそのまま連結して表示される為に
改行の場所が悪いと何とも見栄えが良くないものになるので
それらをツイッター公式と同様日本語にして
ツイートの一行下にツイート日時を表示するよう改造。
ただ、このレイアウト改変については
レイアウトが公式から拾ってくるjsファイルに依存している為
このjsファイルそのものを一度ダウンロードしてから改造する事になります。
ですからまずhttp://twitter.com/javascripts/blogger.jsから
blogger.jsファイル自体を拾ってくる必要があります。
jsファイルのソースを弄ったりと、長いので追記に掲載↓
具体的には
まず英語になってるツイート部分はjsファイルの下の方の
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
の"内英文を
return '1分以内';
} else if(delta < 120) {
return '約1分前';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + '分前';
} else if(delta < (120*60)) {
return '約1時間前';
} else if(delta < (24*60*60)) {
return '約' + (parseInt(delta / 3600)).toString() + '時間前';
} else if(delta < (48*60*60)) {
return '一日前';
} else {
return (parseInt(delta / 86400)).toString() + '日前';
と書き換えます。
こうするだけで英文だった投稿日時が見ての通り日本語になります。
次に投稿日時を改行させる等のレイアウトの改変ですが
jsファイルの上の方のツイート自体を表示させるhtml出力部分
statusHTML.push('<li><span>’+status+'</span> <a style="font-size:85%" href="http://twitter.com/’+username+’/statuses/’+twitters[i].id+'">’+relative_time(twitters[i].created_at)+'</a></li>’);
ここを
statusHTML.push('<li><span>’+status+'</span></li><li><a style="font-size:85%" href="http://twitter.com/’+username+’/statuses/’+twitters[i].id+'">’+relative_time(twitters[i].created_at)+'</a></li>’);
と、一度ツイートを表示した後にliタグを閉じてしまい、
そのまま連結されていた投稿日時を、もういっちょliタグを追加する事で改行させるようにします。
ここからはスタイルシートを使うなり、自由にレイアウトするなり
そもそもliタグを撤去して自分の好きなように表示させるよう改造すればおｋだと思います。
例えばliタグの代わりにスタイルコンテナのdivや、tableタグで整形したり
上記のstatus変数にツイートが格納されているので、これさえタグで囲めばレイアウトは思いのままです。
自分の満足する構造に改造できたら、そのjsファイルを
自分のHPにアップロードして
http://twitter.com/javascripts/blogger.jsになっていた所を
そのアップロードしたjsファイルのURLにして読み込むようにすればおｋです。
ただし、このjsファイル改造で運用していいのかは分からないので
とりあえずこういった表示の仕方もあるよって感じで。
ウチは既に運用してしまっていますが。
その他、jsファイルを弄らなくても
ある程度はスタイルシートで見栄えを変えることは出来ます。
そもそもウチのツイッターウィジェットもエントリーに似せた見た目になっていますし。
これらの改造方法については
自分のHPにツイッターのツイートを表示する
こちらのページを参照してください。
まとめてあるけど、blogにわざわざ転載するの面倒。