Twitter APIを使ってツイートを表示させる
TwitterのAPIが新しくなったのでツイートの表示方法をメモ
Twitterへのアプリの登録
まずhttps://dev.twitter.com/appsにアクセスし、「Creatre a new application」ボタンをクリックしてアプリを作成
遷移した画面で次の情報を登録
- Name:アプリケーション名
- Description:使用用途
- WebSites:設置URL
- CallbackURL:今回はの目的では空欄のまま
「DevelopersRulesOf TheRoad」の「Yes,I agree」にチェックを入れたら、下の「CAPTCHA」で認証用の数字等を入力して「Create Your New Twitter Application」ボタンをクリック。
画面が遷移したら、画面の最下にある「Create my access token」ボタンをクリック。
そうすると英数字の羅列された文字列がいくつか表示されるので、以下の情報をテキストエディタなどにコピー&ペースト。
- OAuth settings
-
- Consumer key
- Consumer secret
- Your access token
-
- Access token
- Access token secret
OAuth認証を行うライブラリをダウンロード
次に、https://github.com/abraham/twitteroauthへアクセスし、「twitteroauth」ライブラリをダウンロード。解凍したフォルダ内にある「twitteroauth」を任意の場所に移動する。
twitter.phpの作成
以下のコードをtwitter.phpとして、移動した「twitteroauth」の中に保存。
PHP
<?php require_once("twitteroauth.php"); $consumerKey = "XXX"; //←Consumer keyの文字列を入力 $consumerSecret = "XXX"; //←Consumer secretの文字列を入力 $accessToken = "XXX"; //←Access tokenの文字列を入力 $accessTokenSecret = "XXX"; //←Access token secretの文字列を入力 $count = "6"; //←取得するお気に入りの数を入力 $screenname = "YYY"; //←Twitterアカウントを入力 $id = "ZZZ"; //←TwitterアカウントのIDを入力(上記アカウントのIDで数値の情報) $twObj = new TwitterOAuth($consumerKey,$consumerSecret,$accessToken,$accessTokenSecret); $req = $twObj->OAuthRequest('https://api.twitter.com/1.1/statuses/home_timeline.json', 'GET',array('screen_name'=>$screenname, 'user_id'=>$id, 'count'=>$count)); echo $_GET['callback'] . '(' . $req. ')'; ?>
- APIのURLを変えることで、お気に入りの取得やツイートの取得等へ変更可能。
- APIに付加するパラメータはtwitteroauthを使用する場合はURLに付加するのではなく、「array(パラメータ1=>値,パラメータ2=>値……)」の形で渡す
USERIDの確認方法
User IDの数値は「https://twitter.com/users/show?screen_name=自分のアカウント名(@の後)」にアクセスすると確認可能。
APIのURLを確認
http://dev.twitter.com/console/からAPIのURLを確認。
- ログインした状態で、Authenticationで「OAuth1」の認証とアプリ連携を必ず行う。
- 選んだAPIのQueryタブ内の赤い「*」が付いているのは必須パラメータ
script.jsの作成とHTML、CSSの作成
script.jsとHTMLは以下の通り、CSSはお好みで設定。
Javascript
$(function(){ var $twtr = $('#twitter'); // Ajaxステータスの表示 $twtr.empty() .append('<p class="msg">ツイートの取得中…</p>'); $.getJSON( 'http://設置URLを記載/twitteroauth/twitter.php?callback=?' ) // 読み込み完了時 .success(function( json ) { var tweetStr = ''; // ツイートHTML格納用 var time, icon, name, text; // divを空に $twtr.empty(); // JSONデータの処理 $.each( json, function(i, tweet) { // JSONからデータを抽出 name = tweet.user.screen_name; // ユーザー名 time = tweet.created_at; // 日付 icon = tweet.user.profile_image_url; // プロフィールアイコンURL text = tweet.text; // ツイート本文 // 日付のフォーマット time = formatDate(time); // プロフィールアイコン(最少サイズを使用) icon = icon.replace(/_normal/, '_mini'); // ツイート内のリンク/ユーザー名/ハッシュタグ text = text.replace(/(s?https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/gi, '<a href="$1" class="link">$1</a>'); text = text.replace(/#(\w+)/gi,'<a href="http://twitter.com/#!/search?q=%23$1" class="hashtag">#$1</a>' ); text = text.replace(/@(\w+)/gi,'<a href="http://twitter.com/#!/$1" class="user">@$1</a>' ); // HTMLの整形 tweetStr += '<li>'; tweetStr += '<span class="time">' + time + '</span>'; tweetStr += '<span class="icon"><a href="http://twitter.com/#!/' + name + '">' + '<img src="' + icon + '" alt="' + name + '" width="24" height="24" /></a></span>'; tweetStr += '<span class="name">' + name + '</span>'; tweetStr += '<span class="text">' + text + '</span>'; tweetStr += '</li>'; }); // HTMLを追加 $('<ul></ul>').html(tweetStr).appendTo($twtr); }) // 読み込みエラー時 .error(function( json ) { $twtr.empty() .append('<p class="error">エラー:ツイートを取得できませんでした。</p>'); }); // 日付フォーマット用関数 function formatDate( date ) { var dArr, dStr, d; // IEでパースできないフォーマットのため、 // 文字列の順序を入れ替える dArr = date.split(" "); dStr = [dArr[0], dArr[1], dArr[2], dArr[5], dArr[3], dArr[4]].join(' '); d = new Date(dStr); return d.getFullYear() + '/' + (d.getMonth()+1) + '/' + d.getDate(); } });
HTML
<div id="twitter">JavaScriptを有効に設定してください。</div> <!--jsがOFFになっていた場合用にテキスト記入-->
CSS
/* 関連ツイート */ #twitter ul li { position: relative; padding-bottom:1em; margin-bottom: 1em; font-size: 11px; border-bottom:dotted 1px #ccc; /zoom: 1; } #twitter ul li span { display: block; } #twitter ul li span.time { float: right; font-weight: bold; font-size: 9px; line-height: 28px; color: #c0c0c0; } #twitter ul li span.name { margin-left: 34px; font-weight: bold; line-height: 28px; } #twitter ul li span.icon { position: absolute; top: 0; left: 0; padding: 1px; border: 1px solid #c0c0c0; } #twitter ul li span.text { margin-top: 5px; overflow: hidden; /zoom: 1; } /* AJAXステータス表示用パーツ */ #twitter .msg { color: #c0c0c0; } #twitter .error { color: #c00; }