photo by Visit St. Pete/Clearwater
自分のサイトにツイッターの「つぶやき」を埋め込みたいときってありますよね？
手動でツイートを埋め込むときは、ツイート画面の右下にある「…」のボタンを押して、コピペ用のembedコードを張り付けたりします。
一方、動的に埋め込み処理を行いたいときは、下記のように「oembed API」を使ってサーバからembedコードを取得する方法もあります。
今回は、埋め込みコードが取得できるTwitter API「oembed」について、いろいろ調査してみました！
目次
ツイッターAPIで情報取得！
まずはツイッターAPIを叩くためのPHPコードです。
有名な「abraham/twitteroauth」というライブラリを使ってAPIにアクセスします。「twitteroauth」のインストールの仕方は別にいいですよね・・？他のブログでもいっぱい紹介されてるし・・。ざっくりとしたインストールの仕方を知りたい方は、前に私が書いた下記の記事をご参照ください。
※ちなみにTwitter APIは、ツイッターに開発者登録をして、各種APIキーを発行してもらわないと使うことができないので、ご注意くださいね。
さてインストールが完了した後は、以下のようなPHPコードによってAPIにアクセスができます。
|
1 2 3 4 5 6 7 8 9 10 |
use Abraham\TwitterOAuth\TwitterOAuth; $tweet_url = "https://twitter.com/2ab7/status/729470847644147712"; $oauth_access_token = "アクセストークンを入力"; $oauth_access_token_secret = "アクセストークン・シークレットを入力"; $consumer_key = "コンシューマ・キーを入力"; $consumer_secret = "コンシューマ・シークレットを入力"; $connection = new TwitterOAuth($consumer_key,$consumer_secret,$oauth_access_token,$oauth_access_token_secret); $ret = $connection->get("statuses/oembed", array("url" => $tweet_url); echo $ret->html; |
そして、Twitter側からは、以下のようなJsonの応答が返ってきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
( [url] => https://twitter.com/2ab7/status/729470847644147712 [author_name] => も [author_url] => https://twitter.com/2ab7 [html] => <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">よそはよそ、うんちはうんち。</p>— も (@2ab7) <a href="https://twitter.com/2ab7/status/729470847644147712">May 9, 2016</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> [width] => 550 [type] => rich [cache_age] => 3153600000 [provider_name] => Twitter [provider_url] => https://twitter.com [height] => [version] => 1.0 ) |
いろんなパラメータがありますが「cache_age」というのがなんだか気になりますね。いったいなんの値なんでしょうか？
調べてみるとどうも、サーバがクライアントに対して「この秒数だけ情報をキャッシュしておいてくれ」とお願いする数値のようです。「3153600000秒」というのは約100年を表します。ツイッター側は我々に二度とこの要求を飛ばしてくるなとご所望のようです。しかしこの「cache_age」を採用するかどうかはクライアント側の自由です。ですので気にせずガンガンとクエリーを飛ばしても許してくれるはずです。
埋め込みコードを表示！
上記のJSONレスポンスの「html」のフィールドの中に、html埋め込みコードが記されています。これをブログに張り付けるとこんな感じになります。良く見かけるおなじみの埋め込みツイートですね。
↓
よそはよそ、うんちはうんち。
— も (@2ab7) May 9, 2016
この標準の表示形式の他にも、「Twitter oembed API」では様々なフォーマットを指定して、埋め込みツイートをカスタマイズすることができます。
横幅を指定したり、中央よせにしたり、画像を非表示にしたり、一通り表示方法が用意されています。以下、表示例です。
横幅220pxで表示！（maxwidth=220）
ヘリトンボ pic.twitter.com/Ozfk12CDqP
— も (@2ab7) April 24, 2016
埋め込みコード：
|
1 2 |
<blockquote class="twitter-tweet" data-width="220"><p lang="ja" dir="ltr">ヘリトンボ <a href="https://t.co/Ozfk12CDqP">pic.twitter.com/Ozfk12CDqP</a></p>— も (@2ab7) <a href="https://twitter.com/2ab7/status/724228800674861057">April 24, 2016</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> |
中央よせで表示！（align=”center”）
もっとこっちこいよ pic.twitter.com/lt4v4AkY00
— も (@2ab7) January 17, 2016
埋め込みコード：
|
1 2 |
<blockquote class="twitter-tweet" align="center" data-width="220"><p lang="ja" dir="ltr">もっとこっちこいよ <a href="https://t.co/lt4v4AkY00">pic.twitter.com/lt4v4AkY00</a></p>— も (@2ab7) <a href="https://twitter.com/2ab7/status/688792494113345536">January 17, 2016</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> |
画像なしで表示！（hide_media=true）
うさコロＴシ ャツ4104円 pic.twitter.com/AN6aDe5IuV
— も (@2ab7) November 16, 2015
埋め込みコード：
|
1 2 |
<blockquote class="twitter-tweet" data-cards="hidden" data-width="220"><p lang="ja" dir="ltr">うさコロＴシ ャツ4104円 <a href="https://t.co/AN6aDe5IuV">pic.twitter.com/AN6aDe5IuV</a></p>— も (@2ab7) <a href="https://twitter.com/2ab7/status/666330334020022272">November 16, 2015</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> |
動画の埋め込みコードを取得！
上記は「ツイート」の埋め込みコードの取得方法ですが、オプションを指定することで「動画」の埋め込みコードも取得できます。
動画の埋め込みコードを取得するには、「widget_type」のオプションに「video」を指定します。
|
1 |
$ret = $connection->get("statuses/oembed", array("url" => $tweet_url, "widget_type" => "video", "omit_script"=>false)); |
これを実行すると、Twitter側からは以下のようなJsonの応答が返ってきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
( [url] => https://twitter.com/DanScavino/status/732776650375565312 [author_name] => Dan Scavino Jr. [author_url] => https://twitter.com/DanScavino [html] => <blockquote class="twitter-video"><p lang="en" dir="ltr">.<a href="https://twitter.com/realDonaldTrump">@realDonaldTrump</a> rally in Oregon on 5/6! It is clear you VOTED! THANK YOU <a href="https://twitter.com/hashtag/TrumpTrain?src=hash">#TrumpTrain</a>??ｨ<a href="https://twitter.com/hashtag/Trump2016?src=hash">#Trump2016</a> <a href="https://twitter.com/hashtag/ORPrimary?src=hash">#ORPrimary</a> <a href="https://t.co/p1WEXGsCgE">pic.twitter.com/p1WEXGsCgE</a></p>— Dan Scavino Jr. (@DanScavino) <a href="https://twitter.com/DanScavino/status/732776650375565312">May 18, 2016</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> [width] => 550 [type] => rich [cache_age] => 3153600000 [provider_name] => Twitter [provider_url] => https://twitter.com [height] => [version] => 1.0 |
「html」の中に埋め込みコードが入っています。これをブログなどに貼り付けると、ツイッターのビデオが見られます。
↓（こんな感じ）
.@realDonaldTrump rally in Oregon on 5/6! It is clear you VOTED! THANK YOU #TrumpTrain??ｨ#Trump2016 #ORPrimary pic.twitter.com/p1WEXGsCgE
— Dan Scavino Jr. (@DanScavino) May 18, 2016
「omit_script」のオプションを「true」にセットすると、埋め込みコード内のjavascript読み込みの記述が省略されます。自分のサイトで既にツイッターの「widgets.js」を読み込み済みならば、「true」にセットして省略しても良さそうですね
まとめ
以上、ツイッター埋め込みコードが取得できる便利なAPIの紹介でした！
ツイッター公式によると、ツイートを掲載するときは厳密なルールがあり、そこに準拠していないツイートの表示方法は認めていないそうです。なので勝手な方法でツイートを引用したりすると、ツイッター側から怒られてしまう可能性もあるということです・・。
この埋め込みフォームはツイッター公式が用意しているものなので、そのまま使えば怒られることはなさそうですね。安心安心・・。
