このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

前回の

FacebookなどのSNSサービスで必要となってくる OGPについておさらい

の続きとなります。

前回に引き続きOGP（Open Graph protocol）についてです。

今回はOGPの情報を使って、音源や動画をフィードに流す方法となります。

音声ファイル audio

<meta property="og:audio" content="音楽のファイルパス">
<meta property="og:audio:title" content="音楽のタイトル">
<meta property="og:audio:artist" content="音楽のアーティスト名">
<meta property="og:audio:album" content="音楽のアルバム名">
<meta property="og:audio:type" content="音楽のファイルタイプ（application/mp3など）" />

となっております。

動画ファイル audio

<meta property="og:video" content="動画のファイルパス" />
<meta property="og:video:height" content="動画の高さサイズ" />
<meta property="og:video:width" content="動画の横幅サイズ" />
<meta property="og:video:type" content="動画のファイルタイプ（application/x-shockwave-flashなど）" />

となっています。

2012年9月現在、

テストをするところ、フィードに反映されるのを確認できず。。。

何が足りないのか。。。追って検証致します。

また、これらのOGPを確認するのには、以下のtoolが便利です。

Debugger – Facebook開発者
http://developers.facebook.com/tools/debug

こちらにURLを入力し、デバックボタンを押すとOGPが取得できているかのチェックを行えます。

また、Facebookはキャッシュが強いのが特徴でもあり、OGPを変更してもすぐには反映されず、

Facebook側で以前取得したOGPの情報がフィードに流れることがあります。

こうしたキャッシュも上記のデバックツールでURLを入力しデバックすることによって、

キャッシュクリアすることが出来ます。

OGPを変更

また、これらのOGPの詳細を動的に変更（ユーザーが起こしたアクションで変更）したとしても、

反映されるのは静的に記述しているOGPの情報となってきます。

例えば、

ページを開く → ユーザーがクリックなどアクション起こす→ JavaScriptでOGPを変更  → いいねボタンを押す

というフローを行っていても、フィードに流れる情報はページを開いた状態のOGPの情報となります。

これは、図で表すと以下のとおりとなってきます。

真ん中のFacebook SDKを介しているかは定かではありませんが、

いいねと同時にmeta OGPの情報を送る。ということは無く、押されると別途Facebook側でページの情報を取得（またはキャッシュの情報）しているようです。

なので、htmlファイル一つに付き、meta:og は一つしか記述（取得）出来ません。

 

と、言うのが基本なんですが

「html 1ページにいいねボタン200個設置し、尚且つフィードで流れる情報を変更させたい。」

という要件があり、その時の対応方法を次回書いていこうと思います。

ではでは。