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

Twitterのドキュメンテーションにあるツィート埋め込み用素材を使って「ツィートに返信」「リツィート」「お気に入りに登録」を表示(Twitter RESTAPI1.1で「高速道路渋滞なう」)

|

Twitter_logo_blue

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

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

という2つに問題がありました。今回の記事では、これらの問題を解決する方法をご紹介しましょう。

ツィート埋め込み用の画像素材

TwitterドキュメンテーションのImage Resources(新しいタブで開く)にアクセスすると、埋め込み用の画像素材が用意されています。

pngファイル(画像)をダウンロードするか、そのURLをコードに貼り付けることで、「Favorite」「Reply」「Retweet」のアイコンを使用することができます。

image_resources

$tweet[‘id’]ではなくecho $tweet[‘id’];に

前回、tweet_idをそのまま使っていたところを、echo $tweet[‘id’];にします。

<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>

ではなく、

<p><a href="https://twitter.com/intent/tweet?in_reply_to= <?php echo $tweet['id']; ?>" target="_blank">Reply</a></p>
<p><a href="https://twitter.com/intent/retweet?tweet_id= <?php echo $tweet['id']; ?>" target="_blank">Retweet</a></p>
<p><a href="https://twitter.com/intent/favorite?tweet_id= <?php echo $tweet['id']; ?>" target="_blank">Favorite</a></p>

です。

ここまでのコードをまとめると…

以上を踏まえると、前回のコードを修正すると、以下のようになります。そのコードを表示させると、画像のような感じになります。

<?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>
            <img src="https://si0.twimg.com/images/dev/cms/intents/icons/reply_hover.png">
            <p><a href="https://twitter.com/intent/tweet?in_reply_to= <?php echo $tweet['id']; ?>" target="_blank">Reply</a></p>
            <img src="https://si0.twimg.com/images/dev/cms/intents/icons/favorite_on.png">
            <p><a href="https://twitter.com/intent/retweet?tweet_id= <?php echo $tweet['id']; ?>" target="_blank">Retweet</a></p>
            <img src="https://si0.twimg.com/images/dev/cms/intents/icons/retweet_on.png">
            <p><a href="https://twitter.com/intent/favorite?tweet_id= <?php echo $tweet['id']; ?>" target="_blank">Favorite</a></p>
        </ul>
  <?php } ?>
    <?php }else{ ?>
    <div class="twi_box">
        <p class="twi_tweet">関連したつぶやきがありません。</p>
    </div>
<?php } ?>

Web_intents2

次なる問題…

今回作成中のWebサービスと、見本としている「電車遅延なう」のつぶやきを比べてみると、次の3点のハイパーリンクが足りません。

  • 「@~~~~」(スクリーンネーム)
  • #ハッシュタグ
  • https://t.co/○○○○○○○

次回のブログでは、これらの解決方法について書いてみたいと思います。

〔前の記事〕

〔つづきの記事〕

〔参考サイト〕