映像再生ページをFacebookでシェアする場合、
単なるリンクとしてではなく、プレイヤーを埋め込んでシェアすることで、
Facebook上で映像を再生することが可能である。
私のピアノ演奏ページを例として、
Facebook投稿にプレイヤーを埋め込む方法を紹介する。
準備
基本的には、http://www.jwplayer.com/blog/publish-your-videos-to-facebook-with-a-jw-player/に記載された方法に従う。
以下を用意する。
・映像ファイル(JW Playerで再生できるもの)
今回は、私のピアノ演奏動画を例として使用する。
loftalk.fakefur.jp/co1702723/timeshift/lv179863115.flv
・JW PlayerのSWFファイル
本家サイトでは見当たらなかったので(知ってる方教えて下さい。)、
適当に検索して以下サイトのswfファイルを頂いた(自己責任で)。
https://www.chicagomag.com/theme_overrides/Respond/js/jwplayer/player.swf
・SSL接続可能なサイト
SSL接続可能なサイトにJW Playerのswfファイルを配置する。
私が運用しているサイト http://loftalk.jp/ の場合、
共有SSHにより、https://fakefur-loftalk.ssl-lolipop.jp/ でアクセス可能である。
今回は、https://fakefur-loftalk.ssl-lolipop.jp/co1702723/player.swf に配置した。
埋め込みタグ
Facebookでシェアしたいページの＜head＞～＜/head＞間に以下のようなタグを埋め込む。
注意点としてはJW PlayerのSWFファイルのURLはhttps://～で指定すること、
またswfパラメータ(fileパラメータ)はURLエンコードしておくことである。
<meta property="og:title" content="@loftkunのピアノ演奏" /> <meta property="og:type" content="movie" /> <meta property="og:image" content="http://loftalk.jp/co1702723/background.png" /> <meta property="og:url" content="http://loftalk.jp/co1702723/frame2.html?flv=lv179863115" /> <meta property="og:video" content="https://fakefur-loftalk.ssl-lolipop.jp/co1702723/player.swf?file=http%3A%2F%2Floftalk.fakefur.jp%2Fco1702723%2Ftimeshift%2Flv179863115.flv&autostart=true" /> <meta property="og:video:width" content="640" /> <meta property="og:video:height" content="360" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:description" content="クリックすると再生します http://loftalk.jp/co1702723/" />
テスト＆キャッシュクリア
https://developers.facebook.com/tools/debug/にてテストする。
上記テストにより、Facebook側でキャッシュされたシェア内容をクリアすることもできる。
問題なければ、以下のように表示される。
status Video embedding on Facebook enabled
投稿結果
以下のように、まずはimageに指定した画像が表示される。
画像をクリックするとFacebook上で、JW Pleyerで映像を再生できる。
