45
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

FacebookやTwitter上で動画をインライン表示させる ※現在使えません※

Last updated at Posted at 2016-05-25

はじめに

ウェブサイトをシェアしたときに、
動画をインライン表示させてクリック率をあげたい...!

FacebookとTwitterそれぞれの設定方法です。

※ 2018/01/19現在、

下記のようにog:videoを指定しても、Facebookでインライン再生できなくなっているようです
成功された方はコメントいただけるとありがたいです :pray:

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:typewebsite,video,video.otherのとき】
video, video.other.png

og:typevideo.movie,video.episode,video.tv_showのとき】
video.episode,video.movie,video.tv_show.png

video.movieなどのオブジェクトタイプについてはこちら

動画の再生部分に加え、
シェアされたURLへのリンクが貼られたタイトルやディスクリプションも表示されるようになります。

スクリーンショット 2016-05-26 21.10.51.png

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週間 かかることがあるようなので早めに申請しましょう。
(1日で承認されたという報告もたくさんあるようです)

  • 一度申請しておけば、同ドメインページの申請は不要です。テストだけページ単位で行いましょう。

✳︎ 二度手間にならないよう、申請時のポイントをよく読んで申請を行いましょう。✳︎

スクリーンショット 2016-05-24 17.43.15.png
テストしようとしたら、WARN: Not whitelisted とでて先に進めない。
Request Approvalを行い、8時間程で承認がおりました。
そのままPlayerカードも表示されるようになったので、申請→テスト→公開という流れになりました

スクリーンショット 2016-05-25 11.49.54.png

####【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(およびその他のネイティブモバイルアプリ)
IMG_7127.PNG

タイムライン上ではこんな感じでURLリンクだけが表示

個別ツイートを選択した後、player:streamの有無で挙動が変わります。

【 player:streamなし 】

iphone_card.gif

新しくページが開いてtwitter:playerで指定したurlへ遷移します。
YoutubeやVimeoもこちらの方法です。
動画の再生ボタンを押すと、iPhoneでは全画面表示、Androidではそのページ上で動画が再生されます


【 player:streamあり 】

IMG_7129.PNG

そのままインラインで再生されます。
コントローラーが出ず画面も小さいのでユーザビリティ低めです。あまりおすすめしません。

####twitter.com (デスクトップブラウザ)

twitter_desk.gif

iframeの幅が435ピクセルよりも広い場合は、iframeプレーヤーのサイズが元の縦横比を保ったまま、最大幅435ピクセルに変更されます。

####mobile.twitter.com(スマフォブラウザ)

デスクトップブラウザと同じように画像がプレビューされます。
クリックするとツイート内のURLに規定のブラウザで遷移します。

##便利ツール

##参考URL

##そのた

  • YoutubeやVimeoもこの仕組みできれいにシェアできるようになってる :pray:
  • Facebookやツイッターでスクロールしたとき自動再生しているのは、シェアではなく投稿時にアップロードされた動画だけ
45
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?