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バッジ?)