調べたところ具体的なコードを公開をしているサイトがなかったので私のサンプルコードを公開しておきます。JavaScript と言っても jQuery を使っています。Twitter の jsonp からデータを取得します。サンプルですので細かいところは書き換えてください。
使い方
getTweet 関数にユーザー名を入れます。
1 2 3 4 5 6 | <div id="sidebar"> <div class="userTweet"></div> <script type="text/javascript"> getTweet("webleorg"); </script> </div> |
ツイートを取得する関数
#sidebar .userTweet というところのセレクタは環境によって書き換えてください。取得件数を弄りたい場合は9行目の10というところを書き換えれば変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | function getTweet(username) { var html; var tweetText; jQuery.ajax({ type: 'GET', url: "http://api.twitter.com/1/statuses/user_timeline.json", cache: false, dataType: 'jsonp', data: { count: "10", screen_name: username, include_rts: "true" }, success: function(tweet) { jQuery.each(tweet, function(n) { // リンクなどの書き換え tweetText = this.text.replace(/((http:|https:)\/\/[\x21-\x26\x28-\x7e]+)/gi, "<a href='$1'>$1</a>"); tweetText = tweetText.replace(/@([a-zA-Z0-9]+)?/gi, "<a href='http://twitter.com/$1' target='_blank'>@$1</a>"); // HTML整形 html = '<div class="tweet">'; html += '<p class="image"><a href="http://twitter.com/' + this.user.screen_name + '" target="blank"><img src="' + this.user.profile_image_url + '" width="30"></a></p>'; html += '<p class="user"><a href="http://twitter.com/' + this.user.screen_name + '" target="blank">' + this.user.screen_name + '</a>' + this.user.name + '</p>'; html += '<p class="text">' + tweetText + '</p>'; html += '<p class="date">' + this.created_at + '</p>'; html += '</div>'; jQuery("#sidebar .userTweet").append(html); }); } }); } |
コードは最小限に抑えてますので、これを参考に続きを組んでみてもらえたら嬉しいです。もし組んでみたコードがありましたら教えて頂ければこの記事に追記させて頂きます。
コメント