JWPlayerの動画をfacebookのリンク投稿に埋め込む

Tips, Wordpress

【注意】
この記事は2013年5月31日の時点での内容です。
facebookは内部仕様がコロコロ変わるので、この方法では思った通りの結果が得られなくなる日が来るかもしれません。あらかじめご了承くださいませ。

facebookへのリンク投稿

最近、自分の宅録サイトを更新した時にそのコンテンツへのリンクをfacebookにも投稿するようにしている。
facebookの投稿枠に記事のURLを貼って、数行の紹介文を書いて「投稿」すると、記事へのリンクを記事内のイメージ付きで表示してくれる、というものだ。


投稿する側としては簡単でお手軽である。

しかし、見る側にとってはちょっと手間だ。
見てもらうためにはリンク先のページを開いてもらわないといけない…って、そんなのは当たり前のことなんだけど、facebookのニュースフィードを見ている時にそこからわざわざ別の場所に飛ぶというのは、技術的にではなく精神的にちょっとした敷居だ。僕のニュースフィードにもリンク投稿が多いけど、あえて開いて全文を読むことは少ない。

ということに気がついた。

ちゃんと解析したわけじゃないけど、ニュースフィードから僕のコンテンツを見に来てくれる人って、やっぱ少ないんだろうなぁ…と。

最近では宅録作品を素材にした動画がメインになっている。
ならこの「動画」を直接wallに貼ってしまえば少しは気軽に見てもらえるようになるかも、と思い立った。

でもfacebookの動画投稿は使いたくない。
せっかく自分のサイトに動画を置いているんだから、これをそのまま使いたい。

facebookの動画投稿を使わない理由

  • facebookのためにわざわざ動画を作りたくない
    自サイトに上げたものと同じ動画をわざわざfacebookに投稿するのは面倒だし、投稿した動画に自分のサイトへのリンクを貼ったとしても本文を見に来てはもらえない気がする。
  • 実は動画の更新頻度が激しい
    テロップの間違いに気が付いて修正したり、サウンドトラックが気に入らなくて音声を差し替えたり…ということを実は結構頻繁にやっている。理由があって更新しているので、更新前のものは見てもらいたくない。自分のサーバーなら記事の文章やURLはそのままで、中の動画だけを常に最新にしておくことができる。facebookやYouTubeは一旦アップロードしてしまうとコンテンツの更新は不可能なので、間違いに気がついても消すことができない。消してしまうと頂いていた評価やコメントもクリアされてしまうのが悲しい。

Open Gragh Protocolを使ってjwplayerの動画を直接埋め込む

facebookでリンクを投稿すると、facebookのシステムはリンク先のヘッダー情報から<meta og:>のタグを探して優先的に表示するようになっているらしい。この仕組みを利用して、ヘッダーに動画プレーヤーの情報を記載するというのが今回の主眼である。

なかなか簡単にはいかず、途中それはもういろいろ大変だったんだけど、なんとか成功した。
経緯は省略して結果だけ書くことにする。

必要なもの

  • SSL接続できるサイト
    かつては必要なかったらしいのだが、現在のfacebookは外部に置かれた特定のファイル…多分スクリプトを含むもの…を開く時はそのサイトとSSL接続すべしという仕様になってるらしい。僕が借りているサーバー”sixcore“は「共有SSL」が無料で設定できたのでこれを利用した。jwplayerの本体はSSL接続。動画ファイルや画像ファイルはSSL接続不要
  • jwplayer本体。
    バージョンは5.xでないとダメっぽい。最初は最新版の6.xでトライしたんだけど、うまくいかなかった。
  • jwplayerで読み込み可能な動画ファイル。
    先述した通りSSLは不要。

実際のコード

  • 投稿にはアイキャッチ画像(post_thumbnail)を設定している
  • 動画ファイルの名前は記事ごとにカスタムフィールドで定義している

というの環境下で、

  • 記事に動画を含む時に、
  • アイキャッチ画像をポスターフレームとして、
  • カスタムフィールドで定義された動画をfacebookに埋め込む

ことを目的としたコード。

更に踏み込んで、動画はないけど音源データのあるページではサムネイル画像付きのmp3プレーヤーとして埋め込めるようにしてみる。

これで意図した通り、facebookのニュースフィード上で自分のサイトに置いた動画を直接再生できるようになった。

jwplayer_in_fb

ただしこれはPCのブラウザだけ。iOSではリンク扱いで、クリックすると自分のサイトが開いてしまう。Androidは持ってないのでどうなるのかわからないけど、多分飛ばされると思う。
これがfacebook内で完結してくれればまさに理想形なんだけど…。

とにかく、まぁここまでできただけでも僕にしては上出来である。
次に更新する時は、これで投稿してみよう。

参考