1. TOPTOP
  2. Webサービス
  3. Twitter

TwitterのWeb Intentsを使って「ツィートに返信」「リツィート」「お気に入りに登録」を埋め込む(「高速道路渋滞なう」)

|

Twitter_logo_blue

前回(新しいタブで開く)、Twitter RESTAPI1.1で「高速道路渋滞なう」をつくるにあたって、

  • 「ツィートに返信(Reply)」
  • 「リツィート(RT)」
  • 「お気に入りに登録(Fav)」

のそれぞれを、表示させる方法が分かりませんでした。いろいろと調べていると、これらは、Webサイト向けのAPIで、Web Intentsという機能で、表示させることができるようです。

ブログやWebサイトなどを見ていると、よくTwitterのタイムラインが埋め込まれたりしますが、それの一種です。

Webサイト向けのAPIとWeb Intents

それぞれの詳しい内容は、Twitter API ポケットリファレンス
から引用しておきましょう。

Webサイト向けAPI(P288)
Webサイト向けAPIは、HTMLやJavascriptを使った簡単なコードを貼り付けるだけでWebサイトとTwitterを連携することができるAPIです。

Web Intents(P301)
Web Intentsは、簡単なリンクをWebページに配置するだけでサイト訪問者がリプライ、リツィート、お気に入り登録、フォローを容易に行えるようにする機能です。

Web Intentsのサンプルコードと実例

Twitterのドキュメンテーションを見ると、Web Intentsのサンプルコードが掲載されています。それに基づいて作成したコードは、以下の通りです(これより前のコードを確認したい場合は、前回の記事(新しいタブで開く)を参考にしてください)

<?php

if($result['statuses']){
    foreach($result['statuses'] as $tweet){

?>
<ul>
  <li><?php echo date('Y-m-d H:i:s', strtotime($tweet['created_at'])); ?></li>
  <li><?php echo $tweet['user']['name']; ?></li>
  <li><img src="<?php echo $tweet['user']['profile_image_url']; ?>" /></li>
  <li><?php echo $tweet['text']; ?></li>
  <li><?php echo $tweet['id']; ?></li>
  <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
  <p><a href="https://twitter.com/intent/tweet?in_reply_to= $tweet['id']" target="_blank">Reply</a></p>
  <p><a href="https://twitter.com/intent/retweet?tweet_id= $tweet['id']" target="_blank">Retweet</a></p>
  <p><a href="https://twitter.com/intent/favorite?tweet_id= $tweet['id']" target="_blank">Favorite</a></p>
</ul>
  <?php } ?>
    <?php }else{ ?>
    <div class="twi_box">
        <p class="twi_tweet">関連したつぶやきがありません。</p>
    </div>
<?php } ?>

見た目は、こんな感じになります。赤色の線で囲ったところに、「ツィートに返信(Reply)」、「リツィート(RT)」、「お気に入りに登録(Fav)」が
埋め込まれています。

web_intents

コードの問題点

ただし、上記のコードは次の2点でまだ十分とは言えません。

  • 「返信」「リツィート」「お気に入り登録」のアイコンがない(見た目が悪い)
  • 各href属性のURL内にある、$tweet[‘id’]では、そのつぶやきにアクセスできない

今のところその解決法は分かりません。次回はそこらのところを考えてみます。

〔つづきの記事〕

〔前の記事〕

〔参考サイト〕