※ これは CakePHP 1.3 時代の記事です。2.0以降だとこのままでは動かないと思います。
OGP (Open Graph Protocol) という約束事がありますね。
例えばウェブページで Facebook の「いいね！」(Like) ボタンが押されたとき
どんな画像や説明文を表示さるかを指定するのに使われるやつ。
このブログの <head /> 内にも埋め込んであります。
本来は誰か(何か)と誰か(何か)の関係の集まりであるソーシャルグラフの中で
それは誰(何)なのかを表現するための決め事と理解してますけど、
まあ実質「いいね！」のためにウェブサイトで使われることが多いので。
実際には何も書いておかなくても
Facebook が「これでしょ」と適当に画像や文字列を拾ってくれるんだけど
結果を見たら「それじゃない！」と思うことが多いので
こっちから指定しておいた方がいいですね。
ブログだけじゃなくてあらゆるウェブサイトに使えるから
CakePHP のサイトにも埋め込んでおきたい。
最近作ったサービスにはだいたい入れてあります。
ただ、OGP のタグ自体は <meta /> 内に情報を書いていくだけで
特に複雑なものではないんだけど
毎日書くようなものじゃないからお作法をすぐ忘れちゃう。
というわけで、
CakePHP で作られたサイトに自動で OGP タグを埋め込んで
Facebook の「いいね！」やシェアに対応させる
OgpHelper を作りました。
コードは長くなっちゃうから後で。
環境
- ここでは CakePHP 1.3 を前提としています。
- 1.2 で使う場合は View からの呼び出しを
$this->Ogp->func() ではなく $ogp->func() にしてください。
- 2.0 対応はこれからやります。あるいは誰かやってください。
設置
OgpHelper が書かれた ogp.php を
app/view/helpers/ に放り込んで、
あとは AppController かどっかで読み込み。
[php gutter=”false”]
public $helpers = array(‘Ogp’, ‘Html’, ‘Form’);
[/php]
とりあえず何も設定しなくても <head /> 内にこういうものが追加されます。
[html gutter=”false”]
[/html]
基本的な設定
上記だけでは情報が足りないので、
次のどこかの場所に初期設定を配列で書きます。
まあヘルパーを直接いじるより Configure した方がいいと思います。
- OgpHelper::$defaults
- Configure::write(‘OGP’, array(…));
- View 変数の $ogp_params
(Controller から $this->set() で指定したもの)
設定できる内容はこんな感じ。
もっといろいろ設定できるんだけど、
「いいね！」ボタンやコメントボックスを設置するときに必要か、
あるいは設定してないと Facebook の Debugger でおこられるのは以下。
[php gutter=”false”]
array(
‘fb:admins’ => ‘[FB のユーザーID]’,
‘fb:app_id’ => ‘[FB のアプリケーション ID’],
‘og:url’ => ‘[設定したい URL]’,
‘og:type’ => ‘[ページのタイプ]’,
‘og:title’ => ‘[ページのタイトル]’,
‘og:locale’ => ‘[言語_地域コード]’,
‘og:site_name’ => ‘[サイトの名前]’,
‘og:image’ => ‘[ページ内容を表す画像]’,
‘og:description’ => ‘[ページの説明]’,
)
[/php]
設定すれば自動で埋め込まれるので、
テンプレートファイルを変更する必要はありません。
false に設定すると、そのタグは埋め込まれません。
ただし後述の自動取得設定が true になっていたら
それらしい値を自動で挿入します。
ヒント
fb:admins- https://graph.facebook.com/(ユーザー名) で調べられます。
fb:app_id- https://developers.facebook.com/apps で新規作成/確認。
og:type- 使えるタイプ名一覧は https://developers.facebook.com/docs/opengraph/#types
og:locale- 日本語なら ja_JP, 米語なら en_US.
一覧は XML で提供されてます。 https://www.facebook.com/translations/FacebookLocales.xml
なお、Configure のキー名と view 変数の名前は変更することができます。
手っ取り早いのは view から
[php gutter=”false”]
$this->Ogp->configName = ‘[Configure のキー名]’;
$this->Ogp->varName = ‘[ビュー変数の名前]’;
[/php]
プロパティ名の自動修正
プロパティ名は og:url とか og:site_name とか決まってるんだけど
appid だったか app_id だったか、
siteName だったか site_name だったかわからなくなるとか
いちいち og: って書くのがめんどくさいとかありそうなので
別名で書いても正しく修正されるようにしてあります。
[php gutter=”false”]
‘admin’ => ‘fb:admins’,
‘admins’ => ‘fb:admins’,
‘app_id’ => ‘fb:app_id’,
‘appid’ => ‘fb:app_id’,
‘appId’ => ‘fb:app_id’,
‘appID’ => ‘fb:app_id’,
‘url’ => ‘og:url’,
‘URL’ => ‘og:url’,
‘type’ => ‘og:type’,
‘title’ => ‘og:title’,
‘locale’ => ‘og:locale’,
‘site_name’ => ‘og:site_name’,
‘sitename’ => ‘og:site_name’,
‘siteName’ => ‘og:site_name’,
‘image’ => ‘og:image’,
‘img’ => ‘og:image’,
‘description’ => ‘og:description’,
[/php]
その他のメソッド
set($property, $content = false, $id = false)
View のテンプレートファイル内からタグの設定を書き換えることができます。
[php gutter=”false”]
$this->Ogp->set(‘image’, ‘http://www.msng.info/wp-content/themes/msng/img/oboete.png’);
[/php]
また set() は与えられた文字列をそのまま返すので、
HTML に文字列を出力しつつ、同時に OGP の値を設定することができます。
[html gutter=”false”]
Ogp->set(‘description’, ‘ほげほげについて説明します。’);” />
[/html]
既に設定したプロパティを持つタグを set() した場合、
og:image は追記され、それ以外のプロパティは上書きされます。
ただし $id を指定すると、同じプロパティ名を持つ別のタグを追加します。
image 以外のものを複数入れることってなさそうな気もしますけど一応。
[php gutter=”false”]
$this->Ogp->set(‘description’, ‘これも説明文ですお見逃しなく！’, 2);
[/php]
$content に false を指定すると、
既に設定したプロパティ名を持つタグを削除することができます。
[php gutter=”false”]
$this->Ogp->set(‘title’, false);
[/php]
$id を指定して削除することもできます。
[php gutter=”false”]
$this->Ogp->set(‘image’, false, ‘logo’);
[/php]
ただし削除には次の delete() を使った方が自然だと思います。
delete($property, $id = 0)
指定したプロパティ名を持つタグを削除します。
set() で設定した $id を指定して削除することもできます。
set() で $id が無指定の場合は 0 になるので、
$id 無指定で set() したものは $id 無指定で削除できます。
ns()
OgpHelper 自体はレイアウトやテンプレートを変更しなくても動くんだけど
<html /> 要素に OGP と FB の namespace 属性を指定するのが本当なので
それを出力するためのメソッドです。
[html gutter=”false”]
Ogp->ns(); ?> />
[/html]
で、次のように出力されます。
[html gutter=”false”]
[/html]
その他の設定
$autoGet
各値の自動取得を行うかどうかの設定です。
[php gutter=”false”]
public $autoGetUrl = true;
public $autoGetTitle = true;
public $autoGetSiteName = true;
public $autoGetLocale = true;
[/php]
いずれも、その値がどこにも設定されていない場合に作動します。
$autoGetUrl- 現在リクエストされている URL を出力します。
$autoGetTitle- 現在の View レイアウトでの
$title_for_layout を出力します。
$autoGetSiteName- 現在の View レイアウトの
<title /> 内の文字列を出力します。__() やグローバル変数などの出力も評価します。ただし少々強引に切り取っていますし、サイト名なんてアプリケーション全体で変わらないものだから素直に Configure した方が賢いと思います。
$autoGetLocale- アプリケーションでの現在の設定から言語を拾い、
og:locale の値にマッピングできる場合は自動で出力します。次項を参照してください。
$locales
CakePHP で使われる言語コードと
og:locale コードをマッピングします。
主に $autoGetLocale の設定でロケールを自動取得する場合に使用されます。
これらは完全に1対1で対応させることができないので、
初期設定では次のものだけが指定してあります。
[php gutter=”false”]
array(
‘ja’ => ‘ja_JP’,
‘en’ => ‘en_US’,
)
[/php]
これ以外のロケール値を指定する場合は
アプリケーションのどこか (bootstrap.php など) で
次のように指定してください。
[php gutter=”false”]
Configure::write(‘OGPlocales’, array(
‘fr’ => ‘fr_FR’,
‘it’ => ‘it_IT’,
));
[/php]
ここでの設定と初期設定はマージされ、
Configure されたものが優先されます。
また Configure のキー名 OGPlocales は
次項の $configLocaleName で変更できます。
$configLocaleName
前項の $locales にマージされる Configure のキー名を指定します。
初期設定は ‘OGPlocales‘ です。
コード
以下に貼りますけど、直接 gist で見た方がはやいかも。
利用しているサービス
OGP Helper は先日公開したこのサービスで使っています。
もう終了したけどな。
次の人
CakePHP Advent Calendar 2011
明日は @papettoTV さんですお楽しみに！
頭ん中 
