EC-CUBE4で、商品詳細ページに合わせたシェアボタンとOGPを設定する方法

2021/12/03 更新日:2021/12/05
EC-CUBE4を使ってネットショップ運用をされているお客様から、シェアボタンとOGPの設定をご相談受けた際に、調べたコードやどこを編集して設置したのか、ご紹介します。
(今回は、諸事情でプラグインが利用できないサイトだったので)手動?で設置した記録を備忘録として書いていきます。

シェアボタンの設置

ファイルの場所(商品詳細ページ):app/template/テンプレートフォルダ名/Product/detail.twig

<a href="http://www.facebook.com/share.php?u={{ app.request.uri }}" rel="nofollow" target="_blank">Facebook</a>
<a href="https://twitter.com/share?url={{ app.request.uri }}&via=TwitterID&related=TwitterID&hashtags=#お好み&text=文章" rel="nofollow" target="_blank">Twitter</a>
<a href="https://social-plugins.line.me/lineit/share?url={{ app.request.uri }}" rel="nofollow" target="_blank">LINE</a>

よく利用されるfacebook・Twitter・LINEを、商品詳細ページのURLで動的に出力してシェアできるようにしました。

OGPの設置

ファイルの場所:app/template/aokikouetudou/default_frame.twig
の<head>~</head>内

<meta property="og:url" content="{{ app.request.uri }}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ BaseInfo.shop_name }}{% if subtitle is defined and subtitle is not empty %} / {{ subtitle }}{% elseif title is defined and title is not empty %} / {{ title }}{% endif %}" />
<meta property="og:description" content="{{ Product.description_list }}" />
<meta property="og:site_name" content="{{ Product.name }}" />
<meta property="og:image" content="サイトのURL{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@TwitterID" />

商品詳細ページの
・商品画像の1枚目をOGP画像として出力
・商品説明をメタディスプリクションを出力
・サイト名の部分を商品名出力
と出力されるようにしました。

ぜひお試しください

調べてみても、ピンポイントでこれだ!という情報が見つからなかったので、他のテンプレートファイルなどを見ながら書いたものになります。
もしかしたら仕様変更で利用できなくなるかもしれませんが、同じように実装したい方がいれば、お試しください。

関連記事を読む