Open Graph Protocol

このブログにフェイスブックのコメントプラグインを組み込んでみました。フェイスブックにログイン状態の場合、プロフィールの画像が出てきて、コメントいただくと、ご自分のウォールにコメントが表示されるはずです。

コメントプラグインのページでURLとか横幅を指定してできた、コードを自分のブログのテンプレートなりに組み込むのですが、当然URLは記事毎に個別にする必要があります。

このブログ（Drupal）の場合、nodeのIDがURLになっているので、nodeの変数を引っ張り出す呪文を唱え、個別のURLを生成しています。

<?php if ( arg(0) == 'node' && is_numeric(arg(1)) && ! arg(2) ) { $node = node_load(arg(1)); }?>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="ルート/node/<?php print $node->nid ?>" num_posts="コメントの表示数" width="コメント欄の横幅"></fb:comments>

それとメタタグを追加します。

<meta property="fb:admins" content="フェイスブックのアカウント"/>

で、これでOKかというと、フェイスブック上にフィードされるタイトルや文章はOKですが、同じページに含まれる、直接記事とは関係のない、サイドバー上の画像がサムネイルになってしまいます。

このサムネイルをどうやって指定するか、でたどり着いたのがOpen Graph Protocolです。このOpen Graphってフェイスブックのコアとなる技術で、フェイスブックの中とフェイスブックの外とを結びつけるものです。

元々フェイスブックの開発によるものですが、ミクシィやグリーなどでも利用されていて、広くSNSと一般のウェブサイトを結びつけるツールになってきているようです。

オフィシャルサイトをみるとGoogleのレシピ検索で利用されているMicroformatsなどにも刺激されてできた、と書かれています。レシピ検索では食材名や作り方、調理時間、カロリーなどをひとつひとつxmlのタグで括っていきます。これでダイエット向きのレシピや、時間のないときにできるレシピとかが検索できるわけです。

同様にブログ記事のタイトルや画像、文章のティーザーなどをタグで括ってフェイスブックのウォールにフィードするというしくみがこれでよく分かります。

Open Graphではmetaタグとしてこれらの要素を指定します。

<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="本文の概要">
<meta property="og:image" content="サムネイルになる画像のURL">
<meta property="og:type" content="blog等記事の種類">
<meta property="og:url" content="その記事のURL">

他にもありますが、だいたいこんな感じで指定します。

htmlのタグから、ある程度自動的に処理してくれるようですが、サムネイルの画像とかは個別に指定する必要があります。

で、便利なDrupalモジュールを見つけました。Open Graph meta tagsというモジュールです。インストールするとコンテンツ作成/編集画面にフィールドセットが追加され、Open Graphの名の内容が指定できるようになり、画像はImage Fieldの画像から簡単に選択できるようになります。

Likeボタンでも正確にサムネイルが反映できるようになりました。まさにDrupalとフェイスブックがマッシュアップ！、と実感させてくれます。