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画像として出力
・商品説明をメタディスプリクションを出力
・サイト名の部分を商品名出力
と出力されるようにしました。
ぜひお試しください
調べてみても、ピンポイントでこれだ！という情報が見つからなかったので、他のテンプレートファイルなどを見ながら書いたものになります。
もしかしたら仕様変更で利用できなくなるかもしれませんが、同じように実装したい方がいれば、お試しください。
