はじめに
ウェブサイトをシェアしたときに、
動画をインライン表示させてクリック率をあげたい...!
FacebookとTwitterそれぞれの設定方法です。
※ 2018/01/19現在、
下記のようにog:videoを指定しても、Facebookでインライン再生できなくなっているようです
成功された方はコメントいただけるとありがたいです 
Facebookクローラー
リンクが初めてシェアされると、FacebookクローラーはURLでHTMLをスクレイピングして、タイトル、説明、サムネイル画像など、Facebook上のコンテンツに関する情報を収集、キャッシュ、表示します。
スクレイピングとは、ページに記載されている情報の中から、必要部分だけを自動抽出することです。
用意するもの
- 動画(mp4かFlash）
- 適切にmetaタグが挿入された公開ページのURL
- ↑が非SSLの場合、SSLのURL(https://~)
- ogp画像
マークアップ
<!-- Facebookフィード上で動画を再生させるためのog:videoの例 -->
<meta property="og:video:url" content="http://yoursite.com/example.mp4">
<meta property="og:video:secure_url" content="https://yoursite.com/example.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">
| プロパティ | 説明 ※は必須 |
|---|---|
| og:video | 動画のURL。可能な限りhttps://URLで ※ |
| og:video:url | og:videoに相当 |
| og:video:secure_url | セキュアな動画URL（https://URL） ※ |
| og:video:type | MIMEタイプ。video/mp4またはapplication/x-shockwave-flash
|
| og:video:width | 動画の幅（ピクセル）※ |
| og:video:height | 動画の高さ（ピクセル）※ |
| og:image | ニュースフィード内で高品質なプレビューを表示するための画像 ※ |
- セキュアURLは共有SSLでも独自SSLでもOK！
- ogp画像は動画が再生されていないときに表示されます。従来通り適切な大きさで挿入してください。
- 動画の大きさを指定しないと、再生ボタンを押しても何も表示されません。
※項目は全て必須です！
スクレイピング
必須ではありませんが、デバッガーからスクレイピングを行いましょう。更新した内容が即時反映されます。（待っててもそのうち反映されます）
表示
PCブラウザ
og:typeによって表われ方が変わります。どちらもインラインで再生されます。
【og:typeがwebsite,video,video.otherのとき】
【og:typeがvideo.movie,video.episode,video.tv_showのとき】
video.movieなどのオブジェクトタイプについてはこちら
動画の再生部分に加え、
シェアされたURLへのリンクが貼られたタイトルやディスクリプションも表示されるようになります。
ogp:imageが小さい時は正方形に切り取られて表示されます。
スマートフォン（ネイティブアプリ、ブラウザ）
PCブラウザと同様、画像がプレビューされます。
動画は再生されず、選択するとそのままシェアされたURLへ遷移します。
動画を見せたいときは、リンク先でも動画を見れるようにしておく必要があります。
Twitterカード
Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。
動画の再生には Playerカード を使います
用意するもの
- 動画（H.264、Baseline Profile(BP)、レベル3.0、30fpsで 640×480 まで）
- 適切にmetaタグが挿入された公開ページ
- 動画が埋め込まれたiframe表示用のページ
- ↑が非SSLの場合、SSLのURL(https://~)
- ogp画像
- 申請時に使うTwitterアカウント
マークアップ
<!-- Twitterライムライン上で動画を再生させるためのPlayerカードの例 -->
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="sitename">
<meta name="twitter:title" content="Sample">
<meta name="twitter:description" content="This is a sample streaming video.">
<meta name="twitter:image" content="https://yoursite.com/example.png">
<meta name="twitter:player" content="https://yoursite.com/container.html">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:player:stream" content="http://----.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4;">
| プロパティ | 説明 ※は必須 |
|---|---|
| twitter:card | “player” に設定 ※ |
| twitter:title | カードに表示するコンテンツのタイトル |
| twitter:site | twitterアカウント名 |
| twitter:description | コンテンツの説明（200文字以内） |
| twitter:player | iframeプレーヤーのHTTPS URL ※ |
| twitter:player:width | iframeの幅（ピクセル）※ |
| twitter:player:height | iframeの高さ（ピクセル）※ |
| twitter:image | iframeやインラインプレーヤーをサポートしていないプラットフォームのプレーヤーに表示される画像 ※ |
| twitter:player:stream | 直接再生される生ストリームのURL ！ |
| twitter:player:stream:content_type | 動画コンテンツのMIME type/subtype ！ |
- iframeの幅と高さは画面の幅に合わせて縮小されるため、動画の縦横比率にあわせる
- ！項目はスマートフォンで再生するときにアプリ内で再生を完結させるために必要（後述）
テスト、申請
Card Validatorからテストと申請を行います。
metaタグが入っている方のurlでテストを行ってください（twitter:playerのurlではない方）
Facebookと違い、 Twitterでは承認申請が必要です。 (Playerカードのみ）
カードの承認には最大 １週間 かかることがあるようなので早めに申請しましょう。
（1日で承認されたという報告もたくさんあるようです）
* 一度申請しておけば、同ドメインページの申請は不要です。テストだけページ単位で行いましょう。
✳︎ 二度手間にならないよう、申請時のポイントをよく読んで申請を行いましょう。✳︎
テストしようとしたら、WARN: Not whitelisted とでて先に進めない。
Request Approvalを行い、８時間程で承認がおりました。
そのままPlayerカードも表示されるようになったので、申請→テスト→公開という流れになりました
【BASIC認証ページで申請】
本番公開前のBASIC認証をかけてページで申請をしておきたい..!
という場面が往々にしてあると思います。
そんなときは、Twitterが巡回してくるときのIPアクセスを許可してあげます。
199.59.148.209
199.59.148.210
199.59.148.211
199.16.156.124
199.16.156.125
199.16.156.126
Also, Twitter’s ASNUM is AS13414.
表示
プラットフォームによるPlayerカードの動作の違い | Twitter Developers
iPhoneとAndroid（およびその他のネイティブモバイルアプリ）
タイムライン上ではこんな感じでURLリンクだけが表示
個別ツイートを選択した後、player:streamの有無で挙動が変わります。
【 player:streamなし 】
新しくページが開いてtwitter:playerで指定したurlへ遷移します。
YoutubeやVimeoもこちらの方法です。
動画の再生ボタンを押すと、iPhoneでは全画面表示、Androidではそのページ上で動画が再生されます
【 player:streamあり 】
そのままインラインで再生されます。
コントローラーが出ず画面も小さいのでユーザビリティ低めです。あまりおすすめしません。
twitter.com (デスクトップブラウザ)
iframeの幅が435ピクセルよりも広い場合は、iframeプレーヤーのサイズが元の縦横比を保ったまま、最大幅435ピクセルに変更されます。
mobile.twitter.com（スマフォブラウザ）
デスクトップブラウザと同じように画像がプレビューされます。
クリックするとツイート内のURLに規定のブラウザで遷移します。
便利ツール
- デバッガー - 開発者向けFacebook | キャッシュの結果表示やスクレイピングをやり直すときに使う
- Card Validator | Twitter Developers | Twitterカードのテストと申請
- OGP画像シミュレータ | og:image Simulator | OGP画像の作成に便利
参考URL
- Facebook公式：ウェブ管理者向けシェア機能ガイド
- Twitter公式：Playerカード | Twitter Developers
- twitterdev/cards-player-samples | Playerカードのサンプルコード（コード見るのが一番はやい）
- Playerカード: 申請ガイド | Twitter Developers
- トラブルシューティングガイド | Twitter Developers
そのた
- YoutubeやVimeoもこの仕組みできれいにシェアできるようになってる
- Facebookやツイッターでスクロールしたとき自動再生しているのは、シェアではなく投稿時にアップロードされた動画だけ