EC-CUBEでもOGPタグといいねボタンの設置を設置する

OGPについては「フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記」でまとめられています。

EC-CUBEのバージョンは2.11系で設定しました。

変更箇所

/PATH/TO/data/Smarty/templates/テンプレート名/site_frame.tpl

まず、htmlタグに属性を追加します。


<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内にOGP用のmetaタグが出力されるように下記を追加。

<!--{assign var=detail value="`$smarty.const.TOP_URLPATH`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.HTTP_URL}-->upload/save_image/<!--{$arrProduct.main_list_image}-->" />
<meta property="og:site_name" content="<!--{$arrSiteInfo.shop_name|h}-->" />
<meta property="og:url" content="<!--{$smarty.const.HTTP_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" />
<!--{/if}-->

/PATH/TO/data/Smarty/templates/テンプレート名/footer.tpl

いいねボタンを設置するために、の直前に下記のJavaScriptを追加します。僕はfooter.tplの一番最後に追加しました。

<div id="fb-root"></div>
<script type="text/javascript" src="https://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
FB.init({
	appId  : "あなたのapp_id",
	status : true,
	cookie : true,
	xfbml  : true,
	channelURL : "<!--{$smarty.const.HTTP_URL}-->products/detail.php?product_id=<!--{$arrProduct.product_id}-->",
	oauth  : true
});
</script>

/PATH/TO/data/Smarty/templates/テンプレート名/products/detail.tpl

商品詳細ページの任意の箇所に、下記のタグでいいねボタンを設置します。各属性の設定は「Like Button」を参照。

<fb:like href="<!--{$smarty.const.HTTP_URL}-->products/detail.php?product_id=<!--{$arrProduct.product_id}-->" send="false" width="367" show_faces="true" font="arial"></fb:like>

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく