JW PlayerをFacebook投稿に埋め込む

̃Gg[͂ĂȃubN}[Nɒlj

映像再生ページを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に指定した画像が表示される。
jw1

画像をクリックするとFacebook上で、JW Pleyerで映像を再生できる。
jw2



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です