Twitter Cardsを使ってサイトの動画を直接タイムラインに表示させる

Tips, Wordpress

Twitter Cardsって?

TwitterでYouTubeの動画のリンクを投稿するとツイート内に動画のプレーヤーが埋め込まれ、YouTubeのページに飛ぶことなくタイムライン上で直接再生できる。
twittercards1
 

動画だけじゃなくて、画像とかサイトの抜粋とか、いろいろ表示されるツイートがある。
例えばtumblrとか。リンク先に埋め込まれている画像やコンテンツの抜粋を表示してくれる。
twittercards2
 

こういうのを”Twitter Cards“っていう。
 
ツイート内にリンクがあって、そのリンク先のサイトが特定の付帯情報を持っている時にツイート内にそれを表示するというもの。
YouTubeは各コンテンツに「動画のプレーヤーを表示させて再生させる」ための付帯情報が記述されているし、Tumblrの場合も「画像を表示する」「抜粋を表示する」「動画を再生する」・・・という具合に各ポストのタイプに合った付帯情報が記述されている。

WPSSOを有料のPro版にアップデートして、このTwitter Cardsが使えるようになったはずなので、意気揚々と自分の動画コンテンツのリンクを投稿してみた。
 
が・・・

 
notwittercards-orz
 
・・・だめじゃん。

ページのソースを見ると・・・

うーん、ちゃんと出力されてるみたいだぞ。
cardはplayerになってるし、動画はSSLでvimeoを指してるし。
完璧じゃん。

じゃぁなんで?

なにがいけないの?

ドメインの登録が必要だった

あれこれ調べてみた。
サイトのコンテンツをカード内に表示させるためにはそのサイトの「ドメインをtwitterに登録」する必要があるということがわかった。

早速やってみる。

  1. Twitter Cardsのページ(https://dev.twitter.com/docs/cards)にアクセスして、ページ右の”Twitter Cards Validator”のリンクを開く。
    Twitter_Cards___Twitter_Developers-6
  2.  

  3. Twitterアカウントでサインインする。
  4.  

  5. 作成するカードの種類を選ぶ画面が出る。このままTry Cardsの画面に従って進んでいくと適切なソースコードを教えてくれるのだが、今回はソースコードは既にWPSSOが書いてくれてるので右上の☓か右下のcancelを押してこの窓を閉じる。
    Card_Validator___Twitter_Developers-3
  6.  

  7. Try Cardsの右のValidate & Applyのタブを開く。
  8.  

  9. 動画を含むサイトのURIを貼ってGoを押す。
    Card_Validator___Twitter_Developers-4
  10.  

  11. “**** not approved”のメッセージが出る。横の”Request Approval”ボタンを押す。
    Card_Validator___Twitter_Developers-5
  12.  

  13. 入力フォームに必要事項を記入する。
    “sensitive content”は「取り扱い注意」。サイトがそのテのものを扱ってる場合はチェック。
    入力が終わったら”Request Approval”ボタンを押す。
    Card_Validator___Twitter_Developers-6 Card_Validator___Twitter_Developers-7
  14.  

  15. 「なるべく早く審査するけど数週間かかるよ。審査終わったらメールするから」ってメッセージ。
    そんなに時間掛かるのか…まぁ待つしかないか。
    Card_Validator___Twitter_Developers-8
  16.  

  17. 数週間どころか6時間後に返信キタ!!・・・んだけど、
    ——
    We’re writing to you to inform you that a request from this account to have a Player card whitelisted on our Platform has been rejected per our policies (https://dev.twitter.com/docs/cards/types/player-card), specifically:
    – Does not render on Android

    ——
    「Androidでレンダリングされないからホワイトリスト登録拒否するよ」って通知だった。orz
    テーマの問題なのか、vimeoの問題なのか、メタタグの問題なのかわからない。

    さっそくWPSSOのhelpdeskに問い合わせてみる。さすがにProアカウントだからか対応が早い。すぐ返信が来た。
    ——-
    That must be something new… Let me have a look at this and see which of their requirements has changed. 😉
    I’ll have this sorted for you for the next release – probably this week-end.

    ——-
    ということで、週末まで待つことにした。

  18.  

  19. 他のカードを登録する
    ここまでの過程であれこれやりながら知ったんだけど、Twitter Cardsにはいくつかの「タイプ」があって・・・

    • 記事の抜粋を表示する”summary”。
    • summeryのサムネイルをちょっと大きく表示する”summary_large_image”。
    • 画像を表示する”photo”。
    • 複数の画像を表示する”gallery”。
    • iOSやAndroidのアプリへのリンクを埋め込む”app”。
    • 動画や音声を再生する”player”。
    • アイテム紹介のコンテンツを埋め込む”product”。

    で、”twitterへのドメイン登録”は、このカードのタイプ毎に行う必要があるみたい。
    つまりsummaryのカードでドメイン登録したからといって他の全てのタイプのカードが使えるようになるわけではない、ということ。

    タイプの中でも”app”、”player”、”product”の3つはちょっと手続きが複雑というか審査の敷居が高い(多くの要素を正しく配置しなければならない)らしい。
    そうか。いきなりハードル上げちゃってたのか・・・。

    プラグインの対応を待つ間に、summaryとsummary_large_imageの登録をしてみた。
    こちらは申請してから間もなく「承認」の連絡がもらえた。簡単だった(‘∀`)。

  20.  

  21. そして週末
    約束通りWPSSOの作成者から返信来たんだけど
    「わからん」
    っていう内容だった。
    「ビデオのresolutionが高すぎるせいか、もしくはレビューワーの勘違いじゃないの?」
    みたいな。

    確かにresolutionの件は引っ掛かってた。
    developerのドキュメントには
    “Video: H.264, Baseline Profile (BP), Level 3.0, up to 640 x 480 at 30 fps.”
    って記述がある。
    でもWPSSOが吐き出すメタタグは”1280 x 720″。HDだ。
    試しにこの動画の本体であるvimeoのページをcard vaildatorにかけると”640 x 360″で出力される。
    多分これかな・・・とは思ってた。

    この返事をもらってプラグイン側で対応できないことがわかったので、別のページで再申請してみた。
    今度のページはvimeoじゃなくてyoutubeが仕込んであるベージだ。
    ちなみにURLに日本語テキストのような2バイト文字が入ってるとこのvaildatorはうまく機能しないみたいなので”?p=****”の短縮URLでトライ。
    すると
    Card_Validator___Twitter_Developers-31
    ちゃんと”640 x 360″になってる。申請したら、3時間後くらいに「承認」の連絡が来た。

    これでplayerのカードも使えるようになった。

  22.  

  23. さて、どうなんだろう?
    使えるようにはなったものの、一旦拒否された理由は定かじゃないし、本当にandroidで動作しないのかは持ってないからわからない。
    試しに投稿してみたら、本家のサイトとiosの公式アプリではちゃんと「カード」形式で表示されていた。
    17cd19ecd7aec460ff46c497bbd2d17b

    なので、とりあえずこれで良しとしよう。


参考にさせていただいた記事→