Ajaxでツイートを検索して、twitter.widget.jsを使って表示させたい

すごく今更だけど、twitterのwidgetを使ってツイートを埋め込む方法的なお話。
ちなみに単純に埋め込むのではなくてAjaxでデータを取得して表示するみたいな。
ということでシンプルに方法でも。

■index.php(キーワードを投げて結果を取得)

//index.php

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

$(document).ready(function(){
  $("#getTweet").on("click",function(e){
    e.preventDefault();

    $.ajax({
      url:"searchTweet.php",
      type:"POST",
      dataType:"json",
      data:{
        keyword:$("#keyword").val()
      },
      beforeSend:function(){
        $("#tweet").empty();
      },
      success:function(result){
        var data = "";

        if(result){
          for(var i in result){
            data += '<blockquote class="twitter-tweet" data-conversation="none"><a href="https://twitter.com/twitterapi/status/' + result[i] + '"></a></blockquote>';
          }
        }

        $("#tweet").append(data);
      },
      complete:function(result){
        twttr.widgets.load();
      }
    });
  });
});

<input type="text" id="keyword">
<input type="button" id="getTweet" value="取得する">
<div id="tweet"></div>

検索ボックスを置いて、そこに書いてある言葉をsearchTweet.phpに送って、
データをjsonで受け取って#tweet内にどんどん入れていく感じ。
ちなみにtwttr.widgets.load()っていうのが肝だったりする。

■searchTweet.php(ツイートを検索してjsonで出す)

//searchTweet.php

$consumer_key = "xxx";
$cunsumer_secret = "xxx";
$accessToken = "xxx";
$accessToken_secret = "xxx";

$keyword = $_POST['keyword'];
$values = array();

require_once("twitteroauth.php");
$twitter = new TwitterOAuth($consumer_key,$cunsumer_secret,$accessToken,$accessToken_secret);

$json = $twitter->OAuthRequest(
  'https://api.twitter.com/1.1/search/tweets.json',
  'GET',
  array('q' => $keyword,'count' => '100')
);
$obj = json_decode($json,true);

foreach($obj['statuses'] as $result){
  if(!isset($result['retweeted_status'])){
    array_push($values,$result['id_str']);
  }
}

$flg = ($obj['search_metadata']['next_results'])?1:0;

while($flg){
  $json = $twitter->OAuthRequest(
    'https://api.twitter.com/1.1/search/tweets.json'.$obj['search_metadata']['next_results'],
    'GET',
    ""
  );
  $obj = json_decode($json,true);

  foreach($obj['statuses'] as $result){
    if(!isset($result['retweeted_status'])){
      array_push($values,$result['id_str']);
    }
  }

  $flg = ($obj['search_metadata']['next_results'])?1:0;
}

print(json_encode($values));

単純にツイートを検索する感じ。
ちなみにnext_resultsがあったら繰り返し処理をする形にして、全部取得するような感じ。
if(!isset($result['retweeted_status']))とやっているのは、
リツイートを含めないために必要だったりする。

こんな感じのものを用意すれば出来る。
twttr.widgets.load()は基本的に普通に埋め込むだけならば使う必要ないんだけど、
Ajaxで取得してきた場合だと単純にblockquoteを入れるだけになってしまうので叩いてあげる必要がある。
他の解説は正直面倒なので省略。

ブログに貼ると見栄え的にもよいのでこの埋め込むツイートは便利だと思う。
色んな使い道があるし、画像もプレビューしてくれるし。
ってことで使いたい人がいたらバシバシAjaxで取って使ってみればよいのではないかと。