Tweet
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- Newer: shino.Vicunaの[あなた用のCSSを作成]を修正しました
- Older: -(ハイフン)で始まるファイルを消す方法(Linux)
Home > > ブログのトップページにWassrの発言を表示するようにした(Wassrバッジ?)
Tweet
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Home > > ブログのトップページにWassrの発言を表示するようにした(Wassrバッジ?)
Home > JavaScript > ブログのトップページにWassrの発言を表示するようにした(Wassrバッジ?)
Tweet
っというわけで、TwitterからWassrに乗り換えてみました。
まぁTwitter自体全然使ってないですけどねー。
(そもそもSNSっていうかコミュニケーションが苦手っていう…)
で、せっかくAPIも公開されてることなので、今までTwitterの発言を表示してた部分にWassrの発言を表示するようにしました。
興味のある人はどうぞー。
今回は(面倒なので)html、cssに変更を加えないのがテーマ(?)だったため、
<div id="twitter_div"><dl><dt><a href="http://wassr.jp/user/tnantoka/" id="twitter-link"><img src="http://blog.cnobi.jp/v1/blog/user/09dc80a1f21051be5f72fa57333824ae/1215330082" alt="Wassr: Do you follow me?" /></a></dt><dd><ul id="twitter_update_list"></ul></dd></dl></div>
と、ほぼ前のままでOKです。
(画像とリンクをWassrにしただけ。cssは変更なし)
WassrはJSONPに対応してるので、
<script type="text/javascript" stc="http://api.wassr.jp/statuses/show.json?id=tnantoka&callback=wassrCallback"></script>
とかやれば、
wassrCallback([{
"link":"http://wassr.jp/user/tnantoka/statuses/e6wr6C1Ebz",
"epoch":1215324666,
"user_login_id":"tnantoka",
"areacode":null,
"rid":"e6wr6C1Ebz",
"photo_url":null,
"reply_message":null,
"photo_thumbnail_url":null,
"reply_user_nick":null,
"html":"テスト",
"reply_status_url":null,
"text":"テスト",
"user":{"screen_name":"t*"},
"slurl":null,
"areaname":null
}]);
ってな感じに、発言のオブジェクトをコールバック関数に渡して呼び出してくれます。
あとはTwitterのjs等を参考に、
function wassrCallback(wassrs) {
document.getElementById('twitter_update_list').innerHTML = '<li><span>'+wassrs[0].text+'</span> <a style="font-size:85%" href="'+wassrs[0].link+'">'+parseEpoch(wassrs[0].epoch)+'</a></li>' + '<li style="text-align: right; margin-top: 5px; font-size: 85%;"><a href="http://twitter.com/tnantoka">Twitter\u306F\u3053\u3061\u3089</a></li>';
}
function parseEpoch(epoch) {
var pass = new Date / 1000 - epoch;
var s;
if (pass < 60) {
s = 'less than a minute ago';
} else if (pass < (60 * 2)) {
s = 'about a minute ago';
} else if (pass < (60 * 60)) {
s = 'about ' + parseInt(pass / 60) + ' minutes ago';
} else if (pass < (120 * 60)) {
s = 'about an hour ago';
} else if (pass < (24 * 60 * 60)) {
s = 'about ' + parseInt(pass / (60 * 60)) + ' hours ago';
} else if (pass < (48 * 60 * 60)) {
s = '1 day ago';
} else {
s = parseInt(pass / (24 * 60 * 60)) + ' days ago';
}
return s;
}
みたいな関数を用意しておけばいいだけです。
(画像、js、htmlをTwitterのバッジからそのまま流用しちゃってるので、一応Twitterへのリンクを入れておきました^^)
以上でーす。
テストとか全然してないので不具合とかあったらごめんなさい(>_<)
Home > JavaScript > ブログのトップページにWassrの発言を表示するようにした(Wassrバッジ?)