YTsudaのブログ

1985生まれ、男。東京で働くWeb制作者

Facebook likeボタンのimageを編集する with Cakephp

CakePHP Facebook

facebookボタンを押した時にピョンと出てくるポップアップの imageを編集したい。

昨日の日記で書いた og:description の編集方法
に習えば、view内で以下のようにヘルパーのmetaメソッド使えばできると考えられる。

echo $this->Html->meta(array(
    'property' => 'og:image',
    'content' => 'http://example.com/page_image.jpg',
    null,
    array('inline' => false)
));

すでに og:image が指定済みの場合

が、現在のプロジェクトでは反映されなかった。 なぜかと思いLayoutファイルをみてみると、すでに内で og:image のメタタグがハードコーディングされていた

<head>
...
<?php
echo $this->Html->meta(array(
    'property' => 'og:image',
    'content' => 'http://example.com/favicon.png'
));
echo $scripts_for_layout;
?>
...
</head>

この状態でさらに、view内からメタタグを追加した場合、メタタグが内に2つ並ぶことになる。 追加されたメタタグは

echo $scripts_for_layout;

の箇所で展開される。

Likeボタンの仕様

//こっちのタグが優先
<meta property="og:image" content="http://example.com/favicon.png />
//下のタグは反映されない
<meta property="og:image" content="http://example.com/page_image.jpg" />

こうして複数の og:image が並ぶことになった時、 Likeボタンのポップアップでは先に書かれている方を利用するようだ。

要件の再定義

通常はLayoutにハードコーディングされている方を表示し、
viewからmetaタグを挿入した時はそちらを優先したい。

順番を変えてみた

そこで、既存のメタタグと $scripts_for_layout の順番を入れ替えてたところ、うまく動くようになった。

<head>
...
<?php
echo $scripts_for_layout;
echo $this->Html->meta(array(
    'property' => 'og:image',
    'content' => 'http://example.com/favicon.png'
));
?>
...
</head>