CakePHP に自動で OGP タグを埋め込んで Facebook に対応させるためのヘルパーを作ったよ

2011年12月07日 15:00CakePHP

※ これは 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 かどっかで読み込み。

public $helpers = array('Ogp', 'Html', 'Form');

とりあえず何も設定しなくても <head /> 内にこういうものが追加されます。

<meta property="og:url" content="&#91;現在の URL&#93;" />
<meta property="og:type" content="website" />
<meta property="og:title" content="&#91;ビュー変数の $title_for_layout&#93;" />
<meta property="og:locale" content="ja_JP(言語設定による)" />
<meta property="og:site_name" content="&#91;レイアウトの title&#93;" />

基本的な設定

上記だけでは情報が足りないので、
次のどこかの場所に初期設定を配列で書きます。
まあヘルパーを直接いじるより Configure した方がいいと思います。

  • OgpHelper::$defaults
  • Configure::write(‘OGP’, array(…));
  • View 変数の $ogp_params
    (Controller から $this->set() で指定したもの)

設定できる内容はこんな感じ。
もっといろいろ設定できるんだけど、
「いいね！」ボタンやコメントボックスを設置するときに必要か、
あるいは設定してないと Facebook の Debugger でおこられるのは以下。

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' => '[ページの説明]',
)

設定すれば自動で埋め込まれるので、
テンプレートファイルを変更する必要はありません。

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 から

$this->Ogp->configName = '[Configure のキー名]';
$this->Ogp->varName = '[ビュー変数の名前]';

プロパティ名の自動修正

プロパティ名は og:url とか og:site_name とか決まってるんだけど
appid だったか app_id だったか、
siteName だったか site_name だったかわからなくなるとか
いちいち og: って書くのがめんどくさいとかありそうなので
別名で書いても正しく修正されるようにしてあります。

'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',

その他のメソッド

set($property, $content = false, $id = false)

View のテンプレートファイル内からタグの設定を書き換えることができます。

$this->Ogp->set('image', 'http://www.msng.info/wp-content/themes/msng/img/oboete.png');

また set() は与えられた文字列をそのまま返すので、
HTML に文字列を出力しつつ、同時に OGP の値を設定することができます。

<p><?php echo $this->Ogp->set('description', 'ほげほげについて説明します。');" /></p>

既に設定したプロパティを持つタグを set() した場合、
og:image は追記され、それ以外のプロパティは上書きされます。

ただし $id を指定すると、同じプロパティ名を持つ別のタグを追加します。
image 以外のものを複数入れることってなさそうな気もしますけど一応。

$this->Ogp->set('description', 'これも説明文ですお見逃しなく！', 2);

$content に false を指定すると、
既に設定したプロパティ名を持つタグを削除することができます。

$this->Ogp->set('title', false);

$id を指定して削除することもできます。

$this->Ogp->set('image', false, 'logo');

ただし削除には次の delete() を使った方が自然だと思います。

delete($property, $id = 0)

指定したプロパティ名を持つタグを削除します。
set() で設定した $id を指定して削除することもできます。

set() で $id が無指定の場合は 0 になるので、
$id 無指定で set() したものは $id 無指定で削除できます。

ns()

OgpHelper 自体はレイアウトやテンプレートを変更しなくても動くんだけど
<html /> 要素に OGP と FB の namespace 属性を指定するのが本当なので
それを出力するためのメソッドです。

<html<?php echo $this->Ogp->ns(); ?> />

で、次のように出力されます。

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

その他の設定

$autoGet

各値の自動取得を行うかどうかの設定です。

public $autoGetUrl = true;
public $autoGetTitle = true;
public $autoGetSiteName = true;
public $autoGetLocale = true;

いずれも、その値がどこにも設定されていない場合に作動します。

$autoGetUrl
現在リクエストされている URL を出力します。
$autoGetTitle
現在の View レイアウトでの $title_for_layout を出力します。
$autoGetSiteName
現在の View レイアウトの <title /> 内の文字列を出力します。__() やグローバル変数などの出力も評価します。ただし少々強引に切り取っていますし、サイト名なんてアプリケーション全体で変わらないものだから素直に Configure した方が賢いと思います。
$autoGetLocale
アプリケーションでの現在の設定から言語を拾い、og:locale の値にマッピングできる場合は自動で出力します。次項を参照してください。

$locales

CakePHP で使われる言語コードと
og:locale コードをマッピングします。
主に $autoGetLocale の設定でロケールを自動取得する場合に使用されます。

これらは完全に1対1で対応させることができないので、
初期設定では次のものだけが指定してあります。

array(
	'ja' => 'ja_JP',
	'en' => 'en_US',
)

これ以外のロケール値を指定する場合は
アプリケーションのどこか (bootstrap.php など) で
次のように指定してください。

Configure::write('OGPlocales', array(
	'fr' => 'fr_FR',
	'it' => 'it_IT',
));

ここでの設定と初期設定はマージされ、
Configure されたものが優先されます。

また Configure のキー名 OGPlocales は
次項の $configLocaleName で変更できます。

$configLocaleName

前項の $locales にマージされる Configure のキー名を指定します。
初期設定は ‘OGPlocales‘ です。

コード

以下に貼りますけど、直接 gist で見た方がはやいかも。

利用しているサービス

OGP Helper は先日公開したこのサービスで使っています。

もう終了したけどな。

次の人

CakePHP Advent Calendar 2011
明日は @papettoTV さんですお楽しみに！

  • このエントリーをはてなブックマークに追加