【備忘録】EC-CUBE4で商品詳細ページにSNSシェアボタンを設置する
SNSシェアボタンの埋め込みは
EC-CUBE4ではプラグインもあるので、それが早いとは思いますが…
今回は都合によりプラグインを使用できなかったので、
埋め込みタグの備忘録として残します。
商品詳細ページは商品ごとにURLが変わるので、
埋め込みタグのURLの部分に
{{ app.request.uri }} を入れることで、
「現在表示させているURL」を取得させて応用。
LINEで送るボタン
|
1 |
<div class="line-it-button" data-lang="ja" data-type="share-a" data-env="REAL" data-url="{{ app.request.uri }}" data-color="default" data-size="small" data-count="false" data-ver="3" style="display: none;"></div> |
Twitter ツイートボタン
|
1 |
<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><a href="https://twitter.com/share?url={{ app.request.uri }}" class="twitter-share-button" data-show-count="false">ツイート</a ><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></span></span> |
X（旧Twitter）はまだところどころTwitterのままなんですよね。2023年11月現在。 🙁
Facebook シェアするボタン
|
1 |
<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><div class="fb-share-button" data-href="{{ app.request.uri }}" data-layout="" data-size=""><a href="http://www. facebook.com/share.php?u={{ app.request.uri }}" rel="nofollow" class="fb-xfbml-parse-ignore">シェアする</a></div></span></span> |
公式サイトから埋め込みコードを取得する際は、スクリプトタグなどを入れるのも忘れずに。
この記事の投稿者
iziz
Webデザイナー&HTMLコーダーときどきイラストレーター。
