wordpressのプラグイン「oAuth Twitter Feed for Developers」で、ツイートを取得して表示する方法

twitterのツイートを表示するには、twitter埋め込みタイムラインなどを使えば簡単に表示できるのですが、時にはツイートのデータだけ取得して独自にデザインをしたい場合もあると思います。
やり方は色々とあるのですが、今回はwordpressのプラグイン「oAuth Twitter Feed for Developers」を使って、ツイートの取得から表示までをしてみたいと思います。

「oAuth Twitter Feed for Developers」をインストールして有効化する

今回使うプラグインは「oAuth Twitter Feed for Developers」です。プラグインの新規追加から検索してインストールした後、有効化します。

「oAuth Twitter Feed for Developers」の設定画面です。Twitter APIを使ってデータを取得するので、こちらにAPI Keyやアクセストークンを入力する必要があります。API Keyは次に紹介する方法で取得ができます。

API keyとアクセストークンの作成

API Keyを取得するには、apps.twitter.comでアプリケーションの作成が必要です。

アプリケーションの作成をした事が無ければ、上のような画面になっているので「Create new app」をクリックして、新しく作成します。

アプリ作成画面です。

Create an applicationの入力項目
Name Twitterアプリケーションの名前を入力します。他の人が作ったアプリ名との重複は出来ないので、被らない名前をつけます。
Description アプリケーションの説明文です。入力必須なので何か適当に説明文を入力しておくと良いでしょう。
Website webサイトのURLを入力します。こちらも入力必須です。
Callback URL TwitterでログインみたいなoAuth認証する時の戻りURLです。今回はただツイートを取得してくるだけなので、こちらは空で問題ありません。

全て入力できたら、下にある「Developer Agreement」にチェックを付けて「Create your Twitter application」ボタンを押せばアプリが作成されます。

無事アプリが作成出来たら上のような画面になります。アクセストークンを作りたいので、アプリ名下にあるタブの「Keys and Access Tokens」をクリックします。

Keys and Access Tokensページでは、Consumer Key(API Key)やConsumer Secret(API Secret)などが表示されています。これらは後からプラグインの設定画面で入力します。なお、API KeyとAPI Secretは、IDとパスワードみたいなものなので、他の人に知られないように注意しましょう。

アクセストークンを作るには、ページ下部の「Create my access token」ボタンから作成します。

無事作成できたら「Access Token」「Access Token Secret」などが表示されています。

ここまで出来たら「Consumer Key(API Key)」「Consumer Secret(API Secret)」「Access Token」「Access Token Secret」の4つをメモして、プラグイン設定ページに戻ります。

oAuth Twitter Feed for Developersの設定ページに戻り、API Keyやアクセストークンを入力する

oAuth Twitter Feed for Developersの設定ページに戻り、先ほど作成したAPI Keyやアクセストークンなどを入力して保存します。

これでWordpressからTwitter API経由でデータを取得できるようになりました。

function.phpに関数を作る

それでは実際にデータを取得するための関数を作ってみましょう。function.phpに以下を入力します。

function getTweet() {
    $account = '__bucchi';
    $tweets = getTweets(5, $account);

    foreach($tweets as $tweet){
        echo $tweet['text'];
    }
}

例として、getTweetという関数を作ってみました。

データを取得している部分はgetTweetsで、第一引数に取得したい件数、第二引数に取得したいアカウントを入力します。

$tweetsには配列で格納されるので、それをforeachで回して出力します。上記例の場合、echo $tweet[‘text’] で、単純にツイートのテキストを表示するようにしています。

テンプレートファイルから作った関数を呼び出してみる

それでは、テンプレートファイルから上記で作ったgetTweetを呼び出してみます。

<?php getTweet(); ?>

を表示したい箇所に埋め込みます。

ちょっと分かりづらいかもしれませんが、サンプルとして上記を表示してみたものです。最新の5件が表示されています。

このままだとデザインしづらいので、getTweet関数を少し調整してcssで扱いやすいように変更してみます。

function getTweet() {
    $account = '__bucchi';
	$tweets = getTweets(5, $account);

    if ($tweets) {
        echo '<ul>';
        foreach($tweets as $tweet){
            echo '<li>' . $tweet['text'] . '</li>'; 
        }
        echo '</ul>';
    }
}

ul、liのリスト形式にして出力するようにしてみました。

これもちょっと分かりづらいですが、、各ツイートがli要素で囲まれているので、改行されています。後はこれにCSSでデザインを加えていけば、好きなようにデザインできます。

例えばという事で、アイコンを置いて吹き出しで呟いているようなデザインをしてみました。このように公式の埋め込みタイムラインでは出来ないデザインが自由にできるので、Twitterのつぶやきをデザインに加えたい場合、使えると思います。