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

  • 投稿日
  • 著者 キタジマタカシ
  • カテゴリー Web

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>
参考
EC-CUBEでOGP設定（Facebookには対応、mixiチェックは無視） – ウェブ、ショウジン

  • ブックマーク
  • Feedly
  • -
    フィード
EC-CUBE Facebook

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。

記事一覧