ウェブ、ショウジン

EC-CUBEでOGP設定(Facebookには対応、mixiチェックは無視)

2011-8-5
Category
CMS

Facebookのソーシャルプラグインで「いいね」ボタンのコードを取得してページに設置するだけではそのページが「いいね」されても友達(Facebookで繋がっている)のフィードには上らないので、EC-CUBEのテンプレートにOGPのタグを追加する。

OGPとその設定自体については

OGP(Open Graph Protocol)設定をちょっとだけ学んで、facebook向けに実装はWordPressのプラグイン「WP-OGP」を使ってみたを参照。

また、WordPressにプラグインを使用せずに設定するには

WordPressにOGP設定を施す(非プラグイン版)を参照。

以下の例では、商品詳細ページ(detail.php)においてのみ、商品ごとの個別情報をOGP向けの各タグに出力し、それ以外のページでは共通の情報(例えばショップのTOPページとか)を出力する。

EC-CUBEで編集するテンプレートは

data/Smarty/templates/default/site_frame.tpl

冒頭の

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

にxmlns:ogとxmlns:fbを追加して

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

と変更。その上で以下の記述をhead内に追加。

<!--{assign var=detail value="`$smarty.const.URL_DIR`products/detail.php"}-->
<!--{if $smarty.server.PHP_SELF==$detail}-->
<meta property="og:title" content="<!--{$arrProduct.name|escape}-->" />
<meta property="og:type" content="product" />
<meta property="og:image" content="<!--{$smarty.const.SITE_URL}-->upload/save_image/<!--{$arrProduct.main_list_image}-->" />
<meta property="og:site_name" content="<!--{$tpl_title|escape}-->" />
<meta property="og:url" content="<!--{$smarty.const.SITE_URL}-->products/detail.php?product_id=<!--{$arrProduct.product_id}-->" />
<meta property="og:description" content="<!--{$arrProduct.main_list_comment}-->" />
<meta property="fb:app_id" content="app_id" />
<!--{else}-->
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="ページタイプ" />
<meta property="og:url" content="ページURL" />
<meta property="og:image" content="<!--{$smarty.const.SITE_URL}-->user_data/packages/default/img/OGP向けに用意した画像ファイル名" />
<meta property="og:site_name" content="サイトの名前" />
<meta property="og:description" content="ページの説明テキスト" />
<meta property="fb:app_id" content="app_id" />
<!--{/if}-->

商品ページだけでなく、たとえば商品一覧ページ(list.php)にもそれ用(商品一覧ページ用)のものを設定したければ以下の条件文を使って同じテンプレートに追加すればよいかと思われます。

<!--{assign var=list value="`$smarty.const.URL_DIR`products/list.php"}-->
<!--{if $smarty.server.PHP_SELF==$list}-->
商品一覧ページにだけ表示させたい内容をここに
<!--{/if}-->

設定を済ませて、商品詳細ページのhtmlソースを確認してみると以下のようになってます。(薄桃色で囲われた部分が今回の作業で出力されるようになった部分)

eccube_ogp

あとは商品詳細ページに「いいね」ボタンを設置。

いいねボタン(Like Button)のほうはコードを発行してもらえるページ(Like Button – Facebook Developers)にアクセスして、URL to Likeの部分は空欄で。(?部分をクリックすると、defaults to the current pageとなっているので、これで商品ページで「いいね」されればその商品ページが、その他のページならそのページがFacebookにおける友達のNews Feedに上る、はず)今回はXFBML版のコードを使いました。(Likeじゃなくていいね!にするために言語のところは「ja_JP」指定)

<div id="fb-root"></div><script src="http://connect.facebook.net/ja_JP/all.js#appId=231228990247750&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like>

2011/8/11追記:
上記のようにURL to Like部分は空欄で問題なかったですが、URL(商品詳細ページの)を入力したい場合は、Like Buttonのコード取得時にURL to Like部分に「XYZ」とでも入れておき、これでGet Codeをクリックしてコードを取得。

取得したコードの「XYZ」部分を以下のEC-CUBEのSmartyタグに置き換えればよいです。コード取得時に入力するとSmartyタグの一部がエスケープ処理されて有効なコードが生成されないので。このようにします。

<!--{$smarty.const.SITE_URL}-->products/detail.php?product_id=<!--{$arrProduct.product_id}-->

2011/8/11追記ここまで。

URLリンターで確認。あと、Facebookで「Status」や「Link」の部分にURLを入力したときに設定されているOGPの内容が確認できるかどうかも確認。「いいね」ボタンを設置した商品詳細ページにおいて、そのボタンをクリックした際にFacebookにおける友達たちのNews Feedにもそれが上るかを確認。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿