Twitter の特定のユーザーの最新ツイートを JavaScript で取得する方法

調べたところ具体的なコードを公開をしているサイトがなかったので私のサンプルコードを公開しておきます。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);
            });
        }
    });
}

コードは最小限に抑えてますので、これを参考に続きを組んでみてもらえたら嬉しいです。もし組んでみたコードがありましたら教えて頂ければこの記事に追記させて頂きます。

コメント

コメントは受け付けていません。