Facebookの「いいね！」ボタンで使用するサムネール画像を、a-blog cmsでコントロールする簡単な方法

facebookの「いいね！」ボタンをみかけることが増えていませんか？

facebookが盛り上がりを見せてきました。
そんな中で「いいね！」とうい青いボタンを見かけることも、きっと増えたと思います。
ウェブサイトをもっている方なら「いいね！」ボタンを設置した方もいるかもしれません。

そのときに「あれ？」と思うことありませんでしたか？
そう。
画像が時々「これじゃない！」ってことがあるとおもいます。

【余談】上記の画像は私の個人ブログの内容です。よろしければご覧下さい。
「今、Facebookが自分にとっておもしろい理由 | 日記 | emptyhouse」

「いいね！」の画像をコントロールしてしまいましょう。

a-blog cmsでサイトを構築している場合、ある程度この画像をコントロールすることができます。
a-blog cmsの画像ユニットには「メイン画像」がありますが、ここで指定した画像をfacebookのいいね画像に指定することができます。

方法は簡単、専用のモジュールを作って、タグを貼り付けるだけ

以下に簡単ですが作成方法を記します。
今回「facebook_likeImage」という名前でモジュールを作ります。実際の作業も同じモジュール名なら、最後に出てくるソースをコピーペーストですぐに使い出す事ができます。

モジュールを設定する

エントリーフォトのモジュールを利用して、画像を指定するメタタグを発行する準備をします。
こちらは動画でご確認下さい。

ポイントは、

グローバルモジュールにする事で、どこでも使えるようにする
eidのチェックを入れる事で、表示したエントリーだけに対応するようにする

ということでしょうか。

実際のソースにタグをはりつける。

headの必要な部分に以下のタグをはりつけてください。

<!-- BEGIN_MODULE Touch_Entry --><!-- BEGIN_MODULE Entry_Photo id="facebook_likeImage" --><!-- BEGIN unit:loop --><!-- BEGIN entry:loop --><!-- BEGIN image:veil --><meta property="og:image" content="%{BASE_URL}%{ROOT_DIR}{path}"/><!-- END image:veil --><!-- END entry:loop --><!-- END unit:loop --><!-- END_MODULE Entry_Photo --><!-- END_MODULE Touch_Entry -->

こちらのタグをはりつけることで、エントリーを表示したときのみ、メタタグが表示されます。
ポイントは

「MODULE Touch_Entry」を使う事で、エントリー表示のときだけ動作

だと思います。
このタグをいれているために、モジュール設定側でエントリーの表示のコントロールは使っていません。

いかがでしたか？

メイン画像にしたいものは、そのままサムネールで使うものなので、運用上は問題ないかとおもいます。
また、今回は何もしませんでしたが画像がない場合はnoimageの部分に、サイトのロゴなどのサムネールを専用で作り、指定してもいいかもしれません。