Open Graphのvideoをうまく利用したサイトが素敵

Open Graphのvideoをうまく利用したこのサイトが素敵日本再発見。 ~もう一度日本を見つけよう~」がうまくOpen Graphのvideoを利用して、Facebookで良い感じになっていました。

サイトの内容 日本再発見。 ~もう一度日本を見つけよう~は日本の魅力的な場所を投稿できるサイトです。
また投稿された場所に対し、閲覧者は「行きたい」 「パス」を選択できます。
日本の魅力を引き出せるCGMとなっています。

「いいね!」をすると・・・ このサイトの右上にある「share」をクリックするとウォールに以下のように表示されます。
Open Graphのvideoをうまく利用したこのサイトが素敵
左下にYouTubeの時みたいに再生ボタンが表示されます。
これをクリックすると

サイトと同じように投稿内容に「行きたい」 「パス」ができるようになりました。
わざわざサイトに遷移させることなく、Facebook内でコンテンツを楽しめるこの方法、Facebookの滞在時間が伸びれば伸びるほど有効になってきそうです。

Open Graphの設定 さて、この設定どうやっているのか見てみましょう。
日本再発見。 ~もう一度日本を見つけよう~のソースを見ると

og:imageとともにog:videoが記述されています。
これでブログパーツでも配布しているflashファイルを表示させています。
では、Open Graphの設定を詳細に見ていきましょう。
FacebookのOpen Graph protocolには下記のようにあります。

Attaching Audio and Video Data
If you want to attach a video to your Open Graph page you can simply specify a video url:
og:video - e.g., "http://example.com/awesome.swf"
and optionally, you can add additional metadata
og:video:width - e.g. "385" (max 398)
og:video:height - e.g. "400" (max 460)
og:video:type - e.g. "application/x-shockwave-flash"

og:videoの設定のみでも大丈夫ですが、幅や高さも記述しようね的な感じです。
また対応する画像もしっかり記述してねってことのようです。
iPhoneとかでもHTML5で表示っすっから安心してねともあります。

コンテンツも素敵ですし、応援したいサイトです。
ちなみに現在プレゼントキャンペーンをやっているようです。
よろしければ、見てみてください。

sponsors

「Open Graphのvideoをうまく利用したサイトが素敵」をシェアする

記事作成:
記事URL:

TOP > > Open Graphのvideoをうまく利用したサイトが素敵