Twitter登録でサイドバーにJSONP
噂のTwitterにサインアップしたので、Twitter API Wikiに基づき、本ブログのサイドバーにつぶやきを取得するJSONP + JavaScriptのコードを追加した。
ついでに、同サイドバーのZorg（写真共有サービス）のZorg Doorという公式ブログパーツをGoogle AJAX Feed APIのJSONP + JavaScriptのコードに変更するとともに、Simpy（ソーシャルブックマークサービス）の取得コードも過去記事の方法から同コードに変更した。
function RecentImg(data1) { //Google AJAX Feed APIで変換されたZorgのフィードのJSONPをHTML化
if(data1.responseData.feed.entries.length) {
var img = new Array();
var zorg = data1.responseData.feed;
for(i in zorg.entries) {
img.push('<a href="' + zorg.entries[i].link + '" target="_blank"><img src="' + zorg.entries[i].content.match(/http:\/\/.+\.jpg/i) + '" alt="' + zorg.entries[i].title + '" width="80" /></a>');
} //1行上のwidthの値は適宜調整
document.getElementById('zorg').innerHTML = img.join('');
} else {
document.getElementById('zorg').innerHTML = 'No image';
}
}
function RecentTwitter(data2) { //Twitter APIのJSONPをHTML化
if(data2.length) {
var tweet = new Array();
for(i in data2) {
tweet.push('<li><a href="https://twitter.com/' + data2[i].user.screen_name + '/statuses/' + data2[i].id + '" target="_blank">' + data2[i].text + '</a></li>');
}
document.getElementById('twitter').innerHTML = tweet.join('');
} else {
document.getElementById('twitter').innerHTML = 'No tweet';
}
}
function RecentSimpy(data3) { //Google AJAX Feed APIで変換されたSimpyのフィードのJSONPをHTML化
if(data3.responseData.feed.entries.length) {
var bookmark = new Array();
var simpy = data3.responseData.feed;
for(i in simpy.entries) {
bookmark.push('<li><a href="' + simpy.entries[i].link + '" title="' + simpy.entries[i].contentSnippet + '" target="_blank">' + simpy.entries[i].title + '</a></li>');
}
document.getElementById('simpy').innerHTML = bookmark.join('');
} else {
document.getElementById('simpy').innerHTML = 'No bookmark';
}
}<div class="links">
<p><a href="http://www.zorg.com/photo/mhiro/" target="_blank">Photos@Zorg</a></p>
<div id="zorg" align="center">......Loading</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/services/feed/load?q=http%3a%2f%2fwww%2ezorg%2ecom%2frss%2frss_photol%3fc%3diijppoontp&v=1.0&num=6&callback=RecentImg" charset="UTF-8"></script>
<dl>
<dt><a href="http://twitter.com/hogehoge" target="_blank">Tweets@Twitter</a></dt>
<dd>
<ul id="twitter"><li>......Loading</li></ul>
</dd>
</dl>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/hogehoge.json?count=5&callback=RecentTwitter"></script>
<dl>
<dt><a href="http://www.simpy.com/user/hiro_akihabara" target="_blank">Bookmarks@Simpy</a></dt>
<dd>
<ul id="simpy"><li>......Loading</li></ul>
</dd>
</dl>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/services/feed/load?q=http%3a%2f%2fwww%2esimpy%2ecom%2frss%2fuser%2fhiro_akihabara%2flinks%2f&v=1.0&num=5&callback=RecentSimpy" charset="UTF-8"></script>
1段目が外部JavaScriptファイルに記述したコードで、2段目以後がSerene Bachのテンプレートのサイドバー部分に記述したコード。
2段目以下の太字部分のうち数字は取得数で、その他太字部分は俺のIDなので、適宜書き換えればオケ。
ところでJSONPってよくわからないが、取得できているんだからいいに違いない。
少なくとも、Google AJAX Feed APIのAPIキーやZorgのFlashからようやくオサラバできただけよしとしよう。
[2010年2月1日追記]
主にTwitter関係のコードを一部変更。
また、Google AJAX Feed APIのJSONP、EUC-JPでエンコードされたウェブページ及びIE6の組合わせの場合、script要素にcharset="UTF-8"の属性を付けなければ動作しないらしいので、そのコードも修正。
特にTwitter関係はまだまだ手を加えるの予定なので、まとまったら後日記事にするつもりであり、今サイドバーに出ている最新投稿は、前述とは別の方法で表示されている事だろう。
ところで、Twitterのuser_timelineでコールバックできるなんて公式ウィキのどこに書いてあるんだ？
Comments